by Sai gowtham

How to Clone an Object in JavaScript (without reference)

In this tutorial, we are going to learn about two different solutions to copy an object in JavaScript with the help of examples.

Object.assign method

The Object.assign() method is used to copy all enumerable values from a source object to the target object.

Example:

const obj = {a:1,b:2,c:3};

const clone = Object.assign({},obj);

console.log(clone); // {a:1,b:2,c:3};

In the above code, we have passed two arguments to the Object.assign() method the first one is target object and the second one is source object.

Spread Operator (…)

In es6, we have spread operator which is also used to clone an object.

const obj = {a:1,b:2,c:3};

const clone = {...obj};

console.log(clone); // {a:1,b:2,c:3};

Note: These above two methods are only used for shallow copying of objects but not for deep copying.

Shallow copying vs Deep copying

Shallow copying means it only copies the normal object values but nested values still use the reference to an original object.

Example: We are using the spread operator to shallow clone an object.

const obj = {a:1,b:2,c:{d:3}};

const shallowClone = {...obj};

obj.c.d = 34; // updates the d property value

console.log(obj); // {a:1,b:2,c:{d:34}}

console.log(shallowClone); // {a:1,b:2,c:{d:34}}

In the above code, we have updated the obj.c.d property value to 34 but our shallowClone.c.d property value is also updated because it’s still holding the reference to an original object obj.

Deep copying an Object

To deep copy an object we need to use JSON.parse() and JSON.stringify() methods.

Example:

const obj = {a:1,b:2,c:{d:3}};

const deepClone = JSON.parse(JSON.stringify(obj));

Now if we change obj.c.d property value the deepClone object property value remains unchanged because there is no reference to the original object.

obj.c.d = 35;

// d value is changed
console.log(obj); // {a:1,b:2,c:{d:35}}

// d value remains unchanged because there is no reference
console.log(deepClone); // {a:1,b:2,c:{d:3}}

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY