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
|
|
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
What Is JavaScript Callback And How Does It Work?