Edited at

JavaScriptの関数の引数


はじめに

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'});


まとめ

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