JavaScriptの関数のデフォルト引数の使い方を解説！

ES2015以前は関数内で引数が渡されなかった時には、引数の値がundefinedになることを利用し、if文などの条件分岐により初期値を設定していました。

ES2015(ES6)からJavaScriptの関数のデフォルト引数がサポートされ、上記のような冗長なコードを書く必要なく初期値を設定することが可能になりました。

下記のような構文でデフォルト引数を使うことができます。

method関数の引数argumentに初期値'default'を設定しています。これでmethod関数に引数が渡さずに実行した場合でも、エラーや意図しなかった結果にならずに'Hello default'という文字列が戻り値として返ってきます。

ここではわかりやすくサンプルコードを使って、JavaScriptの関数のデフォルト引数の使い方を見ていきましょう。

まずはデフォルト引数を指定せずに関数を定義した上で、関数実行時に引数を省略してみます。

引数を省略した状態でsum関数を実行すると、NaNが戻り値として返ってきていることが確認できます。

NaN(Not-A-Number)とは非数(数字ではないこと)を表すNumber型の特別な値です。

sum関数の戻り値は数字であることを期待しているのに、実際、引数を省略した場合は非数のNaNが返ってきてしまいます。

引数を省略した場合にもこうした「想定しなかった値が返ってくる」自体を避けるため、デフォルト引数を設定していきたいと思います。

今回はデフォルト引数としてa=1とb=2を設定しているため、同じように引数を省略した状態でsum関数を実行しましたが3という数字が返ってきていることが確認できます。

また、引数を省略せずに指定した場合はしっかり引数の値が反映された結果が返ってきます。

aに3とbに7の引数を指定してsum関数を実行すると、デフォルト引数ではなく指定した引数が反映され10という数字が戻り値として返ってきていることが確認できました。

デフォルト引数は第一引数は指定せず、第二引数のみ指定するなどの使い方もできます。

今回、第一引数aにはデフォルト引数を指定せずに第二引数bにのみデフォルト引数を指定しました。

sum関数を実行する際に指定した引数3はaに渡されて、bにはデフォルト引数2が適用されて5という結果が反映されています。

これは関数を実行する際に指定した引数は左から順番にセットされるという性質があるために上手く動作しています。

もし、sum関数の第一引数aにデフォルト引数を指定し、第二引数bにはデフォルト引数を指定せず、sum関数に１つだけ引数を渡して実行した場合には第二引数には何も数値が指定されず(実際にはundeuinedという値になる)、NaNという値が戻り値として返ってくることになるので注意しましょう。

関数を作成する際には、ぜひデフォルト引数を活用して自分が想定した動きになるよう実装できるようになりましょう。