[JavaScript] 프로퍼티 키를 동적으로 생성하기

프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 합니다.

var obj = {};
var key = 'hello';

// ES5: 프로퍼티 키 동적 생성
obj[key] = 'world';
// ES6: 계산된 프로퍼티 이름
// var obj = { [key]: 'world' }

console.log(obj);

 

프로퍼티에 접근하기

var person = {
  name: 'Lee'
}

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

 

여기서 아래와 같은 실수를 하기 쉬운데 

var person = {
  name: 'Lee'
}

console.log(person[name]) // RefernceError: name is not definde

name을 작음따옴표('')로 묶어 주지 않았기 때문에 에러가 발생했습니다.

 

 

또한 당연하게도 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환합니다.

var person = {
  name: 'Lee'
}

console.log(person.age); // undefinde

이 때 ReferenceError가 발생하지 않는데 주의합시다.

 

 

var person = {
  'last-name': 'Lee',
  1: 10
};

person.'last-name'; // SyntaxError: Unexpected string
person.last-name;   // 브라우져 환경: NaN
                    // Node.js 환경: ReferenceError: name is not defined
person[last-name];  // ReferenceError: last is not defined
person['last-name'];// Lee

// 프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표를 생략할 수 있다.
person[1];    // SyntaxError: Unexpected number
person.'1';   // SyntaxError: Unexpected string
person[1];    // 10 : person[1] => person['1']
person['1']   // 10