Swastik Yadav

S Y

Navigate back to the homepage
Subscribe

Shallow cloning vs Deep cloning

Swastik Yadav
June 25th, 2021 · 1 min read

Hello Everyone,

In this post we will explore the difference between shallow and deep cloning and we will see what are some pitfalls with shallow cloning.

Before moving on, you should check out my last post on copy by value vs copy by reference, it will set you up to understand this one.

The shallow clone

A shallow clone means that certain (sub)-values are still connected to the original variable (references to the same point in memory).

For instance:

1let me = {
2 name: "Swastik",
3 age: 22,
4 gender: "Male",
5 address: {
6 house: 325,
7 street: 14,
8 city: "NewDelhi",
9 }
10}
11
12let myShallowClone = {...me};
13
14console.log(me.name, myShallowClone.name, me.address.city, myShallowClone.address.city);
15// Swastik, Swastik, NewDelhi, NewDelhi
16
17me.name = "Yadav";
18me.address.city = "Bihar";
19
20console.log(me.name, myShallowClone.name, me.address.city, myShallowClone.address.city);
21// Yadav Swastik Bihar Bihar

The pitfall with shallow copy

  • The change in me.name does not affect the myShallowCopy.name.
  • But the change in me.address.city also changes myShallowCopy.address.city because nested objects are only pointers / references.

The deep clone

A deep clone means that all values of new variable are copied and disconnected from the original variable. Changing me.address.city should not affect myShallowCopy.address.city.

One way to deep clone nested object is to manually copying all nested objects.

For instance:

1let me = {
2 name: "Swastik",
3 age: 22,
4 gender: "Male",
5 address: {
6 house: 325,
7 street: 14,
8 city: "NewDelhi",
9 }
10}
11
12let myManualDeepClone = {...me, address: {...me.address}};
13
14me.address.city = "Bihar";
15
16console.log(me.address.city, myManualDeepClone.address.city);
17// Bihar, NewDelhi

But what if you don’t want to copy all your nested objects manually? We can simply stringify our object and parse it right after.

For instance:

1let me = {
2 name: "Swastik",
3 age: 22,
4 gender: "Male",
5 address: {
6 house: 325,
7 street: 14,
8 city: "NewDelhi",
9 }
10}
11
12let myDeepClone = JSON.parse(JSON.stringify(me));
13
14me.address.city = "Bihar";
15
16console.log(me.address.city, myDeepClone.address.city);
17// Bihar, NewDelhi

Note: There is no pitfalls with cloning primitive datatypes, because they are by default refers to different points in memory.


So, I hope that now the difference between shallow and deep cloning is clear. if you found this post helpful, please do share and subscribe to my newsletter below or here.

Thank You!

More articles from Swastik Yadav

Copy by value vs copy by reference

Primitive values are copied by value and Objects are copied by reference. In this post we will explore what that means.

June 18th, 2021 · 1 min read

Difference between for-of and and for-in loop

Let's clear the confusion between for of and for in loop once and for all.

June 18th, 2021 · 1 min read

Become a better full-stack developer in 10 minutes a week.

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.



By subscribing, you agree with Revue’s Terms and Privacy Policy.
© 2021 Swastik Yadav
Link to $https://twitter.com/swastikJsDevLink to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastik-yadav-6386b71b5/Link to $https://www.youtube.com/channel/UCHs73qDeimVFGTa-MzjtnLA