계산된 프로퍼티 computed property

계산된 프로퍼티 (computed property, 연산 프로퍼티)

저장 프로퍼티와 다릴 저장 공간을 갖지 않고, 다른 저장 프로퍼티의 값을 읽어 연산을 실행하거나, 프로퍼티로 전달받은 값을 다른 프로퍼티데 저장한다. 

쉽게 말하면 키(key) 값에 변수 또는 함수를 넣고 싶을때 사용된다.

let a = 'age';
// 변수 a 에 age 값을 할당

const user = {
  name: 'Mike',
  [a]: 32, // computed property
}
// user 객체에 변수 [a]에 할당된 값을 불러옴 >  이것을 computed property 라고 불음

 

 아래와 방식 외에도 식 자체를 넣는것도 가능

const user = {
  [1+4]: 5,
  ['안녕' + '하세요']: 'Hello',
}

console.log(user); // { '5: 5, 안녕하세요: 'Hello' } 객체 출력

 

그렇다면 대체 computed  property 는 언제 사용 될까? 그냥 키 값 자체에 넣어서 사용하면 될걸
굳이 다른속성값을 가져와서 코드도 더 길고 복잡하게 이해가 되지 않아 구글링 해보았다

보통 변수값을 사용하고 싶을때 *템플릿 리터럴을 많이 사용하는데 이건 value 에는 적용하여 넣을 순 잆지만 key 값에는 넣을 수 없다고 한다. 그래서 키에도 템플릿 리터럴처럼 변수명과 함수를 넣기 위해 [ ] 을 사용하여 넣는것이라고 한다!

*backtice(`)을 사용해서 중간에 변수명을 넣는 것

 

조금 더 실용적인 예제를 활용해보자. 함수를 통해 받은 매개변수들로 객체로 반환하는 하는 예제이다.

어떻게 key 가 될지 모르는 객체를 만들때 유용한 방법이다.

function makeObj(key, val) {
  return{
    [key]: val   // 키에는 변수명이 들어갈수 없으므로 '연산자 프로퍼티'를 활용해준다.
  };
}

const obj = makeObj('나이', 30); 
console.log(obj); // { 나이: 30 } 객체 반환