関数をマスターする (3/5)

引数のもう１つの拡張は「可変引数」の採用です。可変引数とは、文字通り、「引数の数が可変である」というものです。つまり、引数が１つでも２つでも３つでも……いくつでもOK、というのが可変引数です。

これは、以下のような形で記述をします。

function 関数 (...変数 : タイプ[]) {
    if ( 変数 ){
        変数の配列を処理する……
    }
}

可変引数では、変数名の前に「...」という記号を付けます。また、タイプの指定は、必ず配列にしておきます。こうすることで、引数として指定された値が配列の形にまとめられて渡されるようになります。後は、配列内の全要素を繰り返しなどで処理していくだけです。

ただし、可変引数は「引数ゼロ」という場合もあります。この場合、引数の配列は存在しないわけですから、ifで引数の変数が存在するかをチェックした上で処理する必要があります。

「だったら、最初から配列の引数を用意すればいいんじゃ？」と思う人もいるかもしれません。が、実際に試してみるとわかりますが、配列引数と可変引数では、使いやすさの点で雲泥の違いがあります。

では、下に利用例を挙げておきましょう。これは、引数に渡された値をすべて合計した結果を返す関数calcを利用したサンプルです。ここでは、calc(123, 456)と、calc(12, 34, 56, 78, 90)という２つの呼び出し方をしています。引数の数が違いますが、ちゃんと全引数を合計していることがわかるでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function calc(...arr:number[]):number {
    let res:number = 0;
    if (arr){
        for (let i = 0;i < arr.length;i++){
            res += arr[i];
        }
    }
    return Math.floor(res);
}

let num1:number = calc(123, 456);
document.write(num1.toString());

document.write('<br>');

let num2:number = calc(12, 34, 56, 78, 90);
document.write(num2.toString());