残余引数
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
残余引数構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。
試してみましょう
function sum(...theArgs) { let total = 0; for (const arg of theArgs) { total += arg; } return total;}console.log(sum(1, 2, 3));// Expected output: 6console.log(sum(1, 2, 3, 4));// Expected output: 10構文
function f(a, b, ...theArgs) { // ...}解説
関数定義の最後の引数に "..." （3 つの U+002E FULL STOP 文字）の接頭辞を付けると、（ユーザーが提供した）その位置にある残りの引数を標準の JavaScript の配列の中に入れることができます。最後の引数のみが「残余引数」になることができます。
function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs);}myFun("one", "two", "three", "four", "five", "six");// コンソール出力:// a, one// b, two// manyMoreArgs, ["three", "four", "five", "six"]クイックリファレンス
関数定義には、...restParam を 1 つだけ入れることができます。
foo(...one, ...wrong, ...wrong);残余引数は、関数定義の最後の引数でなければなりません。
foo(...wrong, arg2, arg3);foo(arg1, arg2, ...correct);残余引数とarguments オブジェクトとの違い
残余引数とarguments オブジェクトの間には、主に 3 つの違いがあります。
arguments から配列へ
残余引数は、引数により引き起こされる定型コードを減らすために導入されました。
// 残余引数の登場以前は、"arguments" を普通の配列に変換するには以下のようにしていました。function f(a, b) { let normalArray = Array.prototype.slice.call(arguments); // -- or -- let normalArray = [].slice.call(arguments); // -- or -- let normalArray = Array.from(arguments); let first = normalArray.shift(); // OK、最初の引数が得られる let first = arguments.shift(); // エラー (arguments は通常の配列ではない)}// 残余引数を使ってふつうの配列へのアクセスが得られるようになりましたfunction f(...args) { let normalArray = args; let first = normalArray.shift(); // OK、最初の引数が得られる}例
残余引数の使用
この例では、最初の引数がa に、 2 番目の引数がb に割り当てられますので、これらの名前付き引数はふつう通り使われます。
しかし、 3 番目の引数、manyMoreArgs は、 3 番目、 4 番目、 5 番目、 6 番目、～ n 番目 — ユーザーが入れただけの数の引数を持つ配列になります。
function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs);}myFun("one", "two", "three", "four", "five", "six");// a, "one"// b, "two"// manyMoreArgs, ["three", "four", "five", "six"] <-- 配列であることに注意以下、値が1つしかなくても、最後の引数は配列に入れられる。
// 上記の例と同じ関数定義を使用myFun("one", "two", "three");// a, "one"// b, "two"// manyMoreArgs, ["three"] <-- 値が 1 つだけでも配列であることに注意以下の例では、 3 番目の引数が提供されていませんが、manyMoreArgs は配列のままです（ただし空のものです）。
// 上記の例と同じ関数定義を使用myFun("one", "two");// a, "one"// b, "two"// manyMoreArgs, [] <-- やはりこれも配列引数の長さ
theArgs は配列なので、length プロパティを使用して要素数を取得することができます。
function fun1(...theArgs) { console.log(theArgs.length);}fun1(); // 0fun1(5); // 1fun1(5, 6, 7); // 3通常の引数と残余引数
次の例では、残余引数を使用して 2 番目の引数から最後の引数までを配列に集めています。それからそれぞれを最初の引数と乗算し、その配列を返します。
function multiply(multiplier, ...theArgs) { return theArgs.map((element) => { return multiplier * element; });}let arr = multiply(2, 15, 25, 42);console.log(arr); // [30, 50, 84]残余引数は実際の配列、 arguments オブジェクトはそうではない
Array のメソッドを残余引数で利用することができますが、arguments オブジェクトでは利用できません。
function sortRestArgs(...theArgs) { let sortedArgs = theArgs.sort(); return sortedArgs;}console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7function sortArguments() { let sortedArgs = arguments.sort(); return sortedArgs; // これは実行されない}console.log(sortArguments(5, 3, 7, 1));// TypeError が発生 (arguments.sort は関数ではない)Array のメソッドをarguments オブジェクトで使用するには、まずオブジェクトを実際の配列に変換する必要があります。
function sortArguments() { let args = Array.from(arguments); let sortedArgs = args.sort(); return sortedArgs;}console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-function-definitions |
ブラウザーの互換性
関連情報
- スプレッド構文 (こちらも '
...') - 構造分解
argumentsオブジェクトArray