Rest parameters

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

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.

Syntax

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

Description

A function's last parameter can be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. Only the last parameter can be a "rest parameter".

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Difference between rest parameters and the arguments object

There are three main differences between rest parameters and the arguments object:

• rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression), while the arguments object contains all arguments passed to the function;
• the arguments object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;
• the arguments object has additional functionality specific to itself (like the callee property).

From arguments to an array

Rest parameters have been introduced to reduce the boilerplate code that was induced by the arguments

// Before rest parameters, "arguments" could be converted to a normal array using:

function f(a, b) {

  var normalArray = Array.prototype.slice.call(arguments);
  // -- or --
  var normalArray = [].slice.call(arguments);
  // -- or --
  var normalArray = Array.from(arguments);

  var first = normalArray.shift(); // OK, gives the first argument
  var first = arguments.shift(); // ERROR (arguments is not a normal array)

}

// Now we can easily gain access to a normal array using a rest parameter

function f(...args) {
  var normalArray = args;
  var first = normalArray.shift(); // OK, gives the first argument
}

Destructuring rest parameters

Rest parameters can be destructured; arrays only (though objects will soon be supported). That means that their data can be unpacked into distinct variables. See Destructuring assignment.

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

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

Fixme: Doing this is possible but there's (afaik) no use-case, so it's just confusing the junior audience. The following code does exactly the same. There should at least be a note, that in theory you can do something like this, but there is no point in doing so.
Also, since Function arguments will never have named parameters (this is not Python), the statement that "objects will soon be supported" is wrong.

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

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not ...)

Examples

In this example, the first argument is mapped to "a" and the second to "b",  so these named arguments are used like normal. However the third argument  "manyMoreArgs" will be an array that contains the 3rd, 4th, 5th, 6th ... nth -- as many arguments that the user includes.

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]

Below... even though there is just one value, the last argument still gets put into an array.

// using the same function definition from example above

myFun("one", "two", "three");

// a, one
// b, two
// manyMoreArgs, [three]

Below... the third argument wasn't provided, yet "manyMoreArgs" is still an array (although empty).

// using the same function definition from example above

myFun("one", "two");

// a, one
// b, two
// manyMoreArgs, []

Since theArgs is an array, a count of its elements is given by the length property:

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

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

In the next example, a rest parameter is used to collect all arguments after the first one in an array. Each one of them is then multiplied by the first parameter and the array is returned:

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]

Array methods can be used on rest parameters, but not on the arguments object:

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; // this will never happen
}


console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)

To use Array methods on the arguments object, it must be converted to a real array first.

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

Specifications

Browser compatibility

See also

• Spread syntax (also ‘...’)
• Arguments object
• Array
• Functions
• Original proposal at ecmascript.org
• JavaScript arguments object and beyond
• Destructuring assignment