[Javascript] computed property 문법(객체의 key를 변수로 접근하기)

 

 

 

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

 

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

 

let kk = "id";

let obj = {
    name : "super",
    [kk] : 123 // computed property
}

let mm = "rank";
obj[mm] = '#1'; 

console.log(obj) // {name: "super", id: 123, rank: "#1"} 속성이 추가됨

 

 

 

 

변수를 객체의 key로

이에 대한 원리를 설명하자면 이렇다.

 

객체의 프로퍼티에 접근할 때에는 다음과 같이 두 가지 방법으로 접근이 가능하다.

let obj = {
    name: "super",
    id: 123,
};

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

 

변수로 key 값을 지정해 주었을 때, 이에 접근하는 방법에는 세 가지가 있다. 변수 값이 곧 문자열이기 때문에 배열 인수 안에 변수를 써도 문제가 없는 것이다.

let kk = "id";

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

 

 

만약 객체에 새로운 프로퍼티를 추가하려 한다면 변수에 key 값을 지정하여 배열처럼 주면 된다.

let mm = 'rank'
obj[mm] = '#1';

obj[mm]; // '#1'
obj.rank; // '#1'
obj.['rank'] // '#1'

 

 

 

 

함수를 객체의 key로

변수 외에 함수도 올 수 있다. 단, return 값은 숫자나 문자열이어야 한다. 그래야 속성명을 지을 수 있기 때문.

 

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'
// }