Dot Notation vs. Bracket Notation (TIL 15일차)

“둘 다 똑같지 않나요?” “응, 아냐"

객체를 배우기 시작했습니다. 객체는 key 와 값이 쌍으로 연결되어 있습니다. 따라서 내부의 값에 접근하기 위해 index 값이 어떻게 정렬되어있는지를 알아야 하는 배열과 달리, key 를 입력해 원하는 값에 접근이 가능하죠. (사실 배열도 객체의 하나입니다.)

let user = {
    name: 'kimeensung',
    age: "unknown",
    blog: "https://eensungkim.medium.com/",
}

위와 같은 객체를 만들었다고 가정해봅시다. 객체의 속성에 접근하기 위해서는 키를 이용하면 되는데요. 이 때, Dot Notation 이라는 방법과 Bracket Notation 이라는 서로 다른 2가지 접근 방법이 있습니다.

Dot Notation 은 아래처럼 . (온점)을 이용하는 방법입니다.

user.name;       // 'kimeensung'
user.age;        // 'unknown'

의미 있는(시맨틱한) key 값을 설정해주기만 한다면 객체 내부의 속성에 매우 쉽게 접근이 가능합니다.

또 다른 방법인 Bracket Notation 은 아래처럼 와 ‘’ (작은 따옴표) 를 활용합니다.

user['name'];    // 'kimeensung'
user['age'];     // 'unknown'

Bracket Notation도 표현방법이 다를 뿐, 객체 내부의 속성에 매우 쉽게 접근이 가능합니다. 다만 아무래도 온점 하나만 사용하는 Dot Notation 보다는 조금 더 복잡한 건 사실이겠죠.

그러면 왜 굳이 두 가지 방법을 다 배워야 할까요. 다른 사람이 작성한 코드를 알아볼 수 있도록? 물론 그것도 맞는 말이긴 하지만, 좀 더 중요한 이유는 Bracket Notation 에는 Dot Notation 이 갖지 못하는 중요한 용도가 하나 더 있기 때문입니다. 바로 변수의 활용입니다.

앞서서 만든 user 라는 객체는 user 에 관련한 여러가지 정보를 담고 있습니다. 만약 함수를 활용해 객체에 접근해 객체 안에 담긴 속성을 확인하고 싶다면 어떻게 할 수 있을까요?

function findValue(obj, keyValue) {
    return obj.keyValue;
}
findValue(user, 'name');     // undefined
findValue(user, name);       // undefined

언뜻 보아서는 문제 없이 작동할 것 같지만, 이렇게 작성해서는 undefined 값을 출력합니다. obj.keyValue 는 obj 객체 안의 keyValue 라는 key 를 찾기 때문입니다. Dot Notation 으로는 변수의 식별자를 써서 객체를 탐색할 수 없습니다.

변수를 활용해 key 에 해당하는 값을 찾고 싶다면 Bracket Notation 을 사용해야 합니다.

function findValue(obj, keyValue) {
    return obj[keyValue];
}
findValue(user, 'name');      // 'kimeensung'
findValue(user, 'age');       // 'unknown'
findValue(user, name);        // undefined

매개변수에 각각 user 와 ‘name’ 을 전달인자로 주어 함수를 호출하면 연결된 값인 ‘kimeensung’ 을 돌려주게 됩니다. 마찬가지로 ‘name’ 대신 ‘age’ 를 넣으면 ‘unknown’ 을 돌려주죠.

이 때, 키 값을 작은 따옴표로 묶는다는 점을 기억할 필요가 있습니다. 그래야 Bracket Notation 을 이용한 접근방법의 모양이 되기 때문입니다. 만약 작은 따옴표가 없다면 함수는 undefined 를 반환합니다.

function findValue(obj, keyValue) {
    return obj['keyValue'];
}
findValue(user, name);    // undefined

만약 위처럼 미리 작은따옴표를 bracket 안에 넣어두면 어떨까요? undefined 를 돌려줍니다. 왜냐하면 이 때 함수 안에서 ‘keyValue’ 는 매개변수가 아닌 문자열로 취급되기 때문입니다.

설명이 길어졌지만 간단히 요약하면 Bracket Notation 은 변수를 활용해 객체에 접근할 수 있고, 이 점이 Dot Notation 과의 가장 큰 차이라고 할 수 있습니다.