【JavaScript入門】arguments

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

arguments

　JavaScript の関数内では、実際に呼び出された引数をまとめて取得できる「arguments」という特別なオブジェクトを利用できます。これは配列のように各要素を取得でき、また length プロパティも持っています。ただし、arguments は配列ではなく配列風のオブジェクトである点に注意が必要です。また、ES6 以降では「残余引数（rest parameters）」が導入され、arguments の使用頻度は減っていますが、既存コードの理解や互換性などの面で知っておくと便利です。

1．`arguments` の基本

1.1．特徴

配列風オブジェクト: 各引数を arguments[0], arguments[1], ... のように参照できる。
length プロパティ: arguments.length で実際の引数の数を取得
配列メソッドは使えない: map や forEach といったメソッドは直接使えない（配列に変換する必要がある）。

1.2．使いどころ

過去のコードやライブラリなどで、多くの引数をまとめて処理するために arguments を使用している場合がある。
ES6 以降は ...restParameters の利用が推奨されるが、レガシーなコードを読む/メンテナンスする場合には arguments の仕組みを理解する必要がある。

２．サンプルコード

【myArgumentsExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArgumentsExample.html</title>
</head>
<body>
  <h1>arguments のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>

  <script>
    // 例: オーダーを処理する関数（引数の数が決まっていない）
    function processOrders() {
      console.log('実際の引数の数:', arguments.length);

      // 第1引数があれば表示
      console.log('arguments[0]:', arguments[0]); 
      // 第2引数があれば表示
      console.log('arguments[1]:', arguments[1]);
      // 第3引数(範囲外の場合undefined)
      console.log('arguments[2]:', arguments[2]);

      // 配列のようにループ処理も可能（ただし配列ではない点に注意）
      console.log('----- 全ての引数をループ表示 -----');
      for (let i = 0; i < arguments.length; i++) {
        console.log(`arguments[${i}]: ${arguments[i]}`);
      }
    }

    // 関数を呼び出してみる（引数の数は可変）
    processOrders('ホットコーヒー', 'アイスコーヒー');
    console.log('-------');
    processOrders('抹茶ラテ');
    console.log('-------');
    processOrders('紅茶', 'ハーブティー', 'ほうじ茶');
  </script>
</body>
</html>

実行結果

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

実際の引数の数: 2
arguments[0]: ホットコーヒー
arguments[1]: アイスコーヒー
arguments[2]: undefined
----- 全ての引数をループ表示 -----
arguments[0]: ホットコーヒー
arguments[1]: アイスコーヒー
-------
実際の引数の数: 1
arguments[0]: 抹茶ラテ
arguments[1]: undefined
arguments[2]: undefined
----- 全ての引数をループ表示 -----
arguments[0]: 抹茶ラテ
-------
実際の引数の数: 3
arguments[0]: 紅茶
arguments[1]: ハーブティー
arguments[2]: ほうじ茶
----- 全ての引数をループ表示 -----
arguments[0]: 紅茶
arguments[1]: ハーブティー
arguments[2]: ほうじ茶

まとめ

arguments は関数が呼ばれた時の実際の引数をまとめて保持する配列風オブジェクト
arguments[i] で i番目の引数を取得、arguments.length で引数の総数を確認
ES6 以降のコードでは、柔軟かつ可読性が高い残余引数（rest parameters）が推奨されるが、レガシーなコードを理解するためにも arguments を知っておくと役立つ。
arguments は配列ではない点に注意し、必要なら Array.prototype.slice.call(arguments) などで配列に変換して使う手もある。

　こうした仕組みにより、JavaScript では関数が定義したパラメータ数と実際の引数数が一致しなくてもエラーにならず、柔軟な引数処理を実現できます。もっとモダンなやり方として (...rest) がある一方、arguments は古いコードや互換性を考慮したコードでまだ見かけることがあるでしょう。

【JavaScript入門】arguments