ES6 Spread Operator

Spread Operator is a very simple and powerful feature introduced in the ES6 standard of JavaScript, which helps us to write nicer and shorter code. The JavaScript spread operator is denoted by three dots (...). The spread operator helps the iterable objects to expand into individual elements. Iterable objects are those on which we can use a loop, for example, Array, Map, Set, etc. In other words, the spread operator allows us to copy all elements from the existing array or object into another array or object.

Let us now visit the following section which will help us to understand the need for the Spread Operator in ES6:

Why there is a need for a spread operator?

An object creates a memory in a heap because the value is defined in a heap so if we copy the original object into the temporary object and do some changes then it will also reflect in the original object the same reason for the array as Array is also behaving as the object.

But the spread operator does not make changes in the original array it also does operations in the spread operator.

Syntax:

var variablename1 = [...value];

Let's understand the usage of the spread operator through the following illustrated examples:

Example 1: Here we have copied the array (from cars1 to cars2 and cars1 to cars3 ) by using the spread operator.

const cars1 = ["AUDI", "BMW", "TATA", "MERCEDES"];
// Copied elements from cars1 to cars2 here
const cars2 = [...cars1];

// Copied elements from cars1 to cars3 here
// and also add some new elements in cars3
const cars3 = [...cars1, "NISSAN", "TOYOTA"];

console.log(cars1);
console.log(cars2);
console.log(cars3);

Output:

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

Example 2: In this example, we will use the spread operator for merging arrays.

const cars1 = ["AUDI", "BMW", "TATA", "MERCEDES"];
const cars2 = ["NISSAN", "TOYOTA"];
// copied elements from cars1 and cars2 to cars3 here 
const cars3 = [...cars1, ...cars2];

console.log(cars3);

Output:

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

Example 3: In this example, we will use the spread operator with objects.

// cars1 object
const cars1 = {
    Brand: "BMW",
    Color: "RED"
}
// copy cars1 object using spread 
// operator to create cars2 object
const cars2 = { ...cars1 };
console.log(cars2);

Output: 

{ Brand: 'BMW', Color: 'RED' }

Example 4:  In this example, we will use the spread operator for merging objects.

// cars1 is a object which is containing
// the attributes Brand & Color
const cars1 = {
    Brand: "Toyota",
    Color: "RED"
}
// cars2 is a object which is containing 
// the attributes Brand, Color & Year
const cars2 = {
    Brand: "Nissan",
    Color: "BLUE",
    Year: 2004
}
const cars3 = { ...cars1, ...cars2 };
console.log(cars3);

Output:

{ Brand: 'Nissan', Color: 'BLUE', Year: 2004 }

Example 5: In this example, We will use the spread operator to split the string into an array of strings.

const car = "AUDI";
const a = [...car];
console.log(a);

Output: 

[ 'A', 'U', 'D', 'I' ]

Example 6: Here we will use the spread operator with Array Destructuring.

const numbers = [3, 5, 7, 8, 9];
// Here we assign a,b and c with 3,5 and 7, 
// the rest of the elements will all go to others
const [a, b, c, ...others] = numbers;
console.log(a);
console.log(b);
console.log(c);
console.log(others);

Output: 

3
5
7
[ 8, 9 ]