JavaScript Object[‘key’] vs Object.key 차이

 

JavaScript 객체의 property를 접근 하는 방법에는 []와 . 을 사용하는 방법이 있습니다. 가령 아래와 같이 a라는 객체가 있다면 속성에 접근하는 방법이 두 가지가 있는거죠

var a = {
 b : 1,
 c : 2
}console.log(a["b"] + ' vs ' + a.b) // 1 vs 1

아, 두 가지 방법이 있구나. 헌데 종종 loop 내부에서 a.b와 같이 .을 써서 Property에 접근 시 undefined가 되는 경우를 봤습니다. 그 때는 뭐야? 하고 넘어갔는데 정리 좀 해봤습니다.

JS Object property . vs [] nation

먼저 . 표현을 사용한 아래 소스와 결과를 보겠습니다.

var a = {
 “a” : 1,
 “b-c”: 2,
 “0d” : 3,
 “d0” : 4
}console.log(a.a)   // 1
console.log(a.b-c) // ReferenceError: c is not defined
//console.log(a.0d)// SyntaxError: Invalid or unexpected token
console.log(a.d0)  // 4

두 번째 console.log(a.b-c) 에서 c가 선언되지 않았다는 에러가 발생합니다. a.b-c에서 어떻게 해석되냐면 객체 a의 속성 b와 변수 c를 뺴라는 연산으로 인지됩니다. 따라서 이런 상황에선 . 표현으로 접근할 수 없고 a[“b-c”]로 표현되어야 합니다. (이유는 나중에) .. 주석 처리한 세 번째 console.log는 주석을 풀고 실행하면 에러가 발생합니다. 왜냐면 . 표현에서 숫자가 먼저 나오면 에러가 발생합니다. 아래를 볼까요.

var a = {
 a : 1,
 2 : 2,
 d3 : 3
}console.log(a.a)
console.log(a[‘2’])
console.log(a.2) // error 발생

객체 a는 property로 2를 가집니다. 2에 대한 접근은 a[‘2’]로는 가능하지만 a.2는 에러가 발생합니다. 마찬가지로 a[‘2a’]는 가능하지만 a.2a는 에러가 발생합니다.

반면에 [] 으로 객체에 속성값이 문자열이라면 전부 접근가능합니다.

var a = {
 “a” : 1,
 2 : 2, 
 “b-c”: 3, // -
 “ — d”:4, // — 
 “ e “:5 // space
}

위의 객체 a는 속성으로 다양한 값을 가지고 있습니다. 아래에 보면 심지어 space 문자도 있네요. 하지만 문자열로 되어있고, 이는 . 표현의 한계를 넘어 [] 표현으로 모두 접근가능합니다. 궁금하면 출력해보세요.

제일 큰 차이는 property를 변수로 접근 가능하느냐

[] 표현은 변수로 접근 가능하지만 . 표현은 바로 객체의 속성에 접근합니다. 아래를 보면 이해가 갈겁니다.

var a = {
 b : 1,
 c : 2
}var b = ‘c’console.log(a[b] + ‘ vs ‘ + a.b) // 2 vs 1

console.log 에서 a[b]와 a.b로 접근 했습니다. 헌데 b는 변수로 c라는 값을 가지고 있습니다. a[b]에서는 b가 변수가 되어 실제로 객체 a의 속성 c의 값인 2를 출력하는 반면, a.b에서는 b가 변수가 아닌 실제 속성 b에 접근하여 1을 출력하게 됩니다.

자 이로 인해, 제가 맨 위에서 언급했던 loop에서 object.key 값이 undefined가 된 이유를 알 수 있습니다. JS에서 개발을 하다보면 객체의 loop를 돌아 각 property에 접근하는 경우가 있습니다.

var a = {
  b  : 1,
  c  : 2
}for (key in a) {
 console.log(a.key) // undefined, undefined
 console.log(a[key])// 1,2
}

for문과 같이 객체에 속성 개수만큼 loop를 돌 떄 변수를 사용하는데 a[key]를 사용하면 key는 실제 속성값으로 변경되지만, a.key는 객체 a의 속성 key라는 문자열을 찾기에 undefined가 됩니다.