可変長引数の扱い — (...args) => args
JavaScript では 可変長引数（いくつでも引数を受け取れる仕組み）を rest 引数 ...args で書けます。
初心者は「渡された引数を全部まとめて配列にする」と覚えると理解しやすいです。
基本のコード例
const f = (...args) => args;
console.log(f(1, 2, 3)); // → [1, 2, 3]
console.log(f("a", "b")); // → ["a", "b"]
console.log(f()); // → []
...args→ 引数を配列にまとめる。- 返り値は配列なので、
mapやreduceなどの配列メソッドが使える。
よく使うテンプレート集
合計を計算する関数
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // → 10
文字列を結合する関数
const joinStrings = (...strings) => strings.join(" ");
console.log(joinStrings("Hello", "World", "!")); // → "Hello World !"
最大値を求める関数
const max = (...nums) => Math.max(...nums);
console.log(max(5, 10, 3)); // → 10
例題: ログ関数
const logAll = (...messages) => {
messages.forEach(m => console.log("LOG:", m));
};
logAll("起動", "処理開始", "処理終了");
// LOG: 起動
// LOG: 処理開始
// LOG: 処理終了
- 効果: 引数をいくつでも渡せるログ関数。
実務でのコツ
- 引数の数が決まっていないときに便利。
- 配列として扱えるので柔軟。
- 他の関数に渡すときは spread 構文と組み合わせる。
const nums = [1, 2, 3]; console.log(sum(...nums)); // → 6
ありがちなハマりポイントと対策
argumentsとの違い:argumentsは配列風オブジェクト。...argsは本物の配列。mapやreduceが使える。
- 空呼び出し: 引数がないときは
[]が返る。必ず配列として扱う。
練習問題（平均値を求める）
const average = (...nums) => {
if (nums.length === 0) return 0;
const sum = nums.reduce((a, b) => a + b, 0);
return sum / nums.length;
};
console.log(average(10, 20, 30)); // → 20
console.log(average()); // → 0
直感的な指針
(...args)= 引数を配列にまとめる。- 返り値は配列なので配列メソッドが使える。
- spread と組み合わせると「まとめる → 広げる」が自在にできる。
- 初心者は「sum」「join」「max」「平均値」で練習すると理解が深まる。
これを覚えれば「引数の数が決まっていない関数」を柔軟に作れるようになります。