spread operator<\/a> (…) is one of the easiest ways to clone objects in JavaScript. It creates a new object reference. Here is its syntax.<\/p>\n\n\n\ncloned_object = {...original_object}<\/pre>\n\n\n\nHere is an example to use spread operator. Let us say you want to clone the following JS object.<\/p>\n\n\n\n
var user = {
name: 'John',
age: 15,
city: 'NYC',
marks:{english:50,maths:49}
}<\/pre>\n\n\n\nHere is how to clone above object with spread operator and display the values of cloned object.<\/p>\n\n\n\n
new_user = {...user};
console.log(new_user); \/\/ { name: 'John', age: 15, city: 'NYC',marks:{english:50,maths:49} }<\/pre>\n\n\n\nYou will see that the cloned object contains same properties as the original object. But, please note, it is only a shallow copy and not a deep copy.<\/p>\n\n\n\n
Let us change the name property of new object and see if it changes the name property in original object also.<\/p>\n\n\n\n
new_user.name='Jane';
console.log(new_user); \/\/ { name: 'Jane<\/strong>', age: 15, city: 'NYC',marks:{english:50,maths:49} }
console.log(user); \/\/ { name: 'John<\/strong>', age: 15, city: 'NYC',marks:{english:50,maths:49} }<\/pre>\n\n\n\nAs you can see, the changes made to one of the non-object properties in cloned object do not affect the original object. <\/p>\n\n\n\n
But if you change the inner object marks, it will also affect the original object. Let us change the value of english property of marks object.<\/p>\n\n\n\n
new_user.marks.english=45
console.log(new_user);
console.log(user);<\/pre>\n\n\n\nYou will see the following output indicating that the marks.english value has changed in both objects.<\/p>\n\n\n\n
{
name: 'Jane',
age: 15,
city: 'NYC',
marks: { english: 45<\/strong>, maths: 49 }
}
{
name: 'John',
age: 15,
city: 'NYC',
marks: { english: 45<\/strong>, maths: 49 }
}
<\/pre>\n\n\n\nSpread operator can also be used to merge two or more arrays and objects, as shown below. Here is an example to combine two objects into a new object, and to combine two arrays into a new array.<\/p>\n\n\n\n
object2 = {...object1, ...object2};
array3 = {...array1, ...array2};<\/pre>\n\n\n\n