[JavaScript] 속성 접근자 - 점 표기법(Dot notation) vs 괄호 표기법(Bracket notation)

객체의 property를 접근하는데에는 2가지 방법이 있습니다.

점 표기법(Dot notation) 과 괄호 표기법(Bracket notation) 입니다. 

console.log(profile.firstname);
console.log(profile['firstname']);

 

점 표기법과 괄호 표기법의 가장 큰 차이는 괄호 표기법안에는 아무 표현식(expression)을 넣는 것이 가능하다는 점입니다. 

 

const profile = {
    firstName: 'kim',
    lastName: 'minsu',
    age: 25,
    job: 'student',
    friends: ['kwon', 'lee', 'min']
}

const nameKey = 'Name';
console.log(profile['first' + nameKey]);
console.log(profile['last' + nameKey]);

표현식을 넣는 것이 가능하기 때문에 이와 같이 넣는 것도 가능합니다. 

밑의 출력문을 보면, + 연산자로 인해 String으로 만들고, profile이라는 객체로 가서 괄호 표기법으로 인해 객체의 property에 접근할 수 있습니다.

profile의 firstName, lastName property를 각각 출력하게 되어 'kim'과 'minsu'가 출력하게 됩니다. 

 

console.log(profile.'last' + nameKey);

점 표기법은 expression을 지원하지 않아 오류가 나게 됩니다. 

 

꼭 표현식(expression)을 사용해야할 경우는 괄호 표기법을 사용하고 다른 모든 경우에는 점 표기법을 사용하는 것이 보기에도 좋고 편리합니다.

const profile = {
    firstName: 'kim',
    lastName: 'minsu',
    age: 25,
    job: 'student',
    friends: ['kwon', 'lee', 'min']
}

profile.location = 'seoul';
profile['email'] = 'hello@naver.com';

console.log(profile);

점 표기법과 괄호 표기법을 통해, 기존 객체에 새로운 property를 정의해주는 것도 가능합니다.

console.log(`${profile.firstName} has ${profile.friends.length} friends, 
and his best friend is called ${profile.friends}`)

` ` (백틱)을 이용하여 객체.property에 접근할 수 있으며 friends의 value 값인 배열도 출력이 가능합니다.