当たり前のように使っている"関数"
JavaScriptを学び始めて2ヶ月ですが、
あたらめて理解ができているのか？
アウトプットしながら整理したいと思います。
function fn(a,b,c){
console.log(a,b,c);
}
fn(0,1,2); //0 1 2
関数についてですが、結果については言わずもがなこのような結果になります。ここから少し深堀します。
###引数について
####・引数は順番を意識する
引数について考えてみます。
もし引数で c を表示したい場合にはどうすれば良いか？
a,bの入力を省略することができるかと言うと出来ません。
例1:
fn(2); // cに２を渡したい
// 結果: 2 undefind undefind
例2:
fn(2,3) // bに２をcに３を渡したい
// 結果： 2 3 undefind
という感じで a から順番に値を渡している形になります。
つまり、JavaScriptの場合には引数は順番が重要と言うことになります。
つまり、cに値を渡したい場合には、
a b c
fn(null, null, 1)
//結果： null null 1
と言うような形で渡すことでcに問題なく値を渡すことが可能です。
余談ですが、空の設定する際は"nulll"を使用したほうがベターです。
"undefind"は、JavaScript側で自動で設定するものだから..と言うことです。
####・引数は全部渡す必要はない
ここで一点気になることがあります。
fn(2); // cに２を渡したい
// 結果: 2 undefind undefind
引数が1つでも関数が実行されていることです。
そうなんです。JavaScriptは関数宣言で引数を２つ定義していても実行する際は引数が一つで実行することが可能になります。
細かく言うと
fn(1) = fn(1,undefind,undedfind)
と言うような形で実行されます。
ただ、計算処理などを入れている場合は,
function abc(a, b, c) {
console.log(a, b, c) //1 undefind undefind
const d = a * b + c;
console.log(d); // NaN: Not a Number 数値じゃないですよエラー
}
abc(1);
と言うような結果になりますのでご注意ください。
####引数の数で違う関数とはならない
コードを書く上で注意したいことの1つが、"重複"
function abc(a, b, c){
const d = a * b * c
console.log(d);
}
function abc(a, b){
const d=a / b ;
console.log(d);
}
avc(4, 2) // 2
このような場合には後から定義した関数abc(a, b)が実行されます。
言語によっては引数の数が違うことで違う関数に見られるケースもありますが、JavaScriptの場合は引数の数によって違う関数とは判断されません。
また、重複をエラーとして検出できるようにしたい場合は、
const abc = function(a, b, c){
const d = a * b * c
console.log(d);
}
このように定義することでエラーを拾ってくれます。
少し意識を変えるだけでバグを減らすこともできるので意識してみましょう。
####引数が複数ある場合
関数の引数が多い、または、数が変動的な場合には
関数コンテキストで用意されている"arguments"を利用することが出来ます。
function abc() {
console.log(arguments[0]) //1
console.log(arguments[1]) //2
console.log(arguments[2]) //3
console.log(arguments[3]) //4
}
abc(1,2,3,4);
のように関数に入力された実引数は"arguments"へ格納されます。
もしくは
function abc(...args) {
console.log(args) //[1, 2, 3, 4]
}
abc(1,2,3,4);
と"args"と言う実引数が格納された配列を関数の引数に ...args と入力することで実引数を渡すことが可能です。
###まとめ
今回は関数の引数についてまとめました。
引数の扱い方について理解することで、関数のバグを減らすことができるので、しっかり押さえておきたいところです。。。