Enhanced Object Literals

예를 들어 아래와 같은 openingHours 객체가 있다고 하자.

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

이 객체를 다른 객체에 넣어주고 싶을 때는 그 객체 안에 간단하게 이렇게만 써주면 된다. 이는 ES6 기능 중 하나이다.

openingHours,

그리고 객체 메서드를 정의할 때, 원래는 아래와 같이 써주던 방식에서

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

더 간단히 이렇게 써줄 수도 있다.

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

객체에서 키를 동적으로 설정해주는 방법도 있다.

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

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

그런데 이 코드에서 왜 key부분에 weekdays[3]라고만 쓰면 안되는지가 궁금해서 검색해보니 만약 [] 안에 쓰지 않으면 자바스크립트가 weekdays[3]라는 string을 가진 키라고 인식하기 때문이었다. 그래서 동적으로 weekdays라는 배열에 있는 3번째 원소를 키로 쓰기 위해서는 [] 안에만 써야 자바스크립트가 올바르게 동작하게 된다.