객체를 .(dot)과 [](array)로 접근할 때의 차이

Javascript의 객체는 속성과 값으로 이루어져 있다. 특정 객체의 내부 속성값에 접근하기 위해서는 객체명.속성명 또는 객체명['속성명']의 두 가지 방법이 가능하다. 객체 내에 정의된 메소드 역시 같은 방법으로, 객체명.메소드명(파라미터) 또는 객체명['메소드명'](파라미터)와 같이 실행하면 된다. 전자는 객체의 ‘캡슐화’를 좀 더 강조한 방법으로 다른 언어에서도 많이 사용하는 익숙한 방법이다. 후자는 배열에 접근하는 방법하고 유사하여, 인덱스에 숫자 대신 string값을 준 꼴이다. .을 사용한 방법이 객체의 계층이 많을 경우 더 읽기 쉬울 것 같다만, 둘의 실질적 사용은 큰 차이가 없어 보인다. 그러나 .을 이용한 방법으로만 객체를 다루다가, 한가지 문제에 부딪혔고 []를 통한 방법으로 해결가능함을 알게 되었다.

두 방법을 자세히 보면, .을 통한 접근 방법은 메소드명을 따옴표 없이 받는 반면, []를 통한 접근 방법은 따옴표를 표기하고 있다. 여기에서 두 방법의 한가지 차이가 나타난다. []를 통한 방법에서 따옴표가 없다면?

var me = { name: "jewon", age: 27, sex: "male", married: false };  
me[name];
> undefined

안된다. 그런데, me[name]이라는 코드가 보고 있으면 뭔가 자연스러워 보인다.(…) array[index]의 형태로 익히 사용했던 코드 형태이기 때문이다. index가 변수였듯, name자리는 변수라는 얘기다.

var toFind = "name"
me[toFind];
> "jewon"

이렇게 사용할 수 있다. 반면, .을 통한 방법은 이런 방법이 불가능하다. 속성명을 변수로서 주게 되는 좀 더 실용적인 예를 들면,

for (i in me) { console.log(i,": ", me.i); }; // property: undefined (X, me.i = undefined)
for (i in me) { console.log(i,": ", me[i]); }; // property: value (O, me.name = jewon...)

이런 것들이 있다. 이렇게 뽑아야 할 속성값이 런타임에 결정될 때, 변수로서 속성명을 정의해 주는 것은 오직 []를 통한 접근법으로만 가능하다. .을 통한 접근법에서는 이미 .뒤에 바로 속성명이 그대로 오기 때문에 변수와 속성명을 구분할 방법이 없다.

me.'name'
> Uncaught SyntaxError: Unexpected string

이렇게 따옴표를 주는 것 역시 불가능하다. .다음에는 속성명이 그대로 오는 것이 원칙이다. 이렇게 두 방법의 활용에서 가장 큰 차이는, []에서는 변수와 속성명을 구분해 사용 할 수 있다는 것이다.

me.1 = 100;
> Uncaught SyntaxError: Unexpected number
me[1] = 100;
me['1'];
> 100
me[1];
> 100
var a = 1;
me[a];
> 100
me.'1';
> Uncaught SyntaxError: Unexpected string

추가로, string이 아닌 타입을 속성명으로서 사용할때에도 차이가 발생한다. Javascript의 객체에서는 속성명에 number타입이 오는 것도 허용하고 있다. 그러나, .을 통한 방법으로는 속성명에 string이 아닌 타입이 오는 것을 에러로 처리한다. []를 통한 방법으로는 number타입을 속성명으로 주거나, 접근하는 것이 가능하지만, .을 통해서는 불가능하다.

이렇듯 []를 통한 객체 내부 접근법은 .을 이용해서 불가능한 것들을 할 수 있게 해주며, .을 이용한 접근법은 다소 엄격하다고 이해할 수 있다.