The spread operator is a new addition to a set of operators in Javascript ES6. It is denoted by three dots and basically unpacks elements of iterable objects such as arrays, sets, and maps. Let's have a look at how the spread operator can be useful
Let's say you have an array and you want to include/add elements from another array. There are a couple of ways one can do that without the spread operator.
Using Push method
const arr1=[1,2,3,4,5];
const arr2=[9,8,7];
arr2.push(arr1[0]);
arr2.push(arr1[1]);
arr2.push(arr1[2]);
console.log(arr2); // [9,8,7,1,2,3]
Using a for loop
const arr1=[1,2,3,4,5];
const arr2=[9,8,7];
for(let i=0;i<arr1.length;i++)
{
arr2.push(arr1[i]);
}
console.log(arr2); // [9, 8, 7, 1, 2, 3, 4, 5]
All the above methods do work but all this can be easily achieved using the spread operator
const arr1=[1,2,3,4,5];
const arr2=[9,8,7,...arr1];
console.log(arr2); // [9, 8, 7, 1, 2, 3, 4, 5]
Notice how it took us only one line to achieve this using the spread operator.
Let's look at another example just to strengthen our grasp on spread operator.
const restaurant={
mainMenu:["Pizza", "Dosa","Naan"]
}
const newMenu = [...restaurant.mainMenu,"Rice"];
console.log(newMenu); // ["Pizza","Dosa","Naan","Rice"];
Spread operator can also help us in combining or merging two arrays. Let's look at an example.
const restaurant={
mainMenu:["Pizza", "Dosa","Naan"],
starterMenu: ["Gobi","Spring rolls","Tomato Soup"]
}
const Menu=[...restaurant.mainMenu,...restaurant.starterMenu];
console.log(Menu); // ["Pizza", "Dosa","Naan","Gobi","Spring rolls","Tomato Soup"];
Although we can use concatenate method above, the spread operator works fine too. Spread operator can also be used in strings and functions. Let's look at a few examples.
const str = "Tommy";
const letters=[...str]; // ["T","o","m","m","y];
console.log(...str); // T o m m y
As you can see above, the spread operator unpacks a string to its letters.
With functions, you can pass an array of arguments to a function by spreading them. Let's look at an example.
One way of passing array elements as arguments in function is
const restaurant = {
order: function (ing1, ing2, ing3) {
console.log(`${ing1} , ${ing2} , ${ing3}`); // Oil , cinnamon , panner
}
};
const ingredients= ["Oil", "cinnamon", "panner"];
restaurant.order(ingredients[0], ingredients[1], ingredients[2]);
However, this can be a challenge as the number of elements of an array increases. An easier way around this would be to the spread operator syntax.
const restaurant = {
order: function (ing1, ing2, ing3) {
console.log(`${ing1} , ${ing2} , ${ing3}`); // Oil , cinnamon , panner
}
};
const ingredients= ["Oil", "cinnamon", "panner"];
restaurant.order(...ingredients);
Just when you thought it was over, the spread operator can also be used in objects. Let's look at a few examples.
const restaurant ={
mainMenu:["Pizza", "Dosa","Naan"]
}
const newRestaurant ={...restaurant,founder:"Arnold"}
console.log(newRestaurant); // { mainMenu:["Pizza", "Dosa","Naan"],founder:"Arnold"}
Just as in arrays, the spread operator can be used in objects too to merge two or more objects and also copy objects.
const obj1={
name:"Tom",
grade: 6,
hobbies:["Drawing","Photography"]
}
const obj2={
city:"Texas",
hasLicense: false
}
const newObj = {...obj1,...obj2}; //Merging two objects
console.log(newObj); // {name:"Tom", grade: 6,hobbies:["Drawing","Photography"],city:"Texas", hasLicense:false}
Also if you're interested, the spread operator has a time complexity of O(n).
So as you can see the spread operator truly can be your best friend if used effectively.