【JavaScript】関数呼び出しの際に引数が足りない！？

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Pythonの解説シリーズです。

今回は関数呼び出しの際に引数が足りない場合の処理について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

引数が足りない状況とは？

引数が足りていない、といってもピンと来ないかと思いますが
以下のようなケースのことを指します。

// 引数1と引数2の和を出力する関数
const add = (number1, number2) => {
  console.log(number1 + number2);
};

// 引数が1つしか無い
add(5);

引数が1つしか無いからエラーになるのではないか
とお思いの方も多いと思いますが、
実はJavaScriptの場合はエラーにならないんです。

では実際に実行してみましょう。

【出力結果】
NaN

このようにエラーは発生せず
NaNつまり、”Not a Number”が出力されます。

足りない引数はどうなったのか？

先程の例では、NaNが出力されましたが
そもそも足りない引数はどうなったのでしょう？

実際に実行してnumber1とnumber2の値を確認してみましょう。

const add = (number1, number2) => {
  console.log(number1);
  // → 5
  console.log(number2);
  // → undefined
};

add(5);

このようにnumber2にはundefinedが入っていることがわかりました。

ここがJavaScriptのややこしいところなのですが、
JavaScriptはエラーの判定が多言語と比較すると非常に甘いです。

ですので、引数が足りない場合にはundefinedを自動的に代入して処理を進めます。

引数に初期値を設定しよう！

ここでは引数が渡されなかった場合の初期値を設定します。

// number2の初期値を10にする
const add = (number1, number2 = 10) => {
  console.log(number1 + number2);
};

add(5);
// → 15
add(5, 7);
// → 12

このように記述することで、number2値が渡されなかった場合には
初期値として設定された10が代入されることになります。

もちろん引数が渡された場合にはそちらが優先して使用されます。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram