[JavaScript] ES6에 추가된 객체 리터럴 기능 3가지

ES6에서는 더 간결하고 가독성 있는 객체 리터럴 기능 3가지를 제공했습니다.

지금부터 그 기능에 대해 알아보겠습니다.

---

1. 프로퍼티 축약 표현 기능

- 객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성되어 있습니다.

// ES5
let a = 1, b = 2;
let c = {
    a: a,
    b: b
};
console.log(c);	// {a: 1, b: 2}

 

 

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

// ES6
let a = 1, b = 2;
let c = { a, b };
console.log(c);	// {a: 1, b: 2}

---

2. 계산된 프로퍼티명

- ES5에서는 계산된 프로퍼티명으로 프토퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호[...]로 작성해야합니다.

//ES5
let str = "Hi";
let num = 0;
let obj = {};

obj[str + "-" + ++num ] = num;
obj[str + "-" + ++num ] = num;
obj[str + "-" + ++num ] = num;

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

 

 

- ES6에서는 객체 리터럴 내부에서도 프로퍼티명으로 프로퍼티 키를 동적 생성할 수 있습니다.

//ES6
let str = "Hi";
let num = 0;
let obj = {
    [`${str}-${++num}`]: num,
    [`${str}-${++num}`]: num,
    [`${str}-${++num}`]: num
};

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

---

3. 메서드 축약 표현

- ES5에서는 메서드 정의하려면 프토퍼티 값으로 함수를 할당합니다.

// ES5
let obj = {
    sayHi: function() { return 'Hello World!'; }
}

obj.sayHi();	// 'Hello World!'

 

 

- ES6에서 메서드 정의할 때 function 키워드를 생략하여 사용할 수 있습니다.

// ES6
let obj = {
    sayHi() { return 'Hello World!'; }
}

obj.sayHi();	// 'Hello World!'