【JavaScript】関数の引数がundefinedの場合にデフォルト値を設定する方法

JavaScriptでは、関数に引数を渡す際、値がundefinedになるケースに遭遇することがあります。このような場合に備えてあらかじめデフォルト値を設定しておくことで、意図しない動作やエラーを防ぐことができます。

ここでは、以下のような2つの値を関数に渡すケースを想定します。

300
undefined

デフォルト値を設定するサンプルコード

それでは、引数がundefinedの場合にデフォルト値を代入するコードを見てみましょう。

function showValue(value)
{
   if (value===undefined) {
      value=100000;
   }
   else {
      value=value;
   }
   return value;
} 
console.log("The value="+showValue(300));
console.log("The value="+showValue(undefined));

コードの解説

このコードのポイントは、厳密等価演算子（===）を使って引数がundefinedかどうかを判定している点です。

• 引数が300の場合： valueはundefinedではないため、elseブロックが実行され、そのまま300が返されます。
• 引数がundefinedの場合： 条件式が真となり、ifブロック内でデフォルト値である100000が代入されます。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo246.js」として保存しています。

実行結果

コンソールには以下の出力が表示されます。

PS C:\Users\Amit\javascript-code> node demo246.js
The value=300
The value=100000

1つ目の呼び出しでは引数として300が渡されているため「300」が出力され、2つ目の呼び出しではundefinedが渡されたため、デフォルト値の「100000」が出力されていることが確認できます。

補足：ES6のデフォルトパラメータを使うとさらに簡潔

なお、ES6（ECMAScript 2015）以降では、デフォルトパラメータ構文を使うことで、同じ処理をより簡潔に書くことができます。

function showValue(value = 100000) {
   return value;
}
console.log(showValue(300));      // 300
console.log(showValue(undefined)); // 100000

仮引数に初期値を直接指定するだけで、undefinedが渡された場合に自動的にデフォルト値が適用されます。モダンなJavaScript開発では、こちらの書き方が一般的に推奨されています。