Understand Shallow And Deep Copy In JavaScript
Photo: Google

Understand Shallow And Deep Copy In JavaScript

Understanding shallow and deep copy in JavaScript is very important. In this tutorial, we will learn about what is a shallow and deep copy in JavaScript. First of all, what is a copy? In day to day programming, we store values in variables. Making a copy means that you initiate a new variable with the same value(s).

When you change the copy, you expect the original thing to stay the same, whereas the copy changes. There are two ways of copying in JavaScript – 1) Shallow and 2) Deep Copy

What is shallow copy and deep copy in JavaScript?

In JavaScript, there are two ways to copy the objects. These are the following:

Shallow copy –– When we copy a new object from the old object, then this new object is also pointing towards the same memory reference of the old object. This lowers memory usage as well. Both new and old objects are accessing the same memory location.

For example, a shallow copy makes a copy of the reference to X into Y. So, both the X and Y point to the same memory location.

Deep copy–– Deep copy a new object with a new memory location. This memory location references to this new object and its contents. Since a new memory location is created, it increases memory usage.

For example, a deep copy makes a copy of all the members of X, creates a new memory location for Y and then assigns the copied members to Y. So, both are pointing to different memory locations.

Let’s take an example

Let me explain this by example.

Shallow Copy

Here is the result.

In this example, we created a car object and copy it into another object duplicateCar using the shallow copy. Now, I changed the color of duplicateCar object to red, then our original car object color also changes to red color. This means that, we are losing the original data as well.

This is how shallow copy works. Here point to be noted that we are not creating two objects, it is only one object with two memory references. So, if we change the value of any object, it will reflect changes in other objects as well.

Sometimes, shallow copy becomes problematic, since we expect the changes only in the copied object, not the original ones. This may lead to an error without your knowledge.

A shallow copy of the object can be done using object.assign() method in javascript.

We have made a copy of obj. Let’s see if immutability exists:

In the code above, we changed the value of the property 'b' in objCopy object to 89 and when we log the modified objCopy object in the console, the changes only apply to objCopy.

The last line of code checks that the obj object is still intact and hasn’t change. This implies that we have successfully created a copy of the source object without any references to it.

Deep Copy

Let’s see how deep copy works. We will now create the same object by using the properties from the original car object.

This is an example of deep copy. We are assigning each property of car object to properties of duplicateCar object. Now, if you change any property of duplicateCar object, it won’t affect the original car object.

Below is the complete example of creating object using deep copy.

I commented on the second line and created duplicateCar using properties assignments.

We also changed the color property of duplicateCar object, and there is no change in the original car object.

A deep copy of the object can be done using JSON.parse(JSON.stringify(object));

Conclusion

Copying objects in JavaScript can be quite daunting especially if you’re new to JavaScript and don’t know your way around the language. Hopefully this article helped you understand and avoid future pitfalls you may encounter copying objects. 

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Further Reading

Object Mutation In JavaScript

What Is JavaScript Callback And How Does It Work?

Remove An Item From The Array Using JavaScript Splice()

Add An Item To An Array Using JavaScript Splice()

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: