What is Spread Operator in JavaScript?

What is Spread Operator in JavaScript?

Balashankar Gujja's photo
Balashankar Gujja

Spread operator allow you to quickly copy an existing array or object into another array or object. The spread operator is denoted by (...) three dots. Simply it allows an expression to be expanded. Syntax : 

var array2 = [ ...array1 ];

In the above syntax, … is spread operator which will target all values in particular variable. It allows us to do quite a few things in JavaScript. Let's discuss.

1. Concatenate arrays

There are a variety of ways to combine arrays, but the spread operator allows you to place this at any place in an array.

let arr1 = [1,2,3];
let arr2 = [4,5];
arr = [ ...arr1, ...arr2 ]; // spread operator doing the concat job
console.log(arr); // 1, 2, 3, 4, 5

2. Destructuring arrays

You can use destructuring and the rest operator together to extract the information into variables as you'd like them.

let arr1 = [ "One", "Two", "Three", "Four" ];
let [first, ...remaining] = arr1;
console.log(first); // One
console.log(remaining); // Two, Three, Four

3. Copying Arrays

If we want to have a copy of an array, we will use array.prototype.slice() method. But, you can do the same with the spread operator.

var arr1 = [1,2,3];
var arr2 = [ ...arr1 ];
console.log(arr2); // 1, 2, 3

4. Calling Functions without Apply

To pass an array of argument to the function, we often use the function.prototype.apply() method. However, by using the spread operator, you can pass an array into the function.

let args = [0, 15, 5];
function sum(x, y, z)
{ return x+y+z; }
console.log(sum.apply(null, args));
console.log(sum(...args)); // 20

5. Function Arguments as Rest Parameters

The rest parameter collects all remaining arguments of a function into an array.

function f(a, b, ...args)
{ console.log(args); }
f(1,2,3,4,5); // [ 3,4,5 ]

6. Math Functions

Any function where spread is used as the argument can be used by functions that can accept any number of arguments.

let num = [9, 4, 7, 1];
console.log(Math.min(...num)); // 1

7. Separate a String into Separate Characters

You can use the spread operator to spread a string into separate characters.

let chars = [ "A", ..."BCD", "E" ];
console.log(chars); // A, B, C, D, E

8. Copy(like splice method)

By using the spread operator in copying, we made sure that the original array is not affected whenever we alter the new array.

let arr = [ "a", "b", "c" ]; 
let arr1 = [ ...arr ];
console.log(arr); // [ "a", "b", "c" ]
arr1.push('d'); //inserting an element at the end of arr1
console.log(arr1); // [ "a", "b", "c", "d" ]
console.log(arr);

9. Expand array

Whenever we want to expand an array into another we do something like this(arr1). Even though we get the content in one array, but actually it is inside another array which is definitely what we didn’t want. If we want the content to be inside a single array we can make use of the spread operator.

let arr = [ "A", "B", "C" ];
let arr1 = [ arr, "D", "E" ];
let arr2 = [ ...arr, "D", "E" ];
console.log(arr1);
console.log(arr2);

10. Combining Objects

We can merge two or more objects and create a new one that has properties of the merged objects. The following example uses the spread operator (...) to merge the person and job objects into the employee object:

let person = {
name : "John David",
age : 25
};
let info = {
role : "JavaScript Developer",
location : "USA"
};
let employee = { ...person, ...job };
console.log(employee);

You can think of more ways to use the Spread Operator. What I have listed here are the popular use cases of it. I prefer code explanation all the time. So go through it. If you like the post, hit the like. Thank you!

JavaScript