Spread Operator in JavaScript

The spread operator is used to expand elements of an iterable such as a string, array or object. We will learn about the spread operator in this article.

Let us see an example without using the spread operator:

We will create an array called 'fruits' and print the array without using the spread operator.

Code:

Output:

 mango apple pear 

In the above example, we have printed all items of the array 'fruits' by using their index number.

Now, let us look at an example of using a spread operator:

We will create an array called 'fruits' and print the array using the spread operator.

Code:

Output:

 mango apple pear 

In this example, we have not used index numbers to print all items instead we have used spread operators. We can see that the code looks cleaner and the line code is reduced.

Benefits of the spread operator

We can use the spread operator for many things which are as follows:

• It can be utilized to access all items in an array.
• It can be utilized to combine arrays.
• It can be utilized to pass elements to functions as separate arguments.
• It can be utilized to duplicate object literals.
• It can be utilized to merge object literals.

Following are some of the demonstrations of using the spread operator in JavaScript:

Demo 1: Expanding the Array

We will expand the elements of an array in this demo.

Code:

Output:

 [ 'red', 'blue', 'yellow' ] red blue yellow 

Demo 2: Spread Operator inside Array

We will expand the elements of an array by utilizing the spread operator inside an array.

Code:

Output:

We have not used the spread operator to print the colors1 array so we can see that it contains an inner array.

We have used the spread operator to print the colors2 array so we can see elements of colors array becomes the individual string elements.

 [ 'orange', [ 'red', 'blue', 'yellow' ], 'brown' ] [ 'orange', 'red', 'blue', 'yellow', 'brown' ] 

Demo 3: Duplicating Object Literals

We will utilize the spread operator to duplicate object literals in this demo.

Code:

Output:

We can see the duplicate object literals in the output.

 { cars_company: { company1: 'BMW', company2: 'Tesla', company3: 'Ferrari' }} { company1: 'BMW', company2: 'Tesla', company3: 'Ferrari' } 

Demo 4: Merging Object Literals

We will utilize the spread operator to merge object literals in this demo.

Code:

Output:

We have merged student1and student2 to team1 using the spread operator and we can see that both objects are flawlessly merged to form a new object.

We have merged student1and student2 to team2 without using the spread operator and we can see both objects name also.

 team1 = { name: 'Katy', age: '36' } team2 = { student1: { name: 'Ben', age: '25' }, student2: { name: 'Katy', age: '36' } } 

Demo 5: Spread Operator as Part of Function Argument

We can use the spread operator as part of the function argument. We will create a function that takes three arguments.

Code:

Output:

We can witness that only the first three arguments are considered to print the sum of numbers.

 18 

Demo 6: Spread Operator with Strings

We can use the spread operator with strings in this demo.

Code:

Output:

 [ 'zathura' ] [ 'z', 'a', 't', 'h', 'u', 'r', 'a' ] 

Conclusion:

In this article, we have studied the spread operator in JavaScript. We have seen various ways to utilize the spread operator with the help of demonstrations.