分割代入とスプレッド/レスト ― 取り出す・広げる

導入

オブジェクトや配列から値をまとめて取り出すのが分割代入、中身をばらまくのがスプレッド（...）です。モダンJSで最も頻繁に使う記法のひとつです。

説明

分割代入は、オブジェクトや配列から必要な値を一気に取り出します。

const user = { name: "太郎", age: 20, city: "東京" };
const { name, age } = user;   // 必要なプロパティだけ取り出す
console.log(name, age);       // 太郎 20

const nums = [10, 20, 30];
const [first, second] = nums; // 先頭から順に
console.log(first, second);   // 10 20

スプレッド ... は、配列やオブジェクトの中身を広げて新しいものを作ります。元を壊さずコピー・結合できます。

const a = [1, 2, 3];
const b = [...a, 4, 5];       // a を広げて後ろに足す
console.log(b.join(","));     // 1,2,3,4,5

const base = { theme: "light", size: 12 };
const custom = { ...base, size: 16 };  // size だけ上書き
console.log(custom.size);     // 16

関数の引数で受け取る側に ... を付けると、余った引数を配列にまとめます（レスト）。

function sum(...values) {
  return values.reduce((s, n) => s + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

デフォルト引数（第5章）やテンプレートリテラル（第2章）と組み合わせると、短く読みやすい関数になります。

function greet({ name, title = "さん" }) {
  return `${name}${title}、こんにちは`;
}
console.log(greet({ name: "花子" }));  // 花子さん、こんにちは

やってみよう

分割代入で取り出す変数を増やしたり、スプレッドで2つの配列を結合したり、... で受け取る sum に引数を増やして試しましょう。

演習

const point = { x: 3, y: 7 }; を分割代入で x と y に取り出し、x + y を表示してください。