자바스크립트 - 객체 속성 값을 변수로 만드는 방법

자바스크립트에서 객체를 사용하다고 보면 key 값을 변수로 사용하고 싶을 때가 있습니다.

ES2015 문법 부터는 쉽게 객체의 key 값을 변수로 선언하여 사용할 수 있습니다.

 

객체 초기화 하기

일반적으로는 아래와 같이 초기화 할 수 있습니다.

var user = {
   name: 'superman',
   age: '23',
   job: 'developer'
}

 

객체 초기화 (약식 문법)

객체에 프로퍼티명을 약식으로 만들면 객체 property 값을 본인이 원하는 값으로 선언할 수 있습니다.

const name = 'superman';
const age = 23;
const job = 'developler';

var user = { name, age, job }

 

 

Computed Property 사용해서 객체 속성 변수 값으로 사용하기

[] 를 이용하여 key 값을 선언하면 계산된 Property를 만들어서 사용할 수 있습니다.

마찬가지로 조회할때도 Property 접근자를 사용하면 조회할 수 있습니다.

const keyMap = ['name', 'age', 'job'];
let i = 0;

const user = {
  [keyMap[i++]]: 'superman',
  [keyMap[i++]]: 23,
  [keyMap[i++]]: 'developer',
}

console.log(user[keyMap[0]); // superman