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

JavaScript関数で無制限の引数を扱う方法｜argumentsオブジェクトの使い方

JavaScriptでは、関数に渡す引数の個数を事前に固定しなくても、arguments オブジェクトを使えば任意の数の引数を受け取ることができます。

argumentsオブジェクトとは？

arguments は、関数が呼び出されたときに自動的に利用できる特別なオブジェクトです。宣言された仮引数の数に関わらず、実際に渡されたすべての引数を配列のような形式（Array-like object）で保持します。

  • arguments.length：実際に渡された引数の個数を取得できます
  • 関数名.length：関数定義時に宣言された仮引数の個数を取得できます

この2つを比較することで、「想定していた引数の数」と「実際に渡された引数の数」の違いを確認できます。

サンプルコード

以下のコードを実行すると、関数にいくつでも引数を渡して処理できることが確認できます。

<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>

実行結果のポイント

この例では、関数には3つの仮引数（val1〜val3）しか宣言されていませんが、呼び出し時には6つの引数（数値3つ、文字列2つ、Dateオブジェクト1つ）を渡しています。実行すると次のように表示されます。

  • Expected Arguments: 3 … 宣言された仮引数の数
  • Current Arguments: 6 … 実際に渡された引数の数
  • その後、forループによって渡された全引数が順番に出力されます

モダンな書き方：レストパラメータ（...args）

ES6以降のJavaScriptでは、レストパラメータを使う方法が推奨されています。こちらは本物の配列として引数を受け取れるため、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 オブジェクトで可変長の引数を取得できる
  • モダンな方法：レストパラメータ（...args）を使うと配列として扱えて便利
  • アロー関数では arguments が使えないため、レストパラメータの利用が必須
  1. JavaScriptのパラメータ（仮引数）と引数（実引数）の違いをわかりやすく解説

    パラメータと引数とは？JavaScriptにおいて、パラメータ（仮引数）とは、関数を定義するときに関数名の後ろの括弧内に記述される変数名のことです。一方、引数（実引数）とは、関数を呼び出すときに実際に渡される値であり、関数側で受け取られるものです。イメージとしては、パラメータは値を受け取るための「受け皿」のような名前で、引数はその受け皿に渡される「実際の値」です。この2つの違いを正しく理解することは、関数を使いこなすうえで非常に重要です。サンプルコード以下は、JavaScriptにおけるパラメータと引数の動作を確認できるコード例です。ボタンをクリックすると、配列の要素が引数として関数に渡され、

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

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