[자바스크립트-객체] 객체 키를 동적으로 할당하는 법(computed property)

computed property

---

객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다.

 

기존에는 객체를 만들 때 정해진 이름의 속성명을 사용해 왔지만,

ES6부터는 computed property를 사용하여 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티명을 할당할 수 있다. 

let age = '27';

let a = {
  name: 'judy',
  [test]: 27 // computed property
}

console.log(a) // {name: 'judy', age: 27}

 

728x90

객체의 key 속성명을 변수로 지정하는 법

객체의 프로퍼티에 접근하는 방법은 2가지(a.name, a ['name'])가 있지만, 변수로 키를 지정해 줬을 때 접근할 수 있는 방법은 3가지가 있다. 

let age = 27;

a.age // 27
a[age] // 27
a[27] // 27

 

객체의 key 속성명을 함수로 지정하는 법

함수로 키를 지정해 줄 수도 있다. 단, 속성명을 생성하기 위해 리턴값은 숫자나 문자열이어야 한다. 

function func1(a, b) {
  return a + b;
}

function func2() {
  return 'hello';
}

let obj = {
  [`key${func1(5,8)}`] : 'result is 13',
  [func2()] : 'hi'
}

/* 
obj = {
  key13 : 'value is 13',
  hello: 'hi'
}
*/

반응형

참고자료

---

• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-computed-property-%EA%B0%9D%EC%B2%B4-Key%EB%A5%BC-%EB%B3%80%EC%88%98%EB%A1%9C