📚 computed property 문법 (객체 key를 변수로)

자바스크립트 computed property

기존에는 자바스크립트 객체를 만들때 정해진 문자열 이름의 속성명을 사용해왔다. ​하지만 이제 ES6에서는 computed property를 사용하여 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티명을 할당할 수 있게 되었다.

즉, computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다.

var kk = "id";

var a = {
    name : "super",
    [kk] : 123 // computed property
}

var mm = "rank";
a[mm] = '#1'; 

console.log(a) // {name: "super", id: 123, rank: "#1"} 속성이 추가되었다.

 

변수를 객체 key로

원리를 설명하자면 다음과 같다. 객체 프로퍼티에 접근할때 다음과 같이 두가지 방법으로 접근이 가능하다.

a.name // -> "super"
a['name'] // -> "super"

 

변수로 Key값을 지정해줫을때, 접근하는 방법은 3가지 가능해진다. 변수값이 곧 문자열이니까 배열 인수 안에 변수를 써도 문제없는 것이다.

var kk = "id";

a[kk] // -> 123
a['id'] // -> 123
a.id // -> 123

만일 객체에 새로운 프로퍼티를 추가할때, 변수 Key값으로 지정해서 줄때 배열처럼 주면 된다.

var mm = "rank";
a[mm] = '#1';

a[mm] // -> '#1'
a.rank // -> '#1'
a['rank'] // -> '#1'

객체의 value 같은 경우 당연히 문자열이 오든 넘버가 오든 배열이 오든 객체가 오든 변수가 오든 모두 올수 있다

 

함수를 객체 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'
// }