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.

Thank you for reading! Happy Coding !! :)