ES6: Enhanced Object Literals (Object Shorthand)

발생일: 2015.05.10

키워드: Object Literals, Object Shorthand, 객체 리터럴

내용:

ES6에는 객체를 좀 더 간결하게 작성할 수 있는 구문이 추가됐다.

글로 설명하는 것보다는 아래 코드를 보는 게 훨씬 이해하기 쉽다.

// 변수명으로 객체를 생성 (Chrome 42+)

var a = 'foo';

var b = 'bar';

var obj = { a, b };

obj.a; //-> 'foo'

obj.b; //-> 'bar'

// ES5의 getter 와 setter 도 여전히 동작한다.

var obj = {

  get firstChar() {

    return this.name[0];

  }

};

obj.name = 'foo';

obj.firstChar; //-> 'f'

// 메서드도 간결하게 정의할 수 있다.

var obj = {

  name: 'foo',

  getName() {

    return this.name;

  }

};

obj.getName(); //-> 'foo'

// 속성 이름을 동적으로 계산해 넣을 수 있다. (크롬 42에서는 Experimental JavaScript 옵션을 켜야 확인할 수 있다)

var prop = 'foo';

var obj = {

  [prop]: prop

};

obj.foo; //-> 'foo'

obj[prop + 'bar'] = 'bar';

obj.foobar; //-> 'bar';

// 제너레이터를 간결하게 정의할 수 있다.

var o = {

  * generator() {

    ...

  }

};

// ES5에서는 속성 이름이 중복될 경우, 문법 에러를 발생했지만 ES6에서는 그렇지 않다.

({ x: 1, x: 2 }); //-> 에러를 발생하지 않는다.

참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer