【JavaScript】残余引数 - 引数の個数を可変にする

JavaScriptの残余引数について解説します。

検証環境

JavaScript -

macOS

14.1

残余引数

残余引数は“関数の引数を配列として受け取る仕組み”です。

通常、関数は引数の数だけ値を受け取ることができますが、残余引数を使うことで呼び出しごとに引数の数を変えることができます。

また、他のプログラミング言語では可変長引数とも呼ばれます。

残余引数と仮引数

残余引数は仮引数と同様に『関数の定義』で定義します。

基本構文

function 関数名( ...残余引数名 ) {
    // 処理...
    return 値;
}

残余引数はドット（.）を３つ繋げ、続いて変数名を記述します。

通常の仮引数も使う場合は最後に記述する必要があります。

function 関数名( 仮引数１, 仮引数２, ...残余引数名 ) {
    // 処理...
    return 値;
}

サンプル

残余引数のみ

sample.js

___ih_hl_start
function total( ...numbers ) {
___ih_hl_end
    let result = 0;
    for( let n of numbers ) {
        result += n;
    }
    return result;
}

Console

１行目の...numbersが残余引数です。

仮引数と残余引数

sample.js

___ih_hl_start
function calc( type, ...numbers ) {
___ih_hl_end
    
    let result = 0;
    
    if( type == "*" ) {
        result = 1;
        for( let n of numbers ) {
            result *= n;
        }
    } else if( type == "+" ) {
        for( let n of numbers ) {
            result += n;
        }
    }
    
    return result;
}

Console

１行目の...numbersが残余引数です。

通常の仮引数typeの後（一番最後）に定義することに注意してください。

残余引数と実引数

残余引数のある関数の呼び出しは通常の関数に同様です。

異なる点は関数の仮引数の数を越える実引数を配列として受け取るということです。

サンプル

残余引数のみ

sample.js

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

___ih_hl_start
let result1 = total(1, 2, 3);
___ih_hl_end
console.log(result1);

___ih_hl_start
let result2 = total(1, 2, 3, 4, 5, 6, 7, 8);
___ih_hl_end
console.log(result2);

Console

6
36

９行目のtotal関数の呼び出しでは３個の実引数を与えています。

変数numberは残余引数のため、それら値を１つの配列にまとめて受け取ります。

１２行目の呼び出しでは実引数の数がより多くなっていますが、同様に処理されるため、正常に実行することが可能です。

実行結果からも実引数の個数に関わらず、関数を実行できたことが確認できます。

仮引数と残余引数

sample.js

___ih_hl_start
function calc( type, ...numbers ) {
___ih_hl_end
    
    let result = 0;
    
    if( type == "*" ) {
        result = 1;
        for( let n of numbers ) {
            result *= n;
        }
    } else if( type == "+" ) {
        for( let n of numbers ) {
            result += n;
        }
    }
    
    return result;
}

___ih_hl_start
let result1 = calc("*", 1, 2, 3, 4);
___ih_hl_end
console.log(result1);

___ih_hl_start
let result2 = calc("+", 1, 2, 3, 4, 5, 6, 7, 8);
___ih_hl_end
console.log(result2);

Console

24
36

１９行目のcalc関数の呼び出しでは５個の実引数を与えています。

実引数は仮引数に先頭から順番に記憶されますが、残余引数がある場合、仮引数の数を越える実引数は１つの配列にまとめられます。

そのため、第１実引数の"*"は仮引数typeに記憶され、以降の実引数は配列として残余引数numbersに記憶されます。

２２行目の呼び出しも同様に処理され、実行結果からも第１仮引数typeには第１実引数の値が渡されていることが確認できます。