[JavaScript] 향상된 객체 리터럴(Enhanced Object property)

ES6에서 객체 리터럴 프로퍼티 기능이 향상되었는데, 향상된 객체 릴터럴에 대해 알아보자.

---

1. 객체 프로퍼티 축약 표현

//ES5
var mine = 'Mine';
var it_record = 'ItRecord'
var fn = function(){return 'fn'};

var obj = {
  mine : mine,
  it_record : it_record,
  fn : fn
}

console.log(obj); // {mine: 'Mine', it_record: 'ItRecord', fn: ƒ}

//ES6
let mine = 'Mine';
let it_record = 'ItRecord'
let fn = () => 'fn';

const obj = {mine, it_record, fn}

console.log(obj); // {mine: 'Mine', it_record: 'ItRecord', fn: ƒ}

ES5에서는 프로퍼티 명과 프로퍼티 값을 하나하나 선언해주었는데,

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우에는 프로퍼티 명을 생략할 수 있다.

이렇게 생략할 경우에는 프로퍼티 명은 해당 변수의 이름으로 자동 생성된다.

 

2. 객체 프로퍼티 키 계산식 사용 (키값 동적 생성)

//ES5
var it = 'IT';
var record = 'RECORD';
var obj = {};

obj[it + '-' + record] = 'it-record';

console.log(obj); // {IT-RECORD: 'it-record'}

//ES6
let it = 'IT';
let record = 'RECORD';

const obj = {
  [`${it}-${record}`] : 'it-record'
};

console.log(obj); // {IT-RECORD: 'it-record'}

ES5에서는 프로퍼티 키를 동적으로 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용하여 생성하였다면,

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

 

3. 메서드 생성 방식 간소화 (축약 표현)

//ES5
var obj = {
  fn : function() {
    console.log('mine-it-record');
  }
};

obj.fn(); // mine-it-record

//ES6
const obj = {
  fn() {
    console.log('mine-it-record');
  }
}

obj.fn(); // mine-it-record

ES5에서는 메서드를 선언할때 함수 선언식을 사용하여 할당하는데,

ES6에서는 function 키워드를 생략한 축약 표현식을 사용하여 할당할 수 있다.

 

4. __proto__ 프로퍼티에 의한 상속

const chicken = {
  name : 'chicken',
  fn() {
    console.log(this.name);
  }
}

const chick = {
  name : 'Chick',
  __proto__ : chicken
}

console.log(chicken.fn()); // chicken
console.log(chick.fn()); // Chick

ES6에서는 객체 리터럴 내부에서 __proto__ 프로퍼티를 직접 설정할 수 있다.

이는 __proto__를 통해 다른 객체를 직접 바인딩하여 상속을 표현할 수 있음을 의미한다.

---

참고 : https://poiemaweb.com/es6-enhanced-object-property

Enhanced Object property | PoiemaWeb