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

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

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

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

```javascript
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の外に取り出してみます。

```javascript
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オブジェクトに次のように代入することができます。

```javascript
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オブジェクトが挿入されています。
![スクリーンショット 2021-05-29 8.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/2d4f21f8-00da-75bd-f18d-16dbced746eb.png)
代入する変数の名前だけにしてさらに短く書けます。

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

# 関数の定義も短く書ける
次のようにsumPriceという関数をobjectで定義したとします。

```javascript
const park = {
  //中略
  sumPrice: function (x, y, z) {
  const sum = x + y + z;
  console.log(sum);
  },
};
```
parkオブジェクト内のsumPriceから:functionを取り除いて短くできます。

```javascript
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と出ますので、ちゃんと機能していることが分かります。
![スクリーンショット 2021-05-29 9.06.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/716c9ca7-aae7-0623-667e-7d4e373c3609.png)

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

```javascript
const items = {
    trees: ["ヒノキ", "竹", "松", "杉", "イチョウ"],
    flowers: ["薔薇", "桜", "朝顔", "ひまわり"],
};
```
numItemsという新しいobjectにこのitemsのtrees配列の要素をプロパテー名にすることができます。何番目の配列の要素にするかを以下のように計算(0)して定義できます。注意点として[]で囲んであげる必要があります。

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

console.log(numItems);
```
trees配列の0番目がプロパティー名になっていてることが分かります。
![スクリーンショット 2021-05-29 9.26.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/afad23c3-40a5-7113-995d-57231d8212b1.png)
また、Template Literalを使って計算した結果を次のようにプロパティー名を指定することもできます。

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

console.log(numItems);
```
筆箱-70というプロパティー名が表示されます。
![スクリーンショット 2021-05-29 9.37.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/ed6e960e-1506-e334-8da7-400b498c7b7c.png)

# 参考サイト
https://qiita.com/rana_kualu/items/1f98c1a64210
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals