はじめに

JacaScriptの関数の引数が自由すぎて、よくわからなくなったので
整理するために書きました。

普通に使う

関数が想定しているであろう値を渡す。

function add(a, b){
    return a + b;
}

console.log(add(3, 5));         // 8

普通に行けます。

型違い

型の指定がないので、こんなこともできてしまいます。

function add(a, b){
    return a + b;
}

console.log(add('3', 5));       // 35

3+5ではなく3という文字と5という数字を連結させてしまい、結果35が出力されます。

呼び出し側の引数が多い

引数を多く渡しても大丈夫です。

function add(a, b){
    return a + b;
}

console.log(add(3, 5, 7, 9));   // 8

ちなみに、引数は全てargumentsに保管されるため、a,bだけでは参照できなかった値も取得できます。

function args(a, b){
    console.log('a ' + a);  // 3
    console.log('b ' + b);  // 5

    for(let i = 0, len = arguments.length; i < len; i++){
        console.log('arguments ' + arguments[i]); // 3, 5, 7, 9
    }
}
args(3, 5, 7, 9);

引数が足りない場合

呼び出し側の引数が足りない状態でも関数を呼べます。

function add(a, b){
    console.log(b);             // undefined　　　　　　　　　　　　　　　　　　　　　　　　
    return a + b;
}

console.log(add(3));            // Nan

足りない引数は「undefined」となるようです。

また、引数にデフォルトの値を設定しておくと、足りない場合にはデフォルトの値を入れることもできます。

function add2(a=0, b=0){
    console.log(b);             // 0
    return a + b;
}

console.log(add2(3))             // 3

複数の値を可変長引数でまとめて受け取る

引数の前に「...」をつけると可変長の引数とすることが出来ます。

function sum(...nums){
    let ret = 0;
    nums.forEach(value => ret = ret + value);
    return ret;
}

argumentsと違い、Arrayオブジェクトとして扱えます。

名前つき引数を使用する

引数をオブジェクトリテラルで渡すことによって、受け渡し先が明確になります。
また、引数の順番も自由に変更できます。

function show({name = '設定されていません', age = 0}){
    console.log('名前　' + name);   // 名前　Lowell
    console.log('年齢　' + age);    // 年齢　34
}

show({age : 34, name : 'Lowell'});

まとめ

かなり自由度が高いため、気をつけてコーディングしないと思わぬバグを生み出しそうです。

JavaScriptの関数の引数