学び直しのJS ~ スプレッド構文・分割代入編 ~

学び直しシリーズ第三弾！
今回はスプレッド構文と分割代入編です！

スプレッド構文

スプレッド構文は配列やオブジェクトの要素を分解してくれる構文です。
スプレッド構文を配列とオブジェクトに使って例を紹介します。

配列

const array1 = ["cat", "dog"];

// array1のコピー(参照ではない)
const array2 = [...array1];

// 要素を追加して新しい配列を生成
const array3 = [...array1, "mouse"];

// 配列を結合して新しい配列を生成
const array4 = [...array1, ...array2];

オブジェクト

const user = {
  name: "Mike",
  age: 18
};

// userのコピー(参照ではない)
const copyUser = { ...user };

// プロパティを追加した新しいオブジェクトの生成
const newUser = { ...user, hobby: "soccer" };

// オブジェクトを結合して新しいオブジェクトを生成
const mergeUser = {...user, ...{hobby: "soccer", comment: "Hello World"}}

分割代入

配列やオブジェクトの中から一部だけ取り出して使いたい時に分割代入を使用します。

配列

const array = ["cat", "dog", "mouse", "monkey"];

// aには"cat"、bには"dog"が代入されます
[a, b] = array;

// cには"cat"、dには"dog"、eには["mouse", "monkey"]が代入されます
[c, d, ...e] = array;

オブジェクト

const user = {
  name: "Mike",
  age: 18
};

// nameに"Mike"、ageに18が代入されます
const { name, age } = user;

// 分割代入する際、変数名とキー名にしたくない場合
// namaeに"Mike"、nennreiに18が代入されます
const { name: namae, age: nennrei } = user;

分割代入はパッケージからある機能だけ使いたい時によく用いられる構文なのでしっかり押さえておきましょう！