デフォルト引数(引数の初期値)

このレッスンでは、JavaScriptのデフォルト引数の書き方を学び、引数が省略されたときの初期値を設定できるようになることを目標にします。「JavaScript デフォルト引数 使い方」「JavaScript 引数 初期値」で調べている方向けです。

関数の引数に= 値を書いておくと、呼び出し側がその引数を省略したときに自動で使われる「初期値」を設定できます。「注文書に何も書かなければ、いつもの定番セットになる」ようなイメージです。省略された場合の値を関数内で毎回チェックして設定するコードを書かずに済むため、シンプルで読みやすい関数定義ができます。

サンプルコードでは、greet(name = "ゲスト")という関数を定義し、greet("たろう")のように引数を渡した場合はその値が、greet()のように引数を省略した場合は"ゲスト"という初期値が使われています。デフォルト引数がない場合、関数の中でif (name === undefined) { name = "ゲスト"; }のようなコードを毎回書く必要がありました。

初心者がよくつまずくのが、デフォルト引数は「引数が渡されなかった、またはundefinedが渡されたとき」にだけ適用される点です。nullを渡した場合はデフォルト値は使われず、nullのままになります。また複数の引数がある場合、デフォルト値を持つ引数は基本的に後ろに置くのが読みやすい書き方とされています。

実際の開発現場では、設定値の一部だけを変更できるようにしたい関数や、オプション機能を持つ関数を設計するときにデフォルト引数がよく使われます。呼び出し側のコードをシンプルに保てるため、使いやすいAPIを設計するうえで欠かせないテクニックの1つです。

アロー関数でもデフォルト引数は同じように書け、(name = "ゲスト") => { ... }のような形になります。関数の書き方が変わっても考え方は共通しているので、あわせて覚えておくと応用が利きます。