39. ES6 버전의 Enhanced Object Literals

안녕하세요. 박기린 입니다.

이번에는 자바스크립트가 ES6이 되면서 추가된 Obejct Literals (객체 리터럴)의 편리한 기능들에 대해 알아보겠습니다.

 

Enhanced JavaScript

자바스크립트는 버전 업데이트를 지원하고 있습니다.

새로운 버전은 '코딩 작성 트렌드를 따르는 방식'을 업데이트 해주고, 다른 언어에 친숙한 개발자들도 쉽게 자바스크립트를 접할 수 있도록 도와줍니다.

ES6 버전의 Object Literal 추가 업데이트 또한 다른 프로그래밍 언어들의 개발트렌드를 반영하여 자바스크립트에 적용시킨 사례입니다.

 

 

 

---

Object Literals in ES6

 

- Object의 property에 또 다른 Object를 담으려는 경우

레스토랑의 운영 정보를 담아놓은 restaurant라는 Object가 있다고 가정을 합시다.

 

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
  sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

그리고 레스토랑의 운영시간을 담아놓은 Object가 있습니다.

이 Object를 restaurant Object의 property로 넣어주고 싶습니다.

 

const restaurant = {
 ...

  // 기존의 방식
  openingHours: openingHours,

  // ES6 enhanced object literals
  openingHours, // object 변수를 그대로 집어넣어서 하위 property 생성

 ...
}

그럴 경우, 위처럼 넣어주면 됩니다.

 

ES6 이전에는

  openingHours: openingHours,

이런 식으로 넣었습니다. 객체 property의 이름을 적어주고, 객체 pointer를 연결해줍니다.

 

 openingHours,

ES6부터는 이렇게 넣을 수 있습니다. 처음부터 객체의 pointer를 전달해줍니다. 그러면 객체의 이름을 그대로 따온 property를 생성합니다.
다만, property의 이름을 다르게 지정해주고 싶다면 기존의 방법을 사용해야 합니다.

 

 

 

- Object에 method를 선언하는 경우

restaurant Object에 음식을 주문하는 함수 메소드를 넣어주고자 합니다.

 

{
  // 기존의 방식
  order: function(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  // ES6 enhanced object literals
  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
}

그럴 경우, 위처럼 넣어주면 됩니다.

 

ES6 이전에는

  // 기존의 방식
  order: function(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

':'와 'function' 키워드를 넣어서 메소드를 선언해야 했습니다.

 

  order(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

ES6 이후부터는 ':'와 'function' 키워드를 생략할 수 있습니다.

function 키워드도 생략해야 함을 잊지 말아주세요!

 

 

 

- property의 이름을 계산(compute)해서 지정해줄 수 있다.

const weekdays = ['mon','tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

각 요일이름이 담긴 weekdays Array가 있습니다. 이것을 이용해서, 아까 레스토랑의 오픈 시간이 담긴 openingHours Object를 만들어봅시다.

 

const openingHours = {
  [weekdays[3]]: {
    open: 12,
    close: 22,
  },
  [weekdays[4]]: {
    open: 11,
    close: 23,
  },
  [weekdays[2 + 3]]: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

1. property의 이름에 [대괄호]를 넣어줍니다.

2. [대괄호] 안에 계산식/표현식(expression)을 넣어줍니다.

 

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
  sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

그러면 이것과 같은 Object가 됩니다.