객체 접근 Dot vs Bracket notation

객체에 있는 요소를 접근하는 방법은 두가지가 있는데 하나는 Dot notation이고 다른 하나는 Bracket notation이다. 밑의 코드를 살펴보자!

const jonas = {
    firstName: 'Jonas',
    lastName: 'Lee',
    age: 2037-1991,
    job: 'teacher',
    friends: ['Michael','Peter','Steven']
};

console.log(jonas.lastName);
console.log(jonas['lastName']);

첫 번째 방식이 Dot notation이고 두 번째 방식이 Bracket notation이다. 두 방법 모두 동일한 결과가 나온다.

Dot Notation vs Bracket Notation

Dot notation 방식은 키 이름을 그대로 사용해야 값이 나오지만, Bracket notation에서는 변수에 키 이름을 넣고 해당 변수를 사용해 값을 가져올 수 있다. 아래 예시 코드를 보자.

const interestedIn = 'firstName';
console.log(jonas[interestedIn]); // Equivalent to jonas['firstName']

위의 코드에서 jonas.interestedIn 하면 undefined 나온다. 객체에 없는 키를 요청했기 때문이다.

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

위의 코드처럼 변수와 문자열을 조합하여 키 이름을 동적으로 생성할 수 있다. 그러나 Dot notation에서는 이런 식으로 사용할 수 없다.

console.log(jonas.'last' + nameKey)

이렇게 쓰면 콘솔창에 에러가 나는것을 알 수 있다.
대부분의 경우 Dot notation을 사용하지만, 계산된 키 이름이 필요한 위와 같은 경우 Bracket notation을 사용한다.

사용자 입력과 Bracket notation

Bracket notation은 사용자 입력을 처리할 때 유용하다.

const interestedIn = prompt('What do you want to know about Jonas? Choose between firstName, lastName, age, job and friends');
console.log(interestedIn)

if(jonas[interestedIn]) {
    console.log(jonas[interestedIn]);
} else {
    console.log('Wrong request!Choose between firstName, lastName, age, job and friends ')
}

jonas.location = 'Portugal';
jonas['twitter'] = '@juyeon';
console.log(jonas);

이 코드에서 console.log(jonas[interestedIn]);를 사용한 이유는 사용자로부터 입력받은 값을 키로 사용하기 위해서이다. Dot notation을 사용하려면 속성 이름을 명시적으로 작성해야 하지만, Bracket notation을 사용하면 변수의 값을 키로 사용할 수 있다. 따라서, 사용자 입력을 기반으로 객체의 속성에 접근하려면 Bracket notation이 적합하다.