ES6 Spread Operator
Last Updated :
14 Apr, 2023
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.
Javascript
const cars1 = [ "AUDI" , "BMW" , "TATA" , "MERCEDES" ];
const cars2 = [...cars1];
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.
Javascript
const cars1 = [ "AUDI" , "BMW" , "TATA" , "MERCEDES" ];
const cars2 = [ "NISSAN" , "TOYOTA" ];
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.
Javascript
const cars1 = {
Brand: "BMW" ,
Color: "RED"
}
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.
Javascript
const cars1 = {
Brand: "Toyota" ,
Color: "RED"
}
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.
Javascript
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.
Javascript
const numbers = [3, 5, 7, 8, 9];
const [a, b, c, ...others] = numbers;
console.log(a);
console.log(b);
console.log(c);
console.log(others);
|
Output:
3
5
7
[ 8, 9 ]
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...