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!