rest 引数と spread 構文 — function f(...args) {} / f(...arr)
JavaScript には rest 引数 と spread 構文 という似た書き方があります。
初心者は「rest はまとめる、spread は広げる」と覚えると理解しやすいです。
基本のコード例
rest 引数（まとめる）
function f(...args) {
console.log(args);
}
f(1, 2, 3); // → [1, 2, 3]
...args→ 渡された引数を 配列にまとめる。
spread 構文（広げる）
const arr = [1, 2, 3];
f(...arr); // → [1, 2, 3]
...arr→ 配列を 個別の引数に広げる。
よく使うテンプレート集
可変長引数の関数（rest）
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // → 10
配列の結合（spread）
const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b];
console.log(c); // → [1, 2, 3, 4]
オブジェクトのコピー（spread）
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // → { x:1, y:2, z:3 }
配列のコピー（spread）
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // → [1, 2, 3]
例題: 最大値を求める関数
function max(...nums) {
return Math.max(...nums);
}
console.log(max(1, 5, 3)); // → 5
- rest:
...numsで引数を配列にまとめる。 - spread:
Math.max(...nums)で配列を個別の引数に展開する。
実務でのコツ
- rest 引数: 関数に「いくつでも引数を渡せる」ようにしたいときに使う。
- spread 構文: 配列やオブジェクトを「展開」してコピーや結合に使う。
- 配列コピー:
arr2 = [...arr1]は安全にコピーできる。 - オブジェクトコピー:
obj2 = {...obj1}は浅いコピーになる。
ありがちなハマりポイントと対策
- rest と arguments の違い:
argumentsは配列風オブジェクト。...argsは本物の配列。mapやreduceが使える。
- spread は浅いコピー:
- ネストしたオブジェクトはコピーされず参照が共有される。
練習問題（平均値を求める）
function average(...nums) {
const sum = nums.reduce((a, b) => a + b, 0);
return sum / nums.length;
}
console.log(average(10, 20, 30)); // → 20
直感的な指針
- rest = 引数をまとめる（配列化）。
- spread = 配列やオブジェクトを広げる。
- 両方を組み合わせると「まとめて → 広げる」ができる。
- 初心者は「sum関数」「配列コピー」「オブジェクト結合」で練習すると理解が深まる。
これを覚えれば「柔軟な関数定義」「配列やオブジェクトのコピー・結合」が自在にできるようになります。