JavaScript has always had the feature of allowing functions to be passes fewer or more parameters than formally specified in the function declaration without any problems. Default Parameters, as discussed earlier, help you accept fewer values as parameters and still have the other parameters assigned a value.
Many modern programming languages provide the ability for the function to accept a variable number of parameters. ES6 introduces this much needed feature to JavaScript with Rest Parameters. You now have the ability to pass a function a dynamic number of parameters very easily. If you wanted to do this in ES5 you would have to put all the values in a data container data type like an array. The Rest Parameters simplify this entire process.
Note: Do not confuse this term to the web services concept of REST. This has nothing to do with REST in web services. Rest here refers to gathering up parameters and putting them all into a single array. Spread refers to spreading out the elements of an array (or even a string).
Let’s look at an example,
var showCollections = function (id, ...collection) { console.log(collection instanceof Array); }; showCollections(42, "movies", "music"); // true
The ... symbol is the rest symbol. It precedes a named parameter. This named parameter will become an Array that will just gather up all the remaining parameters passed to the function. Hence here, Collections is set to an array. To make this more clear if we execute the above program this way,
var showCollections = function (id, ...collection) { console.log(collection); }; showCollections(42, "movies", "music"); // ["movies", "music"]
The Rest parameter gathers up all the remaining parameters after the id parameter and makes it into an array called collection. Excluding the first defined parameter ‘id, ’ everything will be placed in the Array.
If we call the same function by passing it just one value which is the id, it logs out an empty array [].
Let’s look the length property of the function. If we call showCollections.length, it will give us the number of parameters in the function.
var showCollections = function (id, ...collection) {}; console.log(showCollections.length); // 1
The length property ignores the Rest parameter. In this case, it is 1. The length property of the function only counts the number of named parameters excluding the rest parameter. Now let's look at the case where we check the arguments.length inside the function:
var showCollections = function (id, ...collection) { console.log(arguments.length); }; showCollections(123, "movies", "music"); // 3
We already had an arguments object, which we can use to check all the parameters passed to a function without having to define each parameter specifically. Remember we can have both named and unnamed parameters in a function. In this case, even though we have two parameters in the function definition, arguments object is going to refer back to the original function call and three is the number of arguments passed to the function.
In the ES4 specification, Rest parameters were meant to replace arguments and arguments object was completely done away with, but ES4 never came into being and in ES6, this concept was reintroduced, but this time the 'arguments' has not been removed from the language.
We can use the Rest operator in a function constructor. Check the following where we are creating a new function that has a rest parameter and returns the very first argument that is passed into it.
var getFirst = new Function("...args", "return args[0]"); console.log(getFirst(1, 2)); // 1
# The Spread Operator
The spread operator, which is also denoted by ... before an array, does essentially the reverse operation of a rest operator. It spreads out an array and passes the values into the specified function. Consider the following example: […]
~
GROVER, Deepak and KUNDURU, Hanu Prateek, 2017. ES6 for humans: the latest standard of JavaScript: ES2015 and beyond. New York, NY: Apress, Springer Science+Business Media. For professionals by professionals. ISBN 978-1-4842-2623-0.