では arguments オブジェクト と 可変長引数（rest パラメータ ...rest） を、初心者向けにわかりやすく比較してみましょう。
基本的な違い
| 項目 | arguments オブジェクト | ...rest パラメータ |
|---|---|---|
| 使える場所 | 通常の関数のみ | 通常の関数・アロー関数どちらでも |
| 型 | 配列っぽいオブジェクト（本物の配列ではない） | 本物の配列 |
| メソッド利用 | map や reduce は直接使えない（変換が必要） | 配列なのでそのまま使える |
| 可読性 | 引数の意味がわかりにくい | 名前を付けられるのでわかりやすい |
| 歴史 | 古くからある仕組み | ES6（2015年）以降の新しい書き方 |
| 推奨度 | 古いコードで見かける程度 | 現代の標準的な書き方 |
コード例で比較
1. arguments の場合
function sumOld() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sumOld(1, 2, 3)); // 6
argumentsは配列っぽいけどreduceが使えないので、ループで回す必要がある。
2. ...rest の場合
function sumNew(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sumNew(1, 2, 3)); // 6
numsは配列なので、reduceやmapがそのまま使える。- アロー関数でもOK。
const sumArrow = (...nums) => nums.reduce((a, b) => a + b, 0);
まとめ
arguments- 「昔のやり方」。配列っぽいけど不便。アロー関数では使えない。
...rest- 「今のやり方」。配列として扱えるので便利。アロー関数でも使える。
👉 初心者は 「可変長引数は ...rest を使う」 と覚えておけばOKです。arguments は「古いコードを読むときに出てくる」くらいの理解で十分。