JavaScriptの可変長引数(rest parameters)の活用テクニック
生徒
「先生、JavaScriptで関数の引数をいくつでも受け取れるようにする方法はありますか?」
先生
「はい、あります。『可変長引数』という仕組みを使います。英語では rest parameters と言います。」
生徒
「具体的にはどうやって書くんですか?例えば、人数が違うときに合計点を計算したいんですが。」
先生
「それなら、rest parametersを使うと便利です。順を追って説明しますね!」
1. 可変長引数(rest parameters)とは?
可変長引数とは、関数に渡す引数の数が決まっていなくても、まとめて受け取れる仕組みです。
例えば、合計を計算する関数で、人数や点数が毎回違っても対応できます。
rest parametersは、関数の引数の前に「...」を付けて書きます。
2. rest parametersの基本的な書き方
rest parametersは次のように使います。引数名の前に「...」を付けるだけです。
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(10, 20)); // 30
console.log(sum(5, 15, 25, 35)); // 80
console.log(sum()); // 0
この例では、sum関数はいくつでも引数を受け取り、すべて足し合わせて返しています。
3. rest parametersと配列の関係
rest parametersは、受け取った引数を自動で配列にまとめてくれます。
配列(array)とは、複数のデータをまとめて扱うためのものです。つまり、numbersは配列として扱えます。
配列の中身を順に見るために、for文やfor...of文を使うのが一般的です。
4. rest parametersを使うメリット
- 引数の数を気にせず関数を作れる
- コードがシンプルで読みやすくなる
- 不特定多数の値を扱う処理が楽になる
例えば、ショッピングカートの合計金額を計算したり、複数のテスト点数の平均を求めたりするときに役立ちます。
5. 通常の引数とrest parametersを組み合わせる
rest parametersは、他の引数と一緒に使えます。ただしrest parametersは必ず最後に書かなければいけません。
function introduce(greeting, ...names) {
console.log(greeting);
for (let name of names) {
console.log(name + "さん");
}
}
introduce("こんにちは", "太郎", "花子", "次郎");
この例では、最初のgreetingは普通の引数で、それ以降の人の名前をrest parametersで受け取っています。
6. 使うときの注意点
rest parametersは関数の最後の引数である必要があり、複数使うことはできません。
また、rest parametersは配列なので、配列用のメソッド(例: map, filter, reduce)も使えます。
function multiplyAll(...nums) {
return nums.map(x => x * 2);
}
console.log(multiplyAll(1, 2, 3)); // [2, 4, 6]
7. rest parametersとargumentsオブジェクトの違い
JavaScriptには昔からargumentsという「関数に渡された全ての引数」をまとめた特別なオブジェクトがあります。
しかし、argumentsは配列ではなく似たもの(配列のようなオブジェクト)なので、使いにくい面があります。
rest parametersは配列として扱えるので、argumentsより便利でおすすめです。
// argumentsの例(配列ではない)
function oldSum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(oldSum(1, 2, 3)); // 6
8. 実用的な活用例:平均点を計算する関数
rest parametersを使って複数の点数を渡し、その平均を計算する関数を書いてみましょう。
function average(...scores) {
if (scores.length === 0) return 0;
let sum = scores.reduce((acc, val) => acc + val, 0);
return sum / scores.length;
}
console.log(average(80, 90, 100)); // 90
console.log(average(70, 85)); // 77.5
console.log(average()); // 0
これで点数の数が変わっても、簡単に平均を求められます。
9. rest parametersまとめの代わりのポイント
- rest parametersは「...」をつけて引数を配列として受け取る仕組み
- 引数の数が変わる関数を簡単に作れる
- 配列として扱えるのでfor文や配列メソッドが使いやすい
- 通常の引数と組み合わせて使えるが、最後に書くことが必須
argumentsオブジェクトより扱いやすくてモダンな方法
ぜひJavaScriptで関数を作るときにrest parametersを使って、コードをもっと便利にしましょう!