ES6에서 추가된 객체 리터럴의 확장 기능

프로퍼티의 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티의 키(key)와 값(value)으로 구성되어 있다. 프로퍼티에 값은 식별자에 할당된 표현식일 수도 있다.

ES6에서는 프로퍼티의 키와 변수의 이름이 동일한 이름일 때 프로퍼티 키를 생략하고 사용이 가능하다. 아래의 예시를 보자.

<script>
// ES5
var x = 1, y = 2;

var obj = {
	x: x,
    y: y
};

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

// ES6
ley x =1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }
</script>

계산된 프로퍼티 이름(computed property name)

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다. 단, 프로퍼티 키를 대괄호([])로 묶어야 한다. 이를 계산된 프로퍼티 이름이라 한다.

ES5에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적으로 생성하려면 객체 리터럴 외부에서 대괄호([]) 표기법을 사용해야 한다. 하지만 ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적으로 생성할 수 있다.

<script>
var prefix = 'prop';
var i = 0;

// ES5
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
var obj = {
	[`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
}

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

메서드 축약 표현

ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다. 하지만 ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

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

obj.sayHi(); // Hi! Lee


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

obj.sayHi(); // Hi! Lee
</script>