spread 演算子と rest 演算子とは何ですか？

Question

IT Interview Practice · Accepted Answer

どちらも `...` を使いますが、**逆方向** に働きます。spread はコレクションを個々の要素に**展開**し、rest は要素を1つの配列／オブジェクトに**集約**します。

## Spread — 展開

```js
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];          // [1, 2, 3, 4]
const copy = [...a];                   // shallow copy
const obj = { ...user, active: true }; // copy object + override/add a field
Math.max(...[1, 5, 3]);                // 5 — spread array into arguments
```

## Rest — 集約

```js
function sum(...nums) {     // gather all args into an array
  return nums.reduce((a, n) => a + n, 0);
}
sum(1, 2, 3);               // 6

const [first, ...others] = [10, 20, 30]; // first=10, others=[20, 30]
const { id, ...rest } = user;            // pull out id, keep the rest
```

## 重要な注意点：spread は SHALLOW なコピー

```js
const original = { user: { name: "Ann" } };
const copy = { ...original };
copy.user.name = "Bob"; // ⚠️ also changes original.user.name — nested object is SHARED
```

Spread はトップレベルだけをコピーし、ネストしたオブジェクトは依然として共有された参照のままです。状態の更新では通常トップレベルだけを変更するので問題ありませんが、深い構造では注意が必要です。

## なぜ重要なのか

Spread は React/Redux で **イミュータブルな更新**（コピー＋変更）を行う標準的な方法であり、rest は可変長引数の関数や「残りを取り出す」分割代入をきれいに書けるようにします。

Spread — 展開

関連する質問

Rest — 集約

重要な注意点：spread は SHALLOW なコピー

なぜ重要なのか