[JS] 객체 리터럴 프로퍼티 기능 확장, 계산된 프로퍼티 이름

프로퍼티 축약 표현

• 프로퍼티 값으로 변수를 사용하는 경우,
  프로퍼티 이름을 생략할 수 있다.
• 프로퍼티 키의 이름은 변수의 이름으로 자동 생성됨.

// ES6
let x = 1, y = 2;
const obj = { x, y };
console.log(obj); // { x: 1, y: 2 }

프로퍼티 키 동적 생성

• 문자열 또는 문자열로 변환 가능한 값을 반환하는 표현식을 사용해 동적 생성 가능
• 단, 프로퍼티 키로 사용할 표현식을 대괄호 [..]로 묶어야한다
  이를 계산된 프로퍼티 이름 (Computed property name)이라 한다.
• ES5에서 프로퍼티 키를 동적 생성하려면
  객체 리터럴 외부에서 대괄호[..]표기법을 사용해야 했음.

// ES5
var prefix = 'prop';
var i = 0;

var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

// ES6
const prefix = 'prop';
let i = 0;

const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

• 함수 선언식이 아닌 function 키워드 생략한 축약표현 사용

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

// ES6
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee