ES6 added a lot of cool features to JavaScript. The Rest and Spread operators are powerful new features that allow us to access and manipulate data easily.

The word Rest here simply means gathering up parameters and putting them all into a single array.

Also, the word Spread refers to spreading out the elements of an iterable (arrays, objects and strings).

They both make use of the three dots ... but apply it differently to suit their purpose.

In this post, we'll learn about the Rest and Spread operators, how to use them and when to use them.

Table of Content:

• Rest Operators
• Spread Operators
• Summary

Rest Operators

As we stated earlier, The Rest operators gather up parameters and put them all in a single array.

It makes use of the ... symbol which precedes a named parameter that will become an array that will just gather up the remaining parameters passed to a function. See the following example:

  function showNames(...names){
   console.log(names);
}

 showNames("Runo","Tega","Ejiro") // ["Runo","Tega","Ejiro"]

In the example above, the rest parameter is names which is preceded by a ... to denote that names is indeed a rest parameter. When the function is invoked the console prints the value of names as ["Runo","Tega","Ejiro"] which is an array created by gathering all the arguments passed into the, into the showNames functions.

When You Should Use the Rest Operators

The rest operators can be very useful when you need to create function definitons that can accept unlimited number of parameters, let's see an example:

 function add(a, b){
   return console.log(a + b);
}
add(1,2); // 3
add(1, 2, 3, 4, 5); //3

The first function call, add(1,2) returns 3. This is quite normal and straight forward, but what if you needed to pass in more arguments to your function to help you add more than 2 parameters?

After invoking the next add function which is add(1, 2, 3, 4, 5) we'll still get 3 because in JavaScript you can call a function with any number of arguments but the number of arguments that will be used depends on the number of parameters specified in the function definition.

In this case, only 2 parameters are specified. Hence, Javascript picks up the first 2 arguments.

Rest parameters to the rescue

With the rest parameters we can gather any number of arguments into an array and do whatever you want with them. We can use array methods like higher-order functions like forEach(), map(), reduce().

Using rest parameters, we can rewrite the add function like this:

function add(...rest){
  let total = 0;
  rest.forEach(num => total += num);

return console.log(total);
}

add(1,2); //3
add(1, 2, 3); //6
add(1, 2, 3, 4, 5, 6);//21

By doing so, we have succeeded in making our function flexible and adaptable to accept as much arguments as possible because the rest parameter will gather them up in an array and we make good use of the forEach() method to iterate over each element in the array add it to the total variable.

Note: If you need to specify a parameter (or parameters) alongside a rest parameter, ensure that the rest parameter is last in your function definition.

function allNames(name1, ...name2, name3){
console.log(name2); // Error!
}

allNames("Runo", "Tega", "Ejiro", "Simi", "Gare");

Please DON'T DO this, it doesn't make any sense to JavaScript. The rest parameters job is to gather the excess arguments that will be passed into a function. This function should be rewritten like so:

function allNames(name1, name2, ...name3){
console.log(name2); // Tega
console.log(name3); // ["Ejiro", "Simi", "Gare"];
console.log(name3.length); // 3
}

allNames("Runo", "Tega", "Ejiro", "Simi", "Gare");

It's also important to know that the length property of functions ignores the rest parameters, lets see what we'll get if we try to find the length of the allNames function:

function allNames(name1, name2, ...name3){
console.log(name2); // Tega
}

console.log(allNames.length) // 2

Spread Operators

The spread operator simply does the opposite of what the rest operator does, it unpacks an array.

The spread operator can be used with other iterable data types like strings and objects.

The spread operator is applied in the following scenarios:

When you need to copy an array

 let arr = ["a", "b", "c"];
 let newArr = [...arr];

 console.log(newArr) // ["a", "b", "c"]

Its that's easy, all you need to do is to add a preceding ... to an existing array and it simply removes all the values from the array.

Adding array elements to another array

const arr = ["a", "b"];
const newArr = [...arr, "c", "d"];
console.log(newArr) //["a", "b", "c", "d"]

The values of arr is transferred to newArr.

Splitting Strings

 let name = 'Runo';
 console.log(...name) // 'R' 'u' 'n' 'o'

Merge Objects

 const obj1 = {
       name: "Runo"
}

const obj2 = {
       age: 19
}

const obj3 = {
     ...obj1,
     ...obj2
}

console.log(obj3) // {name: "Runo", age: 19}

Summary

The rest operatorstores the remaining data passed into a function in an array. In other words, it creates a new array. On the other hand, The spread operator simply works with an existing array or iterable like strings and objects, It's commonly used in modern frameworks like ReactJsto copy data from state.

I hope this helps someone, Happy Coding fam!