JavaScriptの残余引数（Rest Parameters、可変引数）

概念と使用方法

残余引数（Rest Parameters、または「可変引数」とも呼ばれます）は、関数定義で使用され、関数の引数の数が固定されていない場合に可変的に引数を受け取ることができるパラメーターの一種です。

関数を呼び出す際に、引数の数を固定せず、必要なだけ渡したい場合に便利です。

動作原理

関数を定義する際、最後の引数の前にドット3つ（...）を付けて宣言します。
この引数が「残余引数」です。
関数を呼び出す際、この位置に1つまたは複数の引数をコンマ（,）で区切って、任意の数だけ渡すことができます。
渡された引数は、関数内で配列としてまとめて処理されます。

適用

残余引数は、次のような関数定義の方法すべてで使用できます。

関数宣言式
関数式
アロー関数式

JavaScript - 関数宣言式

function fn(...rest) {
    console.log(rest); // 配列として渡されたrest
}

fn(1, 2, 3); // 出力: [1, 2, 3]
fn(1, 2, 3, 4); // 出力: [1, 2, 3, 4]
fn(1, 2, 3, 4, 5); // 出力: [1, 2, 3, 4, 5]

JavaScript - 関数式

const expressionFn = function (...rest) {
    console.log(rest); // 配列として渡されたrest
}

expressionFn(1, 2, 3); // 出力: [1, 2, 3]
expressionFn(1, 2, 3, 4); // 出力: [1, 2, 3, 4]
expressionFn(1, 2, 3, 4, 5); // 出力: [1, 2, 3, 4, 5]

JavaScript - アロー関数式

const arrowFn = (...rest) => {
    console.log(rest); // 配列として渡されたrest
}

arrowFn(1, 2, 3); // 出力: [1, 2, 3]
arrowFn(1, 2, 3, 4); // 出力: [1, 2, 3, 4]
arrowFn(1, 2, 3, 4, 5); // 出力: [1, 2, 3, 4, 5]

構文

JavaScript

/* 固定引数がある場合 */
function functionName(param1, [param2,] ...restParams) {
    // 関数本文でrestParamsを配列として使用できます。
}

/* 固定引数がない場合 */
function functionName(...restParams) {
    // 関数本文でrestParamsを配列として使用できます。
}

param1, param2：関数のパラメーターであり、関数に必要な固定引数を示します。必須ではなく、必要に応じて省略したり、複数宣言することもできます。
...restParams：残余引数で、固定引数の後に渡される追加の引数を1つの配列としてまとめます。必ずパラメーターリストの最後にのみ配置できます。

特徴

JavaScriptの関数定義で使用されるパラメーターの種類の1つです。
残余引数は、必ずパラメーターリストの最後に配置する必要があります。
残余引数は、可変の数の引数を関数内で配列として受け取り処理することができます。
（配列を処理するmap()、filter()、forEach()などの配列メソッドを直接使用できます。）
「残余（rest）」という名前は、関数に渡された固定ではない「残りの追加された引数」という意味に由来しており、数が変動するため「可変引数」とも呼ばれます。

例

JavaScript

function myFun(a, b, ...manyMoreArgs) {
    console.log("a:", a);
    console.log("b:", b);
    console.log("残余引数 manyMoreArgs:", manyMoreArgs);
}

myFun("apple", "banana", "cherry", "date", "elderberry", "fig");

// 出力:
// "a: apple"
// "b: banana"
// "残余引数 manyMoreArgs:" [ 'cherry', 'date', 'elderberry', 'fig' ]

上記の例は、JavaScriptで残余引数を使用する例です。残余引数は、関数に渡された引数のうち、明示的に宣言されたパラメーターの後にあるすべての引数を配列としてまとめます。

ここでの関数myFunは、3つの引数a、b、...manyMoreArgsを受け取ります。aとbはそれぞれ最初と2番目の引数を表します。そして...manyMoreArgsは、残りのすべての引数をmanyMoreArgsという配列に格納します。

したがって、myFun("apple", "banana", "cherry", "date", "elderberry", "fig")を呼び出すと、"a: apple"、"b: banana"がそれぞれ出力され、残りの引数は残余引数であるmanyMoreArgs配列に格納されて出力されます。

注意点

関数定義には、残余引数が1つだけ存在する必要があります。
残余引数は、関数を定義する際に、パラメーターの数が1つであろうと複数であろうと、いかなる場合でも必ずパラメーターリストの最後に配置する必要があります。

JavaScript 残余引数は、関数を定義する際に、パラメーターの数が1つであろうと複数であろうと、いかなる場合でも必ずパラメーターリストの最後に配置する必要があります。

function wrong2(...wrong, arg2, arg3) {} // エラー

残余引数は、関数のlengthプロパティには含まれません。

JavaScript 残余引数は、関数のlengthプロパティには含まれません。

function exampleFunction(a, b, ...restParams) {
    // 関数本文
}

console.log(exampleFunction.length); // 出力: 2

可変引数関数を表現する際に使用

可変引数関数（Variable-arity Function）とは、関数がさまざまな数の引数を受け取って処理できる関数を指します。このような関数は、呼び出される際に渡される引数の数が固定されておらず、必要なだけの引数を受け取って処理することができます。

残余引数は、JavaScriptで可変引数関数を表現する強力なツールです。これにより、関数はさまざまな数の引数を処理して操作でき、JavaScriptのconsole.log()関数のように可変引数関数として使用されます。

JavaScriptの`console.log()`関数

残余引数を活用した可変引数関数の例

JavaScript

function sum(...numbers) {
    let total = 0;
    
    for (let number of numbers) {
        total += number;
    }
    
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 出力: 15

コード補足説明
for...of文は、値（value）として反復処理できるオブジェクトのための繰り返し文です。渡された引数は関数内で配列としてまとめて処理されますが、この配列は値（value）として反復処理できるオブジェクトです。