【Javascript】Enhanced object literals(強化されたオブジェクトリテラル）

初めに

ES6に導入されたEnhanced object literalsについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

他のobjectを対象のobjectの中に挿入する

objectの中にあるobjectを別の変数名で定義し、それを対象のobjectに挿入することができます。言葉では難しいので、例をみてみましょう。

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
  items : {
    trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
    flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
  },
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};

このparkのitemsというobjectをparkの外に取り出してみます。

const items = {                                     //変数として格納する
    trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
    flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
};

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
  // items : {
  //   trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
  //   flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
  // },
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};

取り出したitemsをparkオブジェクトに次のように代入することができます。

const items = {
    trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
    flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
};

const park = {
  name: "flower park",
  location: "東京都新宿区高田馬場３丁目",
  items: items,                             //itemsを代入する
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};

console.log(park);

コンソールで確認してみると、parkの中にitemsオブジェクトが挿入されています。

代入する変数の名前だけにしてさらに短く書けます。

const park = {
  //中略
  items,                //itemsだけにする。
  facilities: ["すべり台", "ブランコ", "トイレ", "噴水"],
  people: ["安田", "上村", ["鈴木", "福岡"]],
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};

結果は同じです。

関数の定義も短く書ける

次のようにsumPriceという関数をobjectで定義したとします。

const park = {
  //中略
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};

parkオブジェクト内のsumPriceから:functionを取り除いて短くできます。

const park = {
  //中略
  sumPrice(x, y, z) {             //:functionを取る
  const sum = x + y + z;
  console.log(sum);
  },
};
park.sumPrice(1,2,3);     //6と表示される

park.sumPrice(1,2,3);というような形で関数を呼び出すと結果が6と出ますので、ちゃんと機能していることが分かります。

#オブジェクトのプロパティー名を計算して代入できる
itemsというobjectの中にあるtreesには配列として"ヒノキ",...が入っています。

const items = {
    trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
    flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
};

numItemsという新しいobjectにこのitemsのtrees配列の要素をプロパテー名にすることができます。何番目の配列の要素にするかを以下のように計算(0)して定義できます。注意点として[]で囲んであげる必要があります。

const numItems = {
    [items.trees[0]]: {
      number: 10
    },
};

console.log(numItems);

trees配列の0番目がプロパティー名になっていてることが分かります。

また、Template Literalを使って計算した結果を次のようにプロパティー名を指定することもできます。

const numItems = {
 　　//中略
    [`筆箱-${100 - 30}`]:{     //追記
      number: 20
    },
};

console.log(numItems);

筆箱-70というプロパティー名が表示されます。

参考サイト

https://qiita.com/rana_kualu/items/1f98c1a64210
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals