계산된 속성 이름 (Computed property name) 문법을 보자

🐕 계산된 속성 이름이란?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자 - JavaScript | MDN

위 Mozila 링크에서 확인해볼 수 있는 내용입니다.

Computed Property Name 문법은 ECMAScript 2015에 추가된 문법으로

// 프로퍼티명 약식 (ES2015)
let a = 'foo', b = 42, c = {};
let o = {a, b, c}

// 메서드명 약식 (ES2015)
let o = {
  property(parameters) {}
}

// 계산된 프로퍼티명 (ES2015)
let prop = 'foo';
let o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
}

맨 아래 예제 계산된 프로퍼티 명이 Computed Property Name을 다루고 있습니다.

ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티를 지원합니다.
대괄호 [ ] 안에서 "표현식"을 허용하며 표현식은 "프로퍼티명"으로 계산되어 사용됩니다.
이것은 프로퍼티를 읽고 설정할 때 사용하는 프로퍼티 접근자 구문의 대괄호 표기법과 유사해보입니다!

MDN의 설명을 조금 더 읽기 편하게 살짝 다듬어 보았습니다.

표현식이라는 단어에 대해 이해가 있다면 이해가 좀 더 쉬우니 표현식의 정의에 대해 아래에 서술합니다.

표현식(expression)이란 리터럴 , 식별자, 연산자, 함수 호출 등의 조합을 말하며
표현식은 평가(evaluation)되어 하나의 값이 됩니다.
따라서 표현식은 하나의 값으로 평가될 수 있는 문이라고 볼 수 있습니다.

이제 표현식의 정의에 유의하며 계산된 프로퍼티 명의 정의를 살펴보면

대괄호 안에는 표현식으로 정의된 자바스크립트 코드들을 넣을 수 있고

그 표현식이 평가되어 만들어지는 값이 프로퍼티명이 된다는 것을 알 수 있어졌습니다

 
따라서  위 예제코드에서 [ 'b' + 'ar' ]은 하나의 표현식으로 성립이되며

그 표현식의 결과(값)인 'bar'가 프로퍼티의 키값이 되는 구조입니다.

---

👻사전 정의된 변수의 값을 키값으로 설정하기

let a = '엄준식';

let obj = {
  [a]: '어어어엄',
  a: '객체의 키',
};

console.log(obj.a); // 객체의 키
console.log(obj.엄준식); // 어어어엄

사실상 가장 많이 사용되는 용례가 아닐까 싶습니다.

위와 같이 대괄호로 감싸주는 것을 통해 사전 정의한 변수의 값을 키값으로 사용한다는 의미로 사용할 수 있습니다.

이 때에 참조되는 변수는 스코프체인을 따르게 된다는 점도 기억해두면 좋습니다.

let b = '전역';

function add() {
  let b = '지역';
  let obj = {
    [b]: '지역일까전역일까',
  };
  console.log(obj.지역); // 지역일까전역일까
  console.log(obj.전역); // undefined
}

add();

일반적인 스코프체인처럼 동작하니까 같은 이름의 변수를 스코프만 바꿔서 사용하는 경우엔

주의하면 좋겠네요!

---

🥶 표현식이랬으니 if문도 사용가능하다

let bool = true;
let map = {
  [bool ? '트루' : '펄스']: '이렇게도된다고?',
};

console.log(map.트루); // 이렇게도된다고?
console.log(map.펄스); // undefined

표현식이라고 하였으니 하나의 값으로 평가될 수 있으면 사용 가능합니다.

따라서 위와 같이 삼항연산자를 사용한 용례 또한 가능합니다.

---

🐶마치며

이러한 계산된 프로퍼티 이름 문법은 가독성 측면에서 유리해질 수 있으며

하나의 변수로 키값을 정의하여 계산된 프로퍼티 이름 문법을 사용하는 경우

키값을 동적으로 결정하는 상황 혹은 사람의 실수를 방지하고자 하는 경우

키값을 짧고 가독성 좋게 유지보수하고자하는 경우 유용하게 동작합니다.

import { createAction, handleActions } from 'redux-actions';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

export const increaseAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch(increase());
  }, 1000);
};
export const decreaseAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch(decrease());
  }, 1000);
};

const initialState = 0;

const counter = handleActions(
  {
    [INCREASE]: (state) => state + 1,
    [DECREASE]: (state) => state - 1,
  },
  initialState,
);

export default counter;

예컨대 리덕스를 활용한 간단한 코드에서 위와 같이

계산된 프로퍼티 이름 문법을 활용할 수 있습니다.

---

이해했다고 생각할 때가 가장 무서울 때다.