Rest Parameter and Spread Operator
By: Ayush Kejriwal
Tags: JavaScript, Spread Operator, Rest Parameter, ES6, Syntactic Sugar

One of the ES6 syntactic sugar “…” the three dots

We all know about JavaScript’s ES6 update and it brought some of the great syntactic sugar as an update for better and ease of code writing or to help us create more flexible functions. One of them is the triple-dot notation “…” which we can use in two different ways, one is as Rest Parameter, and the other is as Spread Operator. So what are they and how are they different when using the same notation for two different words?

Rest Parameter

The rest syntax collects the many elements and changes them into a single element. Let’s take an example we do a function like this (as shown below)

function add(a, b) {

return a + b;

} console.log(add(1, 2, 3, 4, 5)); //returns 3

The above function will return “3” as the output in log, this is because in JavaScript we can pass any number of inputs or arguments as we passed in “add(1, 2, 3,4,5)”. In this case, only the first two are being considered. And to overcome this we use the rest parameter. With the rest parameter, we can gather any number of arguments or inputs and do whatever operation we want to do with them. An example below

function add(...args) {

let sum = 0;

for(var i = 0; i< args.length; i++){

sum=sum+args[i];

}

return sum;

} console.log(add(1)); //returns 1

console.log(add(1,2)); //returns 3

console.log(add(1,2,3)); //returns 6

Note: A function definition can have only one “…” rest parameter & the rest parameter has to be at the last argument. This is because it collects all remaining/ excess arguments into an array.

xyz(...arg1, arg2, arg3) // Wrong Way xyz(arg1, ...arg2, arg3) // Wrong Way xyz(...arg1, ...arg2, arg3) // Wrong Way xyz(arg1, ...arg2, ...arg3) //Wrong Way xyz(...arg1, ...arg2, ...arg3) //Wrong Way

Above are almost all the wrong ways of declaring the rest parameter. Below are the right ways

xyz(...arg1) // Right Way xyz(arg1, ...arg2) // Right Way xyz(arg1, arg2, ...arg3) // Right Way

Spread Operator

Spread syntax “expands” an array into its elements while rest syntax collects multiple elements and “condenses” them into a single element.

According to MDN Web Docs the definition of Spread Operator is somewhat like this :

Spread syntax (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Let’s see some scenarios, how and where the spread operator is used:

Adding array elements to an existing array

var arr = ["A", "B", "C"];

var newArr = ["D", ...arr]; console.log(newArr); //output will be ["D", "A", "B", "C"]

The value of newArr will ["D", "A", "B", "C"] . Unlike the rest parameters, we can use the spread operator as the first argument.

var newArr = [...arr, "D"]; console.log(newArr); //output will be ["A", "B", "C", "D"]

So if we want to add elements at last you can see we can do it in spread operator. The output in the above case would be ["A", "B", "C", "D"] .

Copying Array

We can use the spread operator to copy an array.

var arr1 = [1, 2, 3, 4, 5];

var arr2 = [...arr];

By doing this arr1 can be easily copied to arr2 .

Passing elements of an array as separate arguments to a function

If we have an array and we have to pass the whole array to the function we can do it like this

function sum(x, y, z) {

return x + y + z;

} const numbers = [1, 2, 3]; console.log(sum(...numbers)); // expected output: 6

Here sum function call is similar to sum(1, 2, 3) . Note: Iterable also works in spread operator. So if we had a string as shown below

const str = "Hello!"; console.log([...str]); //expected output ["H", "e", "l", "l", "o", "!"]

We can see the output is in this case.

I guess this article might have made the concept a little bit clearer. For a more simplified explanation, you can visit this illustration by Stephanie. Great explanation by her and if you like her work do follow her.

If you like this article follow me on Twitter or LinkedIn.