では、JavaScriptの restパラメータ を初心者向けにわかりやすく、例題も交えて丁寧に説明します。
1️⃣ restパラメータとは？
restパラメータは 関数の引数をまとめて1つの配列として受け取る方法 です。
書き方の基本
function myFunction(...args) {
console.log(args);
}
...argsが restパラメータ です。argsは配列として扱えます。- 引数がいくつ渡されても、まとめて配列に入ります。
2️⃣ 普通の引数とrestパラメータの違い
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5
console.log(sum(2, 3, 4)); // 5 ← 余分な4は無視される
- 通常の引数は、関数定義で決めた数しか受け取れません。
- 余分な引数は無視されます。
function sumAll(...numbers) {
console.log(numbers);
}
sumAll(2, 3, 4, 5);
// 出力: [2, 3, 4, 5]
numbersに渡されたすべての値が配列で入ります。- 引数の数を気にせずまとめて扱えるのが便利です。
3️⃣ 実際に合計を計算する例
function sumAll(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(5, 10, 15, 20)); // 50
...numbersは配列なので、for...ofやreduceが使えます。
function sumAll(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10
4️⃣ 他の引数と組み合わせる
restパラメータは 最後の引数 にしか使えません。
function introduce(name, ...hobbies) {
console.log("名前:", name);
console.log("趣味:", hobbies);
}
introduce("太郎", "サッカー", "読書", "ゲーム");
// 名前: 太郎
// 趣味: ["サッカー", "読書", "ゲーム"]
nameは普通の引数...hobbiesがそれ以降のすべての引数を配列で受け取ります。
まとめ
...をつけると restパラメータ になる- すべての余分な引数を 配列 として受け取れる
- 配列として扱えるので、
for...ofやreduceなどで便利に操作できる - 最後の引数にしか使えない
💡 補足: restパラメータと arguments オブジェクトの違い
| 特徴 | arguments | restパラメータ |
|---|---|---|
| 配列か | 配列風オブジェクト | 本当の配列 |
| ストリクトモード対応 | ちょっと特殊 | 普通に使える |
| 使い方 | 古い | 新しい・便利 |
