JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで可変数の引数を扱う方法：argumentsオブジェクトの使い方

JavaScriptで関数に渡される引数の数が事前に決まっていない場合に便利なのが、argumentsオブジェクトです。argumentsオブジェクトは、関数呼び出し時に実際に渡されたすべての引数を配列のような形式（Array-like object）で保持しており、arguments.length を使えば渡された引数の個数を取得できます。

サンプルコード

以下のコードでは、関数定義時に宣言された仮引数の数と、実際に渡された引数の数を比較しながら、各引数の値を順番に出力しています。

<html>
   <body>
      <script>
         function functionArgument(val1, val2, val3)  {
            var res = "";
            res += "Expected Arguments: " + functionArgument.length;
            res += "<br />";
            res += "Current Arguments : " + arguments.length;

            res += "<br />";
            res += "Each argument = "

            for (p = 0; p < arguments.length; p++) {
               res += "<br />";
               res += functionArgument.arguments[p];
               res += " ";
            }
            document.write(res);
         }
         functionArgument(20, 50, 80, "Demo Text!", "Hello World", new Date())
      </script>
   </body>
</html>

実行結果のポイント

  • functionArgument.length … 関数定義時に宣言された仮引数の数（この例では 3）
  • arguments.length … 呼び出し時に実際に渡された引数の数（この例では 6）
  • ループ処理によって、文字列・数値・Dateオブジェクトなど、型の異なる引数もすべて取得して表示できます。

このように、argumentsオブジェクトを活用すれば、仮引数の数にとらわれず、柔軟に引数を受け取る関数を実装できます。

補足：モダンな代替手段「レストパラメータ」

ES6（ES2015）以降では、レストパラメータ（...args）を使う方法が推奨されています。レストパラメータは本物の配列として引数を受け取れるため、map や filter などの配列メソッドをそのまま利用できる点が大きなメリットです。

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

また、argumentsオブジェクトはアロー関数内では使用できない点にも注意が必要です。新規にコードを書く場合は、レストパラメータを採用するのが安全かつ読みやすい選択といえるでしょう。

  1. JavaScriptのNumber()関数とは？使い方とサンプルコードを解説

    JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを

  2. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し