Spread Syntax in Javascript

Table of Contents

• Syntax
• Using spread in function calls
• Using spread in arrays
  • Adding elements in an array
  • Cloning an array
• Using spread in objects
  • Shallow Clone Object
  • Merging Objects

Syntax

The spread syntax is similar to the rest parameter(...rest). But instead of composing arguments into an array, the spread syntax is used to expand iterables into its contents in the required places.

[...iterableObject]
{...obj}
func(...iterableObject)

We will go through each of the above examples in detail in this article. Let's work with some examples and scenarios where the spread is useful.

Using spread in function calls

Let's consider the greeting function we wrote in the article Rest Parameter in ES6.

function greetings(...names){
  for(let name of names){ 
    console.log(`Hello, ${name}!`);
  }
}

Suppose we have a list of 100 people in an array to whom we need to greet using the above function. To achieve that, we need to pass person names as arguments to the greeting function.

This can be achieved using the spread syntax, which will expand the array into its elements at the place of the call.

let namesArr = ['John Doe', 'Harry Potter', 'Dr. Strange'];
// For simplicity we are considering only 3 names

greetings(...namesArr);
//Output:
// Hello John Doe!
// Hello, Harry Potter!
// Hello, Dr. Strange! 

Using spread in arrays

we can use the spread to do a lot of things with an array. Let's discuss some of the common use cases.

Adding elements in an array

We can use the spread syntax to add new elements in an array. Always remember that the spread returns a new array and does not modify the existing arrays.

let fruits = ["orange", "kiwi", "watermelon"];

//Add a new fruit at start of the array.
let newStartFruits = ["banana", ...fruits];
console.log(newStartFruits);
// ["banana", "orange", "kiwi", "watermelon"]

//Add a new fruit at end of the array.
let newEndFruits = [...fruits, "banana"];
console.log(newEndFruits);
// ["orange", "kiwi", "watermelon", "banana"]

Cloning an array

let fruitArr = ["orange", "apple", "kiwi"];
let fruitArrClone = [...fruitArr];
console.log(fruitArrClone);
// ["orange", "apple", "kiwi"]

console.log(fruitArr === fruitArrClone);
// false

### Concatenating arrays
let fruitArr = ["orange", "apple", "kiwi"];
let vegetableArr = ["carrot", "tomato"];

let fruitAndVegArr = [...fruitArr, ...vegetableArr];
console.log(fruitAndVegArr);
// ["orange", "apple", "kiwi", "carrot", "tomato"]

Using spread in objects

The spread syntax is added to objects in ES 2018. Using Spread syntax you can now shallow clone the object and also merge objects.

Shallow Clone Object

let orange = {name:"orange", type:"fruit"};
let newOrange = {...orange};
// creates a new object with properties of orange object.
// {name: "orange", type: "fruit"}

Merging Objects

let orange = {name:"orange", type:"fruit"};
let color = {color: "orange"};
let newOrange = {...orange, ...color};
// creates a new object by merging properties of 
// orange and color objects.
// {name: "orange", type: "fruit", color: "orange"}

We will love to see examples and scenarios where you have used the spread syntax. Feel free to add them in the comments below :).