Rest parameters

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

Syntax

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

Description

If the last named argument of a function is prefixed with ..., it becomes an array whose elements from 0 (inclusive) to theArgs.length (exclusive) are supplied by the actual arguments passed to the function.

In the above example, theArgs would collect the third argument of the function (because the first one is mapped to a, and the second to b) and all the consecutive arguments.

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, 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

JavaScript
// Before rest parameters, the following could be found:
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length);

  //
}

// to be equivalent of

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

Examples

Since theArgs is an array, you can get the count of its elements by using the length property:

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

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

In the next example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one:

JavaScript
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]

The following example shows that you can use Array methods on rest parameters, but not on the arguments object:

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

console.log(sortRestArgs(5,3,7,1)); // shows 1,3,5,7

function sortArguments() {
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // this will never happen
}

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

In order to use Array methods on the arguments object, you would need to convert it to a real array first.

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function Definitions' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Function Definitions' in that specification.
Draft  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 47 (Yes) 15.0 (15.0) No support 34 No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 47 15.0 (15.0) No support No support No support 47

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions/rest_parameters

Functions JavaScript Rest Rest parameters