【JavaScript入門】デフォルト引数

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

デフォルト引数

　JavaScript の関数では、引数が渡されなかったり undefined が渡された場合に、あらかじめ設定しておいたデフォルトの値を使うことができます。これを「デフォルト引数（デフォルトパラメータ）」と呼びます。わざわざ条件分岐で「もし引数が undefined だったら◯◯する」というコードを書かなくても、簡単に初期値を与える仕組みが備わっています。

１．デフォルト引数の基本

　関数定義のパラメータに「= デフォルト値」と書くだけで設定できます。もし該当の引数が省略されたり undefined だったりすると、そのパラメータにはデフォルト値が代入されます。

1.1. デフォルト引数の書き方

function 関数名(引数1 = 初期値1, 引数2 = 初期値2) {
  // 処理
  return 戻り値;
}

引数が与えられない、または undefined になる場合にデフォルト値が適用。
null は undefined と違って「明示的に無い値」となるため、デフォルト値は使われず、null がそのまま設定されます。

２．サンプルコード

【myDefaultArguments.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myDefaultArguments.html</title>
</head>
<body>
  <h1>デフォルト引数のサンプル</h1>
  <p>ブラウザの開発者ツールを開き、コンソール出力をチェックしてください。</p>

  <script>
    // メニューを文字列にまとめる関数
    function createMenuItem(name = '不明', price = 0) {
      return `${name}：${price}円`;
    }

    // 引数2つ
    console.log('例1:', createMenuItem('カフェラテ', 380));

    // 第2引数に undefined を渡した場合 → デフォルト値が適用
    console.log('例2:', createMenuItem('モンブラン', undefined));

    // 引数0個 → すべての引数がデフォルト値
    console.log('例3:', createMenuItem());

    // null を渡した場合 → undefined とは違いデフォルト値は使われない
    console.log('例4:', createMenuItem(null, null));
  </script>
</body>
</html>

実行結果

デバックコンソールの出力

例1: カフェラテ：380円
例2: モンブラン：0円
例3: 不明：0円
例4: null：null円

例1： 2つの引数がしっかり渡されているのでそのまま反映。
例2：第2引数に undefined が渡されているため、デフォルト値 0 が適用。
例3：引数自体を渡していないので、2つともデフォルト値が適用される。
例4： null は undefined ではないため、デフォルト値は使われずに null がそのまま代入される。

まとめ

JavaScript の関数では、引数を (param = defaultValue) のように書くと、引数が省略または undefined のときに defaultValue が使われる。
null は undefined と異なる扱いなので、デフォルト値は適用されずそのまま null が代入される点に注意。
デフォルト引数のおかげで「もし値が来なかったらどうするか？」という条件分岐を書く手間を省けるので、コードがシンプルになる。

　このようにデフォルト引数を使えば、よくある「引数が来ないときの初期化ロジック」を簡潔に表現できるので、関数設計が楽になります。