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 }); //-> 에러를 발생하지 않는다.




카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)