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

JavaScriptの残余引数をご紹介します。

残余引数

残余引数は関数の引数を配列として受け取る仕組みです。
他のプログラミング言語では可変長引数とも呼ばれます。

基本構文

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

残余引数はドット（.）を３つ繋げ、続いて変数名を記述します。
また、仮引数と合わせて使うことも可能です。

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

この場合、残余引数は最後に記述する必要があります。

なお、関数の呼び出しは通常通り同じです。

サンプル

残余引数のみ

Sample

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

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

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

Console

6
36

コンソール結果から引数の個数に関わらず、関数を実行できたことが分かります。

仮引数と残余引数

Sample

function calc( type, ...numbers ) {
    
    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;
}

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

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

Console

24
36

calc関数は複数値の計算を行ないます。
計算方法は第１引数によって乗算か加算を選択できます。

実行結果からcalc関数の呼び出しの第１引数は仮引数typeに渡され、計算したことが分かります。