初めに

ES6に新たに導入された便利な構文の一つに「分割代入（destructuring)」があります。分割代入について学習した内容をもとにいろいろ試してみました。

分割代入(destructuring)とは

javascriptのarrayやobjectのような箱に入っている構造化（structured data)したデータをunpacking(箱を開けて取り出す）して個別のデータを取ることです。日本語では「分割代入」。個別のデータをさらに変数に代入して利用することから「代入」という言葉がさらに付いています。

使い方（構文）

分割代入する側 = 分割代入対象の配列 or オブジェクト

分割代入(destructuring)をする理由

主な理由としては記述量を劇的に減らすことができるからです。
分割代入を使う場合と使わない場合に分けて、配列からそれぞれのデータを変数に代入してみました。

①分割代入を使わない場合

<body>

  <script>

    const fruits = ['apple', 'banana', 'orange'];
    const a = fruits[0];
    const b = fruits[1];
    const c = fruits[2];

    console.log(a, b, c);  
  </script>

</body>

a、b、cにいちいち配列のデータapple,banana,orangeを代入しています。

②分割代入を使った場合

<body>

  <script>
    const fruits = ['apple', 'banana', 'orange'];
    const [a, b, c] = fruits;

    console.log(a, b, c);
  </script>

</body>

a,b,cに配列fruitsの中身、apple,banana,orangeを一括で代入しています。
コンソールで表示a,b,cを表示してみると同じ結果が出力されます。

配列を分割代入してみる

①構造化したデータ
以下のようにparkというオブジェクトを用意します。

<body>
  <script>

  const park = {
      name: 'flower park',
      location: '東京都新宿区高田馬場３丁目',
      trees: ['ヒノキ', '竹', '松', '杉', 'イチョウ'],
      flowers: ['薔薇', '桜', '朝顔', 'ひまわり'],
      facilities: ['すべり台', 'ブランコ', 'トイレ', '噴水'],
    }
  </script>

</body>

②配列を分割代入してみる
treesという配列の中からヒノキとイチョウを分割代入してみました。

const [first, , , , second] = park.trees;
console.log(first, second);

ヒノキとイチョウが取れてます。このように代入される側に", ,"で空欄にすることによって、代入する配列の要素をスキップできます。treesの中のイチョウはヒノキから4番目なのでカンマ区切りの空欄を３つにしました。

③配列から取った値をswitchしてみる
分割代入せず配列から取った値をそれぞれswitchして代入し直してみます。

let [first, , , , second] = park.trees;
console.log(first, second)

const temp = first;    //tempというtemporary変数にfirstを代入する
first = second;
second = temp;
console.log(first, second);

このようにtemporary変数tempにfirstの値を代入する必要があります。
今度は分割代入で同じことを試してみました。

let [first, , , , second] = park.trees;
console.log(first, second)

const [first1, second1] = [second, first];
console.log(first1, second1);

結果は同じですが、temporary変数を使わずにそれぞれの位置を変えるだけで簡単に実装できました。

④関数を利用して配列の要素を取り出してみる
parkオブジェクトにselectPropertyという関数を追記します。この関数は配列のtreesとflowersから指定したindex（番号）の中身を返します。

   const park = {
      //'中略'
      selectProperty: function (treesIndex, flowersIndex) {         //追記
        return [this.trees[treesIndex], this.flowers[flowersIndex]]
      }
    }

この関数を戻り値（配列）を分割代入してみました。

const [selectedTree, selectedFlower] = park.selectProperty(0, 1);
console.log(selectedTree, selectedFlower);

treesの0番目の値、ヒノキとflowersの1番目の値、桜がそれぞれの変数selectedTree、selectedFlowerに格納されていることがわかります。

⑤ネストした配列を分割代入
配列の中に配列があってその中身を変数として取りたい場合にも分割代入を使えば簡単です。

    const park = {
      //'中略'
      selectProperty: function (treesIndex, flowersIndex) {
        return [this.trees[treesIndex], this.flowers[flowersIndex]]
      },
      people: ['安田', '上村', ['鈴木', '福岡']],   //追記
    }

peopleという配列にネストした配列['鈴木', '福岡']があったとします。この場合、'安田'と'鈴木'だけを取り出したい場合を考えます。

const [selectedName1, , [selectedName2, ,]] = park.people;
console.log(selectedName1, selectedName2);

parkプロパティと同じ構造の書き方を代入する側に書くだけです。安田の次の上村は','で空欄にすればスキップできます。

⑥分割代入のデフォルト値を指定する
分割代入する対象の配列の値が分からず、取れた値が存在しない場合にデフォルト値を分割代入することもできます。treesのには５つの要素がありますが、要素の数が何個あるのか分からなかった場合を想定します。６個分の分割代入をしてデフォルト値を設定します。

const park = {
      name: 'flower park',
      location: '東京都新宿区高田馬場３丁目',
      trees: ['ヒノキ', '竹', '松', '杉', 'イチョウ'],
　　　 //中略

const [item1 = '雑木', item2 = '雑木', item3 = '雑木', item4 = '雑木', item5 = '雑木', item6 = '雑木'] = park.trees;
console.log(item1, item2, item3, item4, item5, item6);
}

配列の値がない6番目はデフォルト値として'雑木'が表示されました。
この方法はAPIからデータを取り出す際に使える方法です。

参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://www.yoheim.net/blog.php?q=20160805