ES6알아보기 09 - Objects

오늘은 ES6 부터 Objects 를 다룰 때 바뀐 점들을 소개하려고 합니다.

축약형 표기 - Shorthand Notation

설명없이 바로 ES6이전과 ES6의 표기법을 비교해 보겠습니다.

var word = 'hello world';
var num = 10;

// ES6 이전의 Object 표기법
var obj = {
  word: word,
  num: num,
  print: function print() {
    console.log(this.word);
  }
}

// ES6 의 표기법
var objEs6 = {
  word,
  num,
  print() {
    console.log(this.word);
  }
}

차이점이 바로 보이실거라 생각됩니다. 변수병이 object의 property 명과 동일할 경우에는 property 명: 변수명 으로 선언할 필요없이 하나로 묶어서 표기할 수 있습니다. 물론 함수의 경우에도 동일합니다. 변수명과 프로퍼티 명이 다를 경우에는 나눠서 표기해 주어야 합니다.

연산가능한 property 명 - Computed Property

제가 Object 관련해서 매우 유용하다고 느낀 점이 이부분 입니다. ES6 에서는 Object의 프로퍼티 명을 동적으로 선언할 수 있습니다.

var word = 'world';

var objEx1 = {
  ['hello' + word]: 'hello',
}
console.log(objEx1.helloworld); // hello

var objEx2 = {
  ['hello ' + word]: 'hello',
}
console.log(objEx2.hello world); // Syntax Error 발생
console.log(objEx2['hello world']); // hello

위의 예와 같이 property 명을 고정으로 표기하는 것이 아닌 [ ] 대괄호 안에서 동적으로 선언할 수 있습니다. 또한 objEx1 과 objEx2 와의 차이점에서도 살펴볼 수 있듯이 프로퍼티명 안에 공백도 들어갈 수 있습니다. 하지만 공백이 들어간 프로퍼티를 참조할 경우 역시 [ ] 대괄호를 통해서만 불러올 수 있습니다. 가능하기는 하지만 결코 좋은 방법은 아니기 때문에 되도록 공백을 넣거나 하는 것은 좋지 않겠네요.

동일한 Property 명 선언가능

var obj = {
  x: 1,
  x: 2,
  x: 3
}
console.log(obj.x); // 3

ES6이전의 경우에는 동일한 이름의 프로퍼티가 있을 경우 syntax error 가 발생했지만 ES6의 경우는 마지막에 선언된 값으로 Overwrite 됩니다.