JavaScript | 関数で使う arguments オブジェクト の使い方

JavaScript JavaScript
スポンサーリンク

では 初心者向けにやさしく、例題を交えながら arguments オブジェクトを詳しく説明します。コードはブラウザのコンソール(または Node.js)でそのまま動きます。


1. arguments って何?(超かんたん説明)

arguments関数の中で使える特別なオブジェクトです。
関数に渡された「すべての引数」をまとめて扱えます。

ポイント:

  • arguments.length で渡された引数の 個数 がわかる。
  • arguments[0], arguments[1] … のように インデックスで値にアクセスできる。
  • 配列(Array)ではないけれど、数字インデックスと length を持つ「配列っぽい」オブジェクト(=array-like)です。

2. まずは基本コード(例:渡された値を全部足す)

function sumAll() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

console.log(sumAll(1, 2, 3));      // 6
console.log(sumAll(10, -2, 4, 8)); // 20
console.log(sumAll());             // 0
JavaScript

説明:関数に何個引数が来ても、arguments.length でループして合計できます。


3. arguments は配列じゃない → そのまま forEach や map は使えない

function tryMap() {
  // arguments は Array ではないので以下はエラーになります
  // arguments.map(x => x * 2); // TypeError: arguments.map is not a function
}
JavaScript

配列に変換してから使う方法を2つ紹介します(どちらでもOK):

function doubleUsingArrayFrom() {
  const arr = Array.from(arguments);   // (1) Array.from
  return arr.map(x => x * 2);
}

function doubleUsingSpread() {
  const arr = [...arguments];          // (2) スプレッド(実行環境によって安全)
  return arr.map(x => x * 2);
}

console.log(doubleUsingArrayFrom(1,2,3)); // [2,4,6]
console.log(doubleUsingSpread(4,5));      // [8,10]
JavaScript

注:Array.from(arguments) が最も確実でわかりやすいです。


4. より良い現代的な書き方:rest パラメータ(おすすめ)

ES6 以降は ...(rest)を使うのが一般的で読みやすいです。arguments よりも推奨されます。

// rest 引数を使った合計(読みやすい・配列として扱える)
function sumAllModern(...nums) {
  let sum = 0;
  for (const n of nums) sum += n;
  return sum;
}

console.log(sumAllModern(1,2,3)); // 6
JavaScript

違い:...nums は **本物の配列(Array)**なので .map, .forEach などをそのまま使えます。


5. 注意点(初心者がハマりやすいところ)

  • アロー関数では arguments は使えません。
const f = () => {
  console.log(arguments); // ReferenceError / arguments is not defined
};
JavaScript

アロー関数で可変長の引数を扱うなら (...args) => {} を使ってください。

  • arguments は「配列っぽい」けど配列ではない → Array メソッドは使えない(→ Array.from などで変換)。
  • arguments.calleearguments.caller古くて使わない。ES5/ES6 以降は非推奨/禁止されているので避ける。
  • (上級)strict モードでは arguments と関数の個別パラメータの同期の仕方が違うことがあるが、初心者はまず「別物」と覚えておけばOK。

6. 実践例いくつか(使いどころ)

例 A:引数がゼロのときにデフォルト処理する

function greet() {
  if (arguments.length === 0) {
    console.log('Hello, guest!');
    return;
  }
  console.log('Hello, ' + arguments[0] + '!');
}

greet();           // Hello, guest!
greet('Alice');    // Hello, Alice!
JavaScript

例 B:複数の名前を受け取り、カンマ区切りで表示する

function greetAll() {
  const names = Array.from(arguments);
  console.log('Hello ' + names.join(', ') + '!');
}

greetAll('A', 'B', 'C'); // Hello A, B, C!
JavaScript

例 C:引数の中から最大値を返す(arguments を使う)

function maxOfArgs() {
  if (arguments.length === 0) return -Infinity;
  let max = arguments[0];
  for (let i = 1; i < arguments.length; i++) {
    if (arguments[i] > max) max = arguments[i];
  }
  return max;
}

console.log(maxOfArgs(3, 7, 2, 9)); // 9
JavaScript

(同じことは Math.max(...nums) と rest を使ってもっと簡単にできます。)


7. 練習問題

  1. multiplyAll という関数を作り、渡された引数すべてを掛け合わせて返してください。引数がなければ 1 を返す。
  2. filterStrings という関数を作り、引数の中から文字列だけを取り出して配列で返してください(数値や真偽値は無視)。

模範解答(ヒント)

// 解答例1
function multiplyAll() {
  if (arguments.length === 0) return 1;
  let prod = 1;
  for (let i = 0; i < arguments.length; i++) prod *= arguments[i];
  return prod;
}

// 解答例2 (Array.fromで配列に変換して filter)
function filterStrings() {
  const arr = Array.from(arguments);
  return arr.filter(x => typeof x === 'string');
}
JavaScript

まとめ(初心者が覚えておくべき短いポイント)

  • arguments は「関数に渡されたすべての引数」を扱うための array-like オブジェクト。
  • 基本は arguments.lengtharguments[i] を使えばOK。
  • ただし 今は ...rest(例:function f(...args))を使う方が簡単で安全
  • アロー関数では arguments は使えない → rest を使う。
タイトルとURLをコピーしました