Open In App

JavaScript Spread Operator

Improve
Improve
Like Article
Like
Save
Share
Report

The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array. 

The syntax of the Spread operator is the same as the Rest parameter but it works opposite of it. 

Syntax:

let variablename1 = [...value]; 

Note: To run the code in this article make use of the console provided by the browser.

Example 1: In this example, we are using the spread operator.

javascript




// spread operator doing the concat job
let arr = [1, 2, 3];
let arr2 = [4, 5];
 
arr = [...arr, ...arr2];
console.log(arr); // [ 1, 2, 3, 4, 5 ]


Output

[ 1, 2, 3, 4, 5 ]

Note: Though we can achieve the same result as the concat method, it is not recommended to use the spread in this particular case, as for a large data set it will work slower when compared to the native concat() method.

Example 2: In this example, we can see that when we tried to insert an element inside the array, the original array is also altered which we didn’t intend and is not recommended. We can make use of the spread operator in this case,

javascript




// changed the original array
let arr = ['a', 'b', 'c'];
let arr2 = arr;
 
arr2.push('d');
 
console.log(arr2);
console.log(arr);
//even affected the original array(arr)


Output

[ 'a', 'b', 'c', 'd' ]
[ 'a', 'b', 'c', 'd' ]

Example 3: In this example we are doing same as above code but with spread operator, so that original array does not get altered.

javascript




// spread operator for copying
let arr = ['a', 'b', 'c'];
let arr2 = [...arr];
 
console.log(arr);
// [ 'a', 'b', 'c' ]
 
arr2.push('d');
//inserting an element at the end of arr2
 
console.log(arr2);
// [ 'a', 'b', 'c', 'd' ]
console.log(arr);
 // [ 'a', 'b', 'c' ]


Output

[ 'a', 'b', 'c' ]
[ 'a', 'b', 'c', 'd' ]
[ 'a', 'b', 'c' ]

By using the spread operator we made sure that the original array is not affected whenever we alter the new array.

Expand: Whenever we want to expand an array into another we do something like this: 

Example 4: In this example, we want to expand an array into another

javascript




// normally used expand method
let arr = ['a', 'b'];
let arr2 = [arr, 'c', 'd'];
 
console.log(arr2);
// [ [ 'a', 'b' ], 'c', 'd' ]


Output

[ [ 'a', 'b' ], 'c', 'd' ]

Even though we get the content on one array inside the other one, actually it is an array inside another array which is definitely what we didn’t want. If we want the content to be inside a single array we can make use of the spread operator. 

Example 5: In this example, we want the content to be inside a single array we can make use of the spread operator. 

javascript




// expand using spread operator
 
let arr = ['a', 'b'];
let arr2 = [...arr, 'c', 'd'];
 
console.log(arr2);
// [ 'a', 'b', 'c', 'd' ]


Output

[ 'a', 'b', 'c', 'd' ]

Math: The Math object in javascript has different properties that we can make use of to do what we want like finding the minimum from a list of numbers, finding the maximum, etc. Consider the case that we want to find the minimum from a list of numbers, we will write something like this: 

Example 6: In this example, we want to find the minimum from a list of numbers

javascript




console.log(Math.min(1,2,3,-1)); //-1


Output

-1

Now consider that we have an array instead of a list, this above Math object method won’t work and will return NaN, like: 

Example 7: In this example, Math object method won’t work and will return NaN

javascript




// min in an array using Math.min()
let arr = [1,2,3,-1];
console.log(Math.min(arr)); //NaN


Output

NaN

When …arr is used in the function call, it “expands” an iterable object arr into the list of arguments In order to avoid this NaN output, we make use of a spread operator, like: 

Example 8: In this example, we make use of a spread operator In order to avoid this NaN

javascript




// with spread
let arr = [1,2,3,-1];
 
console.log(Math.min(...arr));
//-1


Output

-1

Example of spread operator with objects: ES6 has added spread property to object literals in javascript. The spread operator () with objects is used to create copies of existing objects with new or updated values or to make a copy of an object with more properties. Let’s take an example of how to use the spread operator on an object, 

Example 9: In this example, we are showing how to use the spread operator on an object

javascript




const user1 = {
    name: 'Jen',
    age: 22
};
 
const clonedUser = { ...user1 };
console.log(clonedUser);


Output

{ name: 'Jen', age: 22 }

Here we are spreading the user1 object. All key-value pairs of the user1 object are copied into the clonedUser object. Let’s look at another example of merging two objects using the spread operator, 

Example 10: In this example, we are merging two objects using the spread operator

javascript




const user1 = {
    name: 'Jen',
    age: 22,
};
 
const user2 = {
    name: "Andrew",
    location: "Philadelphia"
};
 
const mergedUsers = { ...user1, ...user2 };
console.log(mergedUsers);


Output

{ name: 'Andrew', age: 22, location: 'Philadelphia' }

The mergedUsers is a copy of user1 and user2. Actually, every enumerable property on the objects will be copied to the mergedUsers object. The spread operator is just a shorthand for the Object.assign() method but, there are some differences between the two.

We have a complete list of Javascript Operators, to check those please go through the Javascript Operators Complete Reference article.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads