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

【JavaScript入門】引数を渡さない場合と多く渡した場合

引数を渡さない場合と多く渡した場合

　JavaScript の関数は、定義された引数の数と実際に呼び出すときの引数の数が一致しなくてもエラーになりません。引数をまったく渡さなかった場合や、指定よりも多くの引数を渡した場合、それぞれどのように動作するのかを理解しておくと、予期しない挙動を防ぐことができます。本稿では、引数が足りないケースと多すぎるケースについて見ていきましょう。

２．引数を渡さない場合

1.1. 引数なしで関数を呼び出す

　関数の定義でパラメータを期待していても、実際に呼び出すときに引数を渡さなければ、そのパラメータは undefined となります。これはエラーではありません。もし引数を使って何かをしたい場合は、パラメータが undefined でないかどうかを確認してから処理を行う必要があります。

1.2. 引数を省略する際の挙動

　引数が undefined になると、文字列操作や数値演算といった処理の中で予期せぬ結果が出る場合もあるため、事前にデフォルト値を用意したり、条件分岐を行うなどの対策が考えられます。

２．引数を多く渡した場合

2.1. 余った引数は無視される

　関数に定義されたパラメータ数より多く引数を渡した場合、JavaScript はエラーを起こさず、余った引数は無視されます。最初の数個の引数だけがパラメータとして割り当てられ、それ以降の引数は切り捨てられます。

2.2. arguments オブジェクト・残余引数

　レガシーな方法として、関数内で arguments オブジェクトを利用すれば、渡された全ての引数を取得できます。近代的な方法として、ES2015 以降に導入された「残余引数（rest parameters）」を使うと、受け取る引数の数が可変の場合にも柔軟に対応できます。

３．具体的なサンプル

【myFunctionArgCases.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myFunctionArgCases.html</title>
</head>
<body>
  <h1>引数を渡さない場合と多く渡した場合のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて、出力を確認してください。</p>

  <script>
    // 文字列をデコレートする関数
    function decorationMenu(food) {
      const res = `★☆${food}☆★`;
      return res;
    }

    // 引数なしで呼び出した場合 -> food は undefined
    console.log('引数なし:', decorationMenu());

    // 引数をちょうど1つ渡した場合
    console.log('引数1つ:', decorationMenu('アップルパイ'));

    // 引数を2つ渡した場合 -> 2つ目は無視される
    console.log('引数2つ:', decorationMenu('ホットチョコ', 'ダージリンティー'));

    // 余分な引数を取得したい場合 (レガシー: arguments)
    function showArguments() {
      for (let i = 0; i < arguments.length; i++) {
        console.log(`arguments[${i}]:`, arguments[i]);
      }
    }
    // 試しに複数の引数を渡す
    showArguments('オレンジ', 42, true);

    // 余分な引数を取得したい場合 (モダン: rest parameters)
    function showRestParameters(first, ...rest) {
      console.log('最初の引数:', first);
      console.log('残りの引数:', rest);
    }
    showRestParameters('抹茶ラテ', 'アイスコーヒー', 'ミルクティー');
  </script>
</body>
</html>

実行結果

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

引数なし: ★☆undefined☆★
引数1つ: ★☆アップルパイ☆★
引数2つ: ★☆ホットチョコ☆★
arguments[0]: オレンジ
arguments[1]: 42
arguments[2]: true
最初の引数: 抹茶ラテ
残りの引数: (2) ['アイスコーヒー', 'ミルクティー']

　上記の例で、最初の関数 decorationMenu() は引数として food を1つだけ受け取るように定義していますが、何も渡さない場合は food が undefined に、2つ以上渡した場合は最初の引数だけが使用され、残りは無視されます。

　showArguments() のように arguments を使うと、何個でも実際に渡された引数を全部取得できますが、近年の JavaScript では rest parameters (...rest) を使うのが推奨されています。

まとめ

  • 引数の数が足りなくても、多すぎても JavaScript はエラーを出さない。
  • 引数が足りないとき、対応するパラメータには undefined が入る。
  • 引数が多いとき、関数が定義したパラメータの数だけが受け取られ、それ以外は無視される。
  • 全ての引数を受け取りたい場合は、arguments オブジェクト（レガシー）や、rest parameters (…rest) を使うと良い。

　こうした特性により、JavaScript の関数呼び出しは他の言語より柔軟さが高い反面、想定外の引数が入るケースではバリデーションを行う必要があることも覚えておきましょう。