Rest parameters

rest parameters とは、不特定多数の引数を配列として受け取る構文です。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

構文

function f(a, b, ...theArgs) {
  // ...
}

説明

関数の最後の名前付き引数に "..." の接頭辞を付けると、この最後の引数は、実際に関数に渡された残りの引数による 0 からtheArgs.length の直前までの要素の配列になります。

上記の例で、最初の引数は a に、2 番目の引数は b にマッピングされるため、theArgs は、関数に渡された引数の 3 番目から最後までを集めた配列になります。

rest parameters と arguments オブジェクトの違い

rest parameters と arguments オブジェクトの間には、主に 3 つの違いがあります:

• 残余引数は、各引数に個別の名前が与えられていないだけです。一方で、arguments オブジェクトは、関数に渡されるすべての引数を含みます;
• arguments オブジェクトは実配列ではありません。一方 rest parameters は、Array インスタンスです。これは、sort、map、forEach、pop のようなメソッドを直接適用できることを意味します。
• arguments オブジェクトは、(callee プロパティのように) 自身固有の追加機能を持っています。

引数から配列へ

rest parameters は、arguments により引き起こされた定型コードを減らすために導入されました。

// rest parameters の登場以前は、以下のように記述していました:
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length);

  // …
}

// これは以下と等価です:

function f(a, b, ...args) {
  
}

rest parameter の非構造化

Rest parameters は非構造化できます、つまりデータを個々の変数にバラけさせることができます。分割代入を見てください。

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b と c は undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (4番目のパラメーターは非構造化されていない)

例

theArgs は配列なので、length プロパティを使用して要素数を取得できます:

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

次の例では、rest parameters を使用して 2 番目の引数から最後の引数までを集め、最初の引数とそれらを乗算します:

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function (element) {
    return multiplier * element;
  });
}

var arr = multiply(2, 1, 2, 3); 
console.log(arr); // [2, 4, 6]

次の例では、rest parameters に対して Array メソッドが使用できることを示します。しかし、arguments オブジェクトに対してはできません:

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5,3,7,1)); // 1,3,5,7 を表示します

function sortArguments() {
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // 前の行でエラーになるため、これは実行されません
}


console.log(sortArguments(5,3,7,1)); // TypeError を投げます: arguments.sort は関数ではありません

arguments オブジェクト上で Array メソッドを使用するには、まずオブジェクトを実配列に変換する必要があります。

function sortArguments() {
  var args = Array.from(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7

仕様

ブラウザの実装状況

関連項目

• スプレッド演算子 (こちらも ‘...’)
• Arguments オブジェクト
• 配列
• 関数
• ecmascript.org のオリジナル提案
• JavaScript arguments object and beyond
• 分割代入