The JS Bifrost — Shallow or Deep Copy?

Copying data is all about values, references and memory allocations

Published in

Globant

5 min readSep 3, 2020

Welcome to The JS Bifrost, your pathway to rock solid foundation for a God-level JavaScript. This is the third article in the series which talks about #objects #javascript #shallowCopy #deepCopy

Before going forward, let us understand Objects and references in JavaScript.

What is an Object??

Object is a container of properties associated as key and value pairs. The values in an Object can be functions that are commonly referred to as methods.

Object is created only once in JavaScript, and we can refer Object by creating a reference to Object.

What is Reference??

Reference is nothing but the variable which refers to a memory location where a created Object is stored.

Example :

let student = {roll_no: 10,name: “Anna”}

We can refer above Object by using student reference. So we can say student is a reference which refers the Object { roll_no:10, name: “Anna” }.

Now, we know how to deal with Object and reference in JavaScript, let us see how to copy data to and from Object.

There are 2 methods of copying data from Object

1. Shallow Copy

2. Deep Copy

You might think that copying data simply means creating a replica of existing data, that’s it !!!

But NAY :( there’s a lot more to it.
So what is it ???
Shallow Copy? Deep Copy?

Shallow Copy VS Deep Copy

In a below diagram, you can see clear difference between shallow copy and deep copy.

In shallow copy, the original Object and cloned Object point to the same referenced Object or same memory location. Comparatively, in deep copy, original Object and cloned Object point to different memory locations.

In the above picture, we can see actual memory allocation for the original and cloned Object. Let’s consider p is the original Object and q is the cloned reference.

In shallow copy, original Object (p) and copied reference (q) are pointing to the same memory location(100). That’s why both references will modify the same data.

In a deep copy, data of the original Object(p which is at 100 memory location) gets copied into cloned reference(q) with a separate memory location(101). Another new reference gets created in memory(that is q). Modification of any Object data won’t affect one another.

Whatever we saw until now was just the tip of the iceberg. Let's dig into each one of them deeper.

Shallow Copy

In Shallow Copy, original reference and copied reference points to the same memory location. Changes on copied reference reflect on the original reference and vice versa.

For any given Object, the first level of properties gets copied and the deeper(nested) level of properties gets referenced.

Let us see how to implement a shallow copy.

There are multiple ways to implement a shallow copy, let us see one using the spread operator.

Using Spread(…) Operator

The Spread operator is used to make a copy of an existing Object — the ES6 way of a shallow copy.

Example

In the above snapshot, the student is pointing to the original Object and newStudent is a new reference.

newStudent = { ...student }

The above statement copies all values from student and nested Object references. Now, newStudent.address will point to same memory location where student.address is pointing and same copy of other variables created.

When we modify the data of newStudent.address variable, then the original student.address will get modified.

Object.assign() is also used to achieve shallow copy.

Deep Copy

In Deep Copy, an exact replica of the original Object is created in memory with new reference. So modifications on one Object doesn’t affect its copied Object and vice versa.

Copied references get disconnected from original references.

Let us see how to implement a deep copy.

Using JSON.parse() and JSON.stringify() methods

A very simple and efficient way of doing deep copy is JSON.parse(JSON.stringify(object)).

Example

In the above example, newStudent is the copy of student reference, but they are placed at different locations in memory. That’s why when we are modifying any reference, it won’t affect the other one.

_.cloneDeep() is also used for deep copy. For this, we need to import lodash library or specific function.

As of now, we have seen What is shallow copy and deep copy, How it works, and it’s implementation.

Still, confused between Shallow copy and Deep copy??

No worries…

Let us see a simple real-life example related to shallow copy and deep copy.

For simple understanding, we can keep in mind that Shallow copy is looking ourselves in the mirror(you are Object and replica in mirror can be a reference).

Consider twin brothers/sisters. They are a perfect example of Deep Copy. Twins are copies of each other but they are different in real life as original and copied Objects in memory😀.

Now,let's summarise what we learnt till now…

Difference Between Shallow Copy and Deep Copy

Closing Thoughts

Well, it is difficult to decide which one is the optimal choice as it completely depends on the requirements. But, as we know how important data is, we have to make a cautious decision while copying Objects in Javascript.

I hope, this article helps you to understand the differentiation of Shallow Copy and Deep Copy.

Thanks for Reading!!…

Watch out our space ‘The JS Bifrost’ for decoding Javascript the Globant way.

Cleaner Code with JavaScript functions

Understanding Pure and Higher-Order function to write state-of-the-art code!

medium.com

The JS Bifrost — Nullish Coalescing (??) Operator

what-why-how of nullish coalescing operator along-with chaining and logical operations