JavaScriptのEnhanced Objueft Literals

2021年1月28日2021年3月29日JavaScript

JavaScriptのEnhanced Objueft Literalsについて便利な使い方をピックアップしました。

JavaScriptのEnhanced Objueft Literals

まずは下のオブジェクトをざっとみてみてください。

{
{
  const restaurantS = {
    name: 'レストランsakaso',
    location: '東京、日本',
    categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
    starterMenu: [
      'シーザーサラダ',
      '大根サラダ',
      '青じそサラダ',
      'チキンサラダ',
    ],
    mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],

    openingHours: {
      thu: {
        open: 12,
        close: 22,
      },
      fri: {
        open: 11,
        close: 23,
      },
      sat: {
        open: 0, // Open 24 hours
        close: 24,
      },
    },
    order: function (starterIndex, mainIndex) {
      return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
    },
  };
}

たとえば上のオブジェクトをより見やすくしたいとした場合、次のような方法があります。

ES5のやり方

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

  const restaurantS = {
    name: 'レストランsakaso',
    location: '東京、日本',
    categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
    starterMenu: [
      'シーザーサラダ',
      '大根サラダ',
      '青じそサラダ',
      'チキンサラダ',
    ],
    mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
    openingHours: openingHours,

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

ES5までは、上のように「openingHours: openingHours,」といった記述をして別のオブジェクトをオブジェクトの中に取り入れていました。

次にES6では、いくつかより簡単に取り込むことができるので紹介します。

ES6のEnhanced Objueft Literals：foo:fooの省略

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

  const restaurantS = {
    name: 'レストランsakaso',
    location: '東京、日本',
    mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
    openingHours,

  };
}

このように、ES6からは「openingHours,」と取り入れたいオブジェクト名を入れるだけで取り込むことができます。

ES6のEnhanced Objueft Literals: functionの省略

次は、orderの関数部分を変更します。

{
  {
    const restaurantS = {
      name: 'レストランsakaso',
      mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
      openingHours,
      // order: function (starterIndex, mainIndex) {
      //   return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
      // },
      order(starterIndex, mainIndex) {
        return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
      },
    };
  }
  

上のorder部分の:functionをとっても同じ動作をします。

ES6のEnhanced Objueft Literals: 便利な分割代入

次は、分割代入を利用して定数と別のオブジェクトを紐付けます。

{
  {
    const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
  const openingHours = {
    // thu: {
    [weekdays[3]]: {
      open: 12,
      close: 22,
    },
    // fri: {
    [weekdays[4]]: {
      open: 11,
      close: 23,
    },
    // sat: {
    [weekdays[5]]: {
      open: 0, // Open 24 hours
      close: 24,
    },
  };

このように、とても簡単に分割代入を使ってひもづけることができます。