Javascriptの配列とオブジェクトの分割代入とは

こんにちは！
プログラミング初心者のstraw_engineです。
何も知らないことだらけでとりあえず内定先の方からおすすめしていただいたJavaScript本格入門という本のアウトプットをしようかと思います。

分割代入とは？

分割代入（配列）

分割代入についてここでは記述します。
分割代入とは配列、もしくはオブジェクトを分解して配下の要素/プロパティを個々の変数に分解するための構文です。
ES2015以前であれば配列から値を取り出すために、一つ一つの要素にアクセスする必要があったそうです。
下記みたいな感じです。

var data = [1,2,3,4,5,6];
var x0 = data[0];
var x1 = data[1];
//要素の数だけ書く必要があった。

しかし、ES2015以降はとても便利になって、分割代入によってこのめんどくさい作業が一行で済むようになりました。

let data = [1,2,3,4,5,6];
let [x0,x1,...others] = data;
console.log(x0); //結果：1
console.log(x1); //結果：2
console.log(others); //結果：[3,4,5,6]

分割代入の際には代入先の変数も[　]で囲む必要があります。
また、「...」演算子を使用することで、変数に分解されなかった要素を配列で列挙することが可能です。

分割代入（オブジェクト）

次にオブジェクトの分割代入について記述します。
Javascriptでは配列と同様にオブジェクトも分割代入を利用できます。
下記のように使用します。

let book = { title: 'JavaScript入門書', publish:' straw_engine出版社', price: 2500 };
let { price, title, memo = 'なし' } = book;

console.log(title); //結果：JavaScript入門書
console.log(price); //結果：2500
console.log(memo); //結果：なし

ポイントなのがオブジェクトの場合には名前で一つ一つの変数に分解するということです。
上記の結果でわかるように順番ではなく、名前で分解されており、対応する変数がないpublishはスキップされています。
また、「変数名=デフォルト値」でデフォルト値を設定しておくこともできます。
memoのデフォルト値を「なし」に設定しているので「なし」という結果が返ってきています。

・入れ子構造になったオブジェクトの分解

ただ、オブジェクトは入れ子構造になっていることもあります。
そして、入れ子構造になっていても分割代入は利用できます。
入れ子構造になっているオブジェクトを分解するには入れ子の関係がわかるように代入先の変数も{...}で囲みます。

let book = { title: 'JavaScript入門書', publish:' straw_engine出版社', price: 2500, other: { memo: 'あいうえお', publisher: 'straw_engine' } };
let { title, other, other: { memo } } = book;

console.log(title);//結果：JavaScript入門書
console.log(other);//結果：{memo: "あいうえお", publisher: "straw_engine"}
console.log(memo);//結果：あいうえお

otherだけ記述した場合には、otherプロパティの中身が代入されますが、入れ子構造を記述することでmemoプロパティを代入しています。

・異なる名前の変数に代入する

先ほどオブジェクトの場合には対応する名前で変数に代入すると述べましたが、「変数名: 別名」でプロパティとは異なる名前の変数に値を割り当てることもできます。

let book = { title: 'JavaScript入門書', publish:' straw_engine出版社', price: 2500};
let { title: name, publish: company} = book;

console.log(name); //結果：JacaScript入門書
console.log(company); //結果：straw_engine出版社

上記ではtitleとpublishのプロパティを変数nameとcompanyにそれぞれ名前を変えて代入しています。
また、上記では変数の宣言と代入を1文でしていますが、宣言と代入を切り離すことも可能です。

let price, title, memo; //変数の宣言
({ price, title, memo = 'なし' }); //変数の代入

まとめ

今回はJavaScript本格入門のアウトプットをしました。
しばらく、この本に沿ってアウトプットをするかと思います。
この本にはもっと詳細にJavaScriptの仕様等について書かれています。
気になった方はぜひ買って確認してみてください。