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

"객체 리터럴"

 

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

ES6에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공한다.

 

9.1. 프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.

// ES5
var x = 1, y = 2;

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

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

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때, 프로퍼티 키를 생략(Property shorthand)할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

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

// 프로퍼티 축약 표현
const obj = { x, y };

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

 

9.2. 프로퍼티 키 동적 생성

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

 

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

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

var obj = {};

// 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++1] = i;
obj[prefox + '-' + ++i]	= i;

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

ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

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

// 객체 리터럴 내부에서 프로퍼티 키 동적 생성
var obj = {
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i,
	[`${prefix}-${++i}`]: i
};

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

 

9.3. 메소드 축약 표현

ES5에서 메소드를 정의하려면 프로퍼티 값으로 함수를 할당한다.

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

obj.sayHi();	// Hi! Lee

ES6에서는 메소드를 정의할 때, function 키워드를 생략한 축약 표현을 사용할 수 있다.

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

obj.sayHi();	// Hi! Lee