以下は、JavaScriptのレストパラメータ(Rest Parameters)についての技術記事です。備忘録として活用できるよう、基本的な使い方から応用までを解説します。
JavaScriptのレストパラメータについて
レストパラメータとは?
レストパラメータ(Rest Parameters)は、ES6(ECMAScript 2015)で導入された機能で、関数の引数として与えられる可変長の値を一つの配列として扱うことができます。スプレッド構文(Spread Operator)と同じく ...
を使いますが、レストパラメータは「残りのすべての引数」を意味し、主に関数の宣言で利用されます。
基本構文
レストパラメータは、関数の引数の最後に置かれ、可変数の引数をまとめて1つの配列として受け取ります。
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
上記の例では、sum
関数が任意の個数の数値を引数として受け取り、それらを配列として扱っています。numbers
はレストパラメータとしてすべての引数をまとめた配列です。
レストパラメータの制約
- 関数引数の最後にのみ使用可能
レストパラメータは引数の最後に配置する必要があります。途中に配置すると構文エラーになります。
// 正しい使い方
function example(first, ...rest) { /* ... */ }
// 間違った使い方
function example(...rest, last) { /* エラー */ }
- 1つの関数で1つだけ使用可能
レストパラメータは1つの関数につき1つだけ使うことができます。
// エラーになる例
function example(...first, ...second) { /* エラー */ }
レストパラメータと通常の引数の組み合わせ
レストパラメータを使いながら、通常の引数と組み合わせることも可能です。レストパラメータは最後に置かれるため、通常の引数はその前に宣言します。
function multiply(multiplier, ...numbers) {
return numbers.map(num => num * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]
この例では、multiplier
は通常の引数で、numbers
はレストパラメータとして残りの引数をすべて配列で受け取ります。
引数の数がわからない関数に便利
レストパラメータは、引数の数が事前にわからない関数や、可変長の引数を扱う際に便利です。
function greet(greeting, ...names) {
return `${greeting} ${names.join(', ')}!`;
}
console.log(greet('Hello', 'Alice', 'Bob', 'Charlie')); // "Hello Alice, Bob, Charlie!"
greet
関数では、最初の引数 greeting
が挨拶の言葉となり、残りの引数は names
という配列にまとめられています。このように、可変長の引数を簡単にまとめて処理できます。
配列の分割に使う
レストパラメータは、配列の分割にも活用できます。配列の一部だけを特定の変数に代入し、残りを配列としてまとめて取り出す場合に便利です。
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
この例では、first
と second
には配列の最初の2つの要素が割り当てられ、rest
には残りの要素が配列として割り当てられます。
レストパラメータとarguments
オブジェクトの違い
レストパラメータは、従来の arguments
オブジェクトと似た機能を持っていますが、重要な違いがあります。
arguments
は配列ではないarguments
オブジェクトは配列のように見えますが、厳密には配列ではありません。したがって、配列のメソッド(map
,filter
,reduce
など)は直接使えません。レストパラメータは配列なので、これらのメソッドをそのまま使えます。
function showArgs() {
console.log(arguments); // Arguments(3) [1, 2, 3]
console.log(Array.isArray(arguments)); // false
}
showArgs(1, 2, 3);
- レストパラメータは配列のメソッドを直接使用可能
レストパラメータを使うと、配列のメソッドを直接使用できます。
function showArgs(...args) {
console.log(args); // [1, 2, 3]
console.log(Array.isArray(args)); // true
}
showArgs(1, 2, 3);
- レストパラメータは使いやすくシンプル
レストパラメータは関数宣言の引数リストで指定するため、可変長引数を扱う際の意図が明確で、コードの可読性が向上します。
応用例:デフォルト引数と組み合わせる
レストパラメータとデフォルト引数を組み合わせることで、より柔軟な関数を作成することができます。
function logMessages(level = 'INFO', ...messages) {
console.log(`[${level}]`, ...messages);
}
logMessages('DEBUG', 'This is a debug message', 'with multiple parts');
// [DEBUG] This is a debug message with multiple parts
logMessages('This is a message without a level');
// [INFO] This is a message without a level
この例では、level
はデフォルトで 'INFO'
に設定され、レストパラメータ messages
には残りの引数がまとめられます。
まとめ
- レストパラメータの基本: レストパラメータ(
...
)は、関数の可変長引数をまとめるために使う構文。 - 引数の最後に配置: レストパラメータは、関数引数の最後に1つだけ配置する必要がある。
- 可変長引数の処理: 複数の引数を1つの配列にまとめ、配列のメソッドを直接使うことができる。
arguments
との違い: レストパラメータは配列であるため、arguments
よりも使いやすい。- 応用: デフォルト引数や配列の分割と組み合わせることで、柔軟で強力な関数を作成できる。
レストパラメータは、可変長の引数を簡潔かつ柔軟に扱えるため、関数の設計やコードの可読性向上に役立ちます。必要に応じて活用し、効率的なJavaScriptのコーディングを目指しましょう。