ES6 Spread Operator | Rest Parameters in JavaScript | JavaScript Tutorial Series by SFDC Stop

 Hello Trailblazers,

Welcome to the fifth tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about Spread Operator in ES6. We'll see how we can spread an array into multiple elements using the spread operator and also, how we can combine multiple elements into a single array by using spread operator as a rest parameter in ES6 JavaScript functions. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

How we used to pass array elements as parameters inside the function before ES6?

We're going to define a simple JavaScript function which will display the array elements passed as parameters. The code for that function is given below:

As you can see, we're having a function named as eats which has 3 parameters fruit1, fruit2, fruit3 and will print the statement consisting of the values of these. We're passing the fruits array elements into the function as fruits[0], fruits[1] and fruits[2]. The output when we run this code is given below:

The code is executed successfully and we're getting the expected result i.e. Baby eats:- apple, mango and banana. 

How can we now pass array elements into function using spread operator in ES6?

ES6 has defined spread operator and it made it much simpler to pass array elements as parameters to a function in JavaScript. The updated code is given below:

As you can see in the above code, we're passing the array elements to function parameters by using the statement eats(...fruits);. When we specify three dots (...) before an array then it spreads the array into it's elements. That's why this operator is known as the spread operator. Therefore, while passing the array into the eats function, we're spreading it into multiple elements. The output when the above code is executed is given below:

As you can see above, the output is exactly the same as we've seen before.

What are Rest parameters in JavaScript ES6?

We've seen above that the ES6 spread operator (...) can be used to break an array into it's elements. But do you know that we can also use it to combine multiple JavaScript variables into a single array? We can pass multiple parameters to a JavaScript function and we can combine all those parameters to an array by using the spread operator. Let's see how:

As you can see above, we have created a function named as car. It has two parameters: name and features with a spread operator. This features parameter is nothing but an array and we're displaying the features of the car by iterating this array using the forEach loop. You can see above that we've called the car method with different values as: car('Audi', 'Great Speed', 'Good Color', 'Comfort', 'Good Looks');. So, here, the first argument is the car name Audi and is assigned to the name parameter. All the other arguments are car features and are combined together to form the features array by using the spread operator.

This is why we say that the spread operator can also be used as a Rest Parameter because it collects all the extra - rest of the parameters that are passed to a JavaScript function and forms an array. The output of the above code is given below:

As you can see above, all the features of the car are combined in a features array and we're able to display those features.

Concatenating two arrays using Spread Operator

Do you know we can also concatenate two arrays using spread operator? Let's have a look at the below code snippet to understand how:

As you can see in the above code snippet, we've created two arrays: features and moreFeatures. The features array is having 4 entries :- 'Great Speed', 'Good Color', 'Comfort' and 'Good Looks', whereas the moreFeatures array is having 2 entries:- 'Great Mileage' and 'Amazing Design'. We're using Array.push() method on the features array as features.push() which is basically used to push one element at the end of the array but here, we're spreading our moreFeatures array into multiple elements by using the spread operator. Therefore, these elements are then pushed one by one into the features array automatically and both the arrays are combined into the features array.

The output we're getting when the above code snippet is executed is given below:

As you can see above, it's pushing the elements of moreFeatures array into the features array using the push() and we're getting the output as 6, as the total number of elements are now 6. Also, we displayed the features array and it's showing us all the 6 features together. Therefore, we're able to concatenate two arrays using the spread operator. 

The same can be achieved when you're defining the second array as shown in the below code snippet:

As you can see above, we've passed the features array as an array element after the 'Amazing Design' entry while defining the moreFeatures array. We're spreading this array using the spread operator. This means that the moreFeatures array should contain all the elements of the features array after it's own two elements. Let's have a look at the output below as we're displaying the moreFeatures array using console.log() :

As you can see above, the moreFeatures array has all the elements of the features array appended after it's own elements, so, the spread operator is working perfectly fine.

To summarize, the learnings are given below:-

• Before ES6, if we need to pass array elements as parameters to js function, each array element was specified one by one using the index as array[0], array[1], array[2].
• ES6 made it very simple and we can simply pass the whole array as a single parameter by using the spread operator like: ...array
• In case, we're passing passing multiple values to a function we can combine them to an array using the spread operator. The spread operator is called a rest parameter in such a case.
• We can also concatenate two arrays using the spread operator.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!