[JavaScript] Computed Property Name

최근 개발 업무 하다가 object의 key 부분을 변수값으로 넣고 싶어서 어떻게 해야되나 찾아보다가 알아낸 결과를 남겨보자!

템플릿 리터럴

javascript에서 backtick(`)을 사용하여 문자열을 표현한 것을 템플릿 리터럴이라고 한다.
템플릿 리터럴을 사용하면 내부에 변수값을 사용할 수 있다는 것을 알고 있었다.

let name = 'yujuck';
console.log(`my name is ${name}`);

let key = 'name'
let obj = {
  `${key}` : 'yujuck'  // error
}

기존에는 문자열에 변수를 쓸 때 "my name is" + name 이런 식으로 +연산자를 이용해서 써야했지만,
템플릿 리터럴 덕분에 편하게 변수를 넣을 수 있게 되었다.

이게 제일 먼저 떠올라서 객체의 key로 사용할 때도 이렇게 사용하면 되겠다! 해서 사용해봤지만 key로는 사용이 안되고 value에만 사용이 되었다..

Computed Property Name

그래서 찾아본 결과 []를 사용해 넣으면 된다는 것을 알게 되었다.
ES6의 Computed Property Name이라는 것이 있는데,
객체의 key값을 표현식(변수, 함수 등)을 통해 지정하는 문법이다.

let key = "name";
let obj = {
  [key] : "yujuck"
}

// obj = { name: "yujuck" }

넣고 싶은 값을 []로 감싸서 사용하면 성공적으로 넣을 수 있다.

변수 뿐만 아니라 함수도 넣을 수 있다고 해서 한번 해봤다.

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

위에서 안된 이유가 템플릿 리터럴로만 key를 설정하려고 해서 그런 것 같다.
[]안에서 템플릿 리터럴로 가져오면 원하는대로 넣을 수 있다!

마무리

꽤나 유용하게 쓰일 문법인데 이제서야 알게 되다니.. 이게 ES6의 문법이라는 것도 몰랐을 뿐더러 이 문법이 Computed Property Name 이라는 이름(?)을 가지고 있는 것도 몰랐다..ㅎ
그냥 개발 과정에서 단순히 아.. 객체 key값에 변수 넣는거 어떻게 처리할 방법 없을까? 하고 찾아본게 이렇게 새로운 지식으로 돌아와서.. 괜히 기분이 좋네..!