DEV Community

Cover image for Shallow Copy VS Deep Copy In Java Script : Explained in easiest way
Yogesh Pant
Yogesh Pant

Posted on

Shallow Copy VS Deep Copy In Java Script : Explained in easiest way

#javascript #webdev

What is copying and how does it Work in JS?

In JavaScript, Copying is the process of making duplicate of of an existing values like integer, string, objects and function.
However this is not so easy and straightforward as it looks. It all depends upon either you are copying primitive data types or non-primitive data types. If you are copying a primitive data type then it would be working with primary value but in the case of non-primitive data types it work with referenced values.

Lets see how it works with primary value and the referenced values

Primitive Value (Copy By Value)

For primitive data types, there it is copy by value.
Let me show this to you with the help of an example in code block by just simply declaring an integer "a" and copying its value in another integer "b".

let a = 10;
let b = a;     // Copying the value

b = 20;        // Changing b does NOT affect a
console.log(a); // Output: 10
Enter fullscreen mode Exit fullscreen mode

You can see that changing value of b does not affecting a. This all happens because JavaScript creates a completely new independent copy of the actual values in the memory.

On other hand primitive data types consist of integers, boolean values,strings, symbols, bigInt and null.

Non-Primitive Value (Copy By Reference)

For non- primitive data types, there it is copy by reference.
Let it make clear with example of non-primitive data type object.

let original = { name: "YOO" };
let copy = original; // Copying the reference!

copy.name = "NEW"; 

console.log(original.name); // "NEW" -> Oops! The original changed too.
Enter fullscreen mode Exit fullscreen mode

In above code block there it is a object name original that is stored somewhere in memory, and variable hold a pointer(reference) to that location.
If you are copying the variable you are just copying the pointer, not the actual referenced value.
So, when you are changing the value in copied item it will change the actual value in it.

To solve this problem here comes the concept of Shallow Copy and Deep Copy:

Here comes the golden rule to understand the difference between shallow copy and deep copy.

  • A shallow copy copies the references.
  • A deep copy copies the values.

Its simple, let break it through analogy of pizza :

-- > For shallow copy it is same as you and your friend is sharing a same pizza. Whenever you and your friend eats pizza it shrinks.

-- > For deep copy it is like you both owns different pizza. If your friend eats a slice, his pizza gets shrinks your remains untouched and same goes with your friend's pizza when you eats your pizza, his pizza remains untouched.

And that's it , this is full concept that revolves around shallow copy and deep copy.
Now lets get it through some examples of javascript.

Shallow Copy in JavaScript:

A shallow copy duplicates the top level of values. If there are some nested values it still copies it but only the referenced values.

  • Using Spread Operator(...) - This is one of the most common techniques used to make shallow copy in JavaScript. 
let original = { name: "YOO",
    age: 22,
    gender: "Male"
 }; // Original named object.

let copyOriginal = { ...original}  // making a shallow copy of original named object using spread operator.

console.log(copyOriginal.name) // Output --> YOO
Enter fullscreen mode Exit fullscreen mode

But there is A Shallow trap, whenever it comes a nested values and copying through spread operator those nested values will share exactly same references. So changing these referenced values will also lead to the changes in actual values.

To solve this problem here comes the concept of Deep Copy, lets learn this through some examples of javaScript.

Deep Copy In JavaScript:

Deep Copy in JavaScript creates a differently new object to copy the actual values. Changes done in values of new copied objects are not displayed in the actual values.
Let us see some methods to create a deep copy in JavaScript.

  • Using built in function structuredClone() : StructuredClone() is a built in javaScript function that is available in all modern day browser and Node.js. It handles deep nested structure perfectly. It is built into the runtime(browser and node.js) and handles most complex data types smoothly. 
let Teas = {            // Create a object named as tea with some values inside it
    name: "Lemon tea",
    caffine: "No",
    tasty: "Yes"
}

let newTeas = structuredClone(Teas);  // Creating a deep copy of teas using structured clone method 

newTeas.name = "Mango Tea";
console.log(Teas);  //Output --> { name: 'Lemon tea', caffine: 'No', tasty: 'Yes' }
console.log(newTeas); //Output --> { name: 'Mango Tea', caffine: 'No', tasty: 'Yes' }
Enter fullscreen mode Exit fullscreen mode

PROS AND CONS

  • Pros is that it is fast, native and correctly handles Date ,RegExp ,maps and circular references.
  • Cons is that it is will throw error when an object contain function or DOM nodes.
  • Using JSON.parse(JSON.stringify()): Before structuredClone() developers uses this trick to create a deep copy of object. It converts the object into a JSON string, then parse it back into brand-new object. 
const original = { name: "Yo!!", nested: { id: 12 } };

const clone = JSON.parse(JSON.stringify(original));
Enter fullscreen mode Exit fullscreen mode

Why we should not use it?
The method strips out the data type that are not supported by JSON. IF your object contains date , undefined , Null, Map, Set , or Infinity, they would either be lost or may be get corrupted or the value can be converted to NULL.

This is all about Deep Copy and Shallow Copy. Hope this gets you how and when to use shallow and deep copy method. JavaScript is full of such twist and turns.

Top comments (0)