分割代入とスプレッド ― 取り出しとコピー

導入

配列やオブジェクトから値を取り出すとき、分割代入を使うとすっきり書けます。**スプレッド構文（...）**は、中身を展開してコピーや結合に使います。

説明

配列の分割代入は、左辺に [ ] を書きます。

const point = [10, 20, 30];
const [x, y, z] = point;
console.log(x, y, z);  // 10 20 30

const [first, ...rest] = point;
console.log(first);    // 10
console.log(rest);     // [20, 30]

オブジェクトの分割代入は、左辺に { } を書きます。キー名と同じ変数名ができます。

const user = { name: "花子", age: 30, city: "大阪" };
const { name, age } = user;
console.log(name, age);  // 花子 30

スプレッドで配列・オブジェクトをコピー／結合できます（元を壊さないコピーが簡単になります）。

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged);  // [1, 2, 3, 4]

const base = { x: 1, y: 2 };
const extended = { ...base, z: 3, y: 99 }; // y は上書き
console.log(extended); // { x: 1, y: 99, z: 3 }

やってみよう

自分で作った配列・オブジェクトを分割代入やスプレッドで操作してみましょう。

演習

const nums = [100, 200, 300]; から分割代入で先頭を head、残りを tail に入れ、両方を表示してください。