11. 객체의 key 와 value 값이 같다면, property shorthand

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 ES6의 property shorthand(단축 속성명)에 대해서 알아보록 하겠습니다.

property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다.

코드를 통해 살펴보도록 하겠습니다.

var a = "foo",
    b = 42,
    c = {};

var o = {
  a: a,
  b: b,
  c: c
};

먼저 선언부에서 변수 a, b, c, 에 각각 "foo", 42, {} 를 할당했습니다.

그리고 변수 o 에 객체를 할당하는데, 

해당 객체의 key 'a' 는 변수 a의 값("foo")을 value 값으로 가지고, key 'b' 는 변수 b의 값(42)을 value값으로, key 'c'는 변수 c의 값({} - 빈객체)을 value값으로 가집니다.

즉 o는 {a: "foo", b: 42, c: {…}} 입니다.

위의 코드에서 객체를 정의할 때 key와 value의 값들이 같은 것을 알 수 있습니다.

이를 property shorthand 를 이용하면 다음과 같이 더 간단하게 정의 할 수 있습니다.

var a = "foo",
    b = 42,
    c = {};

// 단축 속성명 (ES6)
var o = { a, b, c };

단축 속성명을 사용하면 자동으로 key값을 변수명으로 생성합니다.

따라서 o는 {a: "foo", b: 42, c: {…}} 이 됩니다.

여기까지 ES6의 property shorthand(단축 속성명)에 대해서 알아보았습니다.

다음 포스팅에서는 생성자 함수의 업그레이드 버전이라고 볼 수 있는 class에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)