본문 바로가기

개발/Javascript

[ES6] computed property name

 

 

 

최근 Vuex를 공부하다 Mutation 부분에서 다음과 같은 코드를 보게 되었다.

 

const SOME_MUTATION = 'SOME_MUTATION';

export default {
  [SOME_MUTATION]() { ... }
}

 

 

대문자와 대괄호라니 어딘가 이상해보인다.

 

먼저 상수로 선언된 Mutation 이름이 대문자인 이유부터 알아보자.

 

Vuex 공식 문서를 확인해보니 일반적으로 Flux 패턴에서 Mutation의 이름을 상수로 표현한다고 한다.

 

Mutation과 Action이 많아질 경우 전체적인 흐름을 파악하기 힘들어 진다. 이 때 상수로 정의된 Mutation을 별도의 파일에 모두 분리할 수 있다면 Import 하는 방식을 통해 Mutation의 흐름을 한 눈에 파악할 수 있다. 또한 오타로 인해 생겨나는 디버깅의 어려움도 해결할 수 있기 때문에 일반적으로 Mutation 이름을 상수로 정의하는 것이다. (물론 상수의 사용 여부는 개발자의 선택이다.)

 

이미 상수를 일반적으로 대문자로 표기한다는 것을 알고 있었다면 예상 할 수 있는 부분이다.

 

그렇다면 대괄호의 정체는 무엇일까?

 

나는 처음에 해당 표현이 Vuex에서 사용되는 특별한 문법이라고 생각했다. 하지만 이것은 잘못된 생각이였고, 대괄호의 정체를 알아내는데 까지는 꽤 오랜 시간이 걸렸다.

 

그리고 구글링을 통해 대괄호의 정체가 computed property name이라는 ES6 문법임을 것을 알게 되었다. (흔하게 사용되는 ES6 문법 중 하나인 것 같은데 이 때 처음봤다..)

 

 

computed property name

 

 

computed property name표현식(expression)을 이용해 객체의 key 값을 정의하는 문법이다.

 

예를 들어 computed property name를 사용하면 key를 다음과 같이 정의할 수 있다.

 

const obj = {
  ["a" + "b"]: "결과는 무엇일까요?"
}

 

또한 프로퍼티의 키로서 변수도 받을 수 있다. (함수도 가능하다)

 

const name = "홍길동"
const age = 26

const obj = {
  [name]: "이름",
  [age]: "나이",
}

 

즉, 처음에 봤던 대괄호가 사용된 함수는 대괄호 안에 있는 변수를 키로 사용한 것이다.

 

다음 예제를 통해 대괄호를 사용한 함수가 어떻게 변환되는지 확인해보자.

 

먼저 변수를 생성한다.

 

// 변수 초기화
const funcName = 'doit';

 

그리고 생성한 변수를 객체 리터럴 안에서 함수의 이름으로 사용해보자.

 

{
  [funcName]() { 
    // do something 
  }
}

 

결과적으로 위의 코드는 ES6와 ES5에서 다음과 같이 변환된다.

 

// ES6
{
  doit() { 
    // do something 
  }
}

// ES5
{
  doit: function() { 
    // do something 
  }
}

 


 

 

 

 

안녕하세요. 평범한 대학생 개발자 yorr입니다.

포스팅을 읽고 궁금한 점 또는 문의가 있으신 분은 메일 또는 댓글을 남겨주세요.

 

Mail: twysg@likelion.org

Github: https://github.com/sangyeol-kim