ES6以後のEnhanced Object Literals(強化されたオブジェクトリテラル)をマスターする

Enhanced Object Literals

皆さんもご存知の通りES6(ES2015)以降、JavaScriptに数多くの新しい機能、構文が追加されました。代表的なものとしては変数let、アロー関数、Promise、スプレッド演算子、分割代入、クラス、For of、デフォルト引数などがありますが、今回はその中でもEnhanced Object Literalsについて備忘録も兼ねて簡単にまとめてみました。

Enhanced Object Literalとは？

直訳すると「強化されたオブジェクトの記法」といったところでしょうか。ES5以前のオブジェクトリテラルと比較して、以下の３つのオブジェクトリテラルが追加されています。

• 他のオブジェクトをオブジェクトに挿入する際のキーの省略
• メソッドの省略記法
• キーに動的な値の設定

他のオブジェクトをオブジェクトに挿入する際のキーの省略

オブジェクトを持つ変数を他方のオブジェクトに同名のkeyとともに格納する際の省略記法です。

// 旧
let fruits = [
  orange: 100,
  peach: 300,
  apple: 120
];

let price = {
  milk: 150,
  rice: 2000,
  fruits: fruits
};

↓
↓

// 新
let fruits = {
  orange: 100,
  peach: 300,
  apple: 120
};

let price = {
  milk: 150,
  rice: 2000,
  fruits // fruits: fruitsと等しい。キーを省略できる。
};

従来の記法ではfruits: fruitsというように変数名と同名のプロパティをキーとして記載する必要がありました。
しかし、ES6以後では以下の通り同名のキーを省略して書くことができます。
なお、当然ながら別名のキーで変数を格納する場合はキーを省略することはできません。fruitsPrice: fruitsのようにキーを明記します。

メソッドの省略記法

// 旧
let price = {
  milk: 150,
  rice: 2000,
  fruits,
  order: function (product) {
    return `${product} has been ordered!`
  }
};

↓
↓

// 新
let price = {
  milk: 150,
  rice: 2000,
  fruits,
  order(product) { // : functionを省略
    return `${product} has been ordered!`
  }
};

上記のようにオブジェクト内に関数（メソッド）が存在した場合、従来の記法ではプロパティ名: function() {}というように関数式をvalueとして渡してあげる必要がありました。しかし、ES6以後の新記法ではセミコロンとfunctionを省略することが可能です。

キーに動的な値の設定

// 旧
let fruits = {
  orange: 100,
  peach: 300,
  apple: 120
};

↓
↓

// 新
let fruitsStock = [orange, peach, apple];

let fruits = {
  [fruitsStock[0]]: 100, // orange
  [fruitsStock[1]]: 300, // peach
  [`fruits ${1+2}`]: 120 // fruits 3
};

従来の記法ではプロパティは静的な値しか設定できませんでした。しかしES6以後の記法ではプロパティ名に変数名やテンプレートリテラルを使い動的な値を設定できます。プロパティ名を動的な値にする際にはプロパティを角括弧[]で囲ってあげる必要があります。

まとめ

ES6で追加された他の機能たちと比べるとだいぶ影の薄いEnhanced Object Literalsですが、使いこなせば多少コードを綺麗に書くことができるのではないでしょうか。