Rest parameters
The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
Syntax
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 areArray
instances, meaning methods likesort
,map
,forEach
orpop
can be applied on it directly; - the
arguments
object has additional functionality specific to itself (like thecallee
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, 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:
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:
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:
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
- Arguments object
- Array
- Functions
- Spread Operator
- Original proposal at ecmascript.org
- JavaScript arguments object and beyond
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