Spread Operator in JavaScript

Spread Operator in JavaScript

JavaScript 20-07-2021 Saheb Sutradhar

In this post we will learn what is spread operator in Javascript? How we can use it ? and Where we should use?


What is spread operator in Javascript ?

Spread Operator allows you to spread out the elements of an iterable object such as Array.


Syntax : [ ... Array ]


When to use spread operator ?

Suppose you have a array and you want to clone it.

let x  =  [1,2,3,4,5];
let y = x;

The above code is not cloning , x sets a reference to y , if the value of x gets changed the the value of y will also get changed. 

There are many ways to can clone array in javascript

let x = [1,2,3,4,5];
let y = Object.assign([],x);


//Output : [1,2,3,4,5]

In the above example we have use the Object constructor's assign method where we are creating a empty array and then assigning the elements form x. 

Cloning using spread operator:

let x = [1,2,3,4,5];
let y = [...x]

// Output:[1,2,3,4,5]

[...x]  it means spreading the elements of x  inside a empty array.


Merge two array into one using spread operator:

let x=[1,2,3];
let y=[4,5,6];
let z= [...x,...y];

//Output : [ 1, 2, 3, 4, 5, 6 ]
...x = 1,2,3 
...y = 4,5,6 

[...x,...y] = [1,2,3,4,5,6]

Another way we can merge two arrays , by using concat() method.

let x=[1,2,3];
let y=[4,5,6];
let z= x.concat(...y);
// Output : [ 1, 2, 3, 4, 5, 6 ]


Object Cloning using spread operator : 

Object is also iterable so we can use spread operator in object . Below example let's see how we can clone a object using spread operator.

let site = {
  cat : "technical"
let clonesite={...site};

//Output: { name: 'codelearningpoint', cat: 'technical' }


Merge two objects using spread operator : 

We can use spread operator to merge two or more than two objects ,  But while merging the common property of objects will get overwrite.

In below example user1 and user2 both the objects are having name common property so in the Users clone object name property got added but only one time and name property took the latest value from the last object which is user2

const user1 = {
    name: "user1",
    location: "India",
const user2 = {
    name: "user2",
    location: "USA",
const Users = {...user1, ...user2};

//Output : { name: 'user2', location: 'USA', age: 28 }



I hope this article is helpful for you , i am very glad to help you thanks for reading



Related Posts

Card image cap

Math Floor Javascript Method

JavaScript 16-07-2021 Saheb Sutradhar

math.floor javascript method takes a number type value as parameter and returns the round off of that value. The return value will be the nearest downward integ ...

Card image cap

Remove duplicates from array in javascript

JavaScript 24-07-2021 Saheb Sutradhar

In this post i will show you how to remove duplicates from array in javascript.We can use filter() method to remove duplicates from array , if the index of the ...

Card image cap

Next and Previous Buttons in Javascript with Demo

JavaScript 27-07-2021 Saheb Sutradhar

In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is  image container and next, pre ...

Card image cap

Image size validation in javascript example

JavaScript 28-07-2021 Saheb Sutradhar

In this article you will learn Image size validation in javascript with example , along with the size validation you will learn how to validate image mime type. ...

Card image cap

How to get multiple checkbox value in javascript

JavaScript 30-07-2021 Saheb Sutradhar

In this post you will learn how to get multiple checkbox value in javascript . In many application you will find this kind of feature where we allow user to sel ...

Card image cap

Multiple checkbox validation in javascript

JavaScript 02-08-2021 Saheb Sutradhar

In your application you can use single check box or you can use multiple checkbox . Below examples will help you to understand multiple checkbox validation in j ...