Difference between Shallow Copy and Deep Copy in JavaScript

Difference between Shallow Copy and Deep Copy in JavaScript

·

4 min read

In this blog, you’ll learn about shallow copy and deep copy in javascript with the help of examples.

In JavaScript, the object is copied in two ways, the first way is shallow copy and the second way is deep copy. Before understanding shallow copy and deep copy, let's understand how to make a copy of an object.

let's take an example of how to create a copy of an object

const obj = {
    name:"sonu",
    lastName:"sahu" 
}

const user = obj;

console.log(obj); // {name: 'sonu', lastName: 'sahu'}
console.log(user) // {name: 'sonu', lastName: 'sahu'}

Now, look at the above code I have created an object named obj and also created a variable named user. In the user variable, I have assigned the obj object. So in this way, we can copy any object in javascript. but when we copy an object like this we have a problem, let's find out what is that problem.

Suppose, in the below code I am changing the name property of the user, but the name property has also changed in the obj object because objects are reference types. This means any value you store either in the clone or original object points to the same object or memory location.

let's take an example :

const obj = {
    name:"sonu",
    lastName:"sahu"
}

const user = obj;
user.name = "deepu";

console.log(obj); // {name: 'deepu', lastName: 'sahu'}
console.log(user) // {name: 'deepu', lastName: 'sahu'}

So whenever we want to change any property we do not copy the object in this way because it also changes the properties of our original object. So here we use the shallow copy.

Shallow Copy

A shallow copy does not change the properties of the original object. We can create a shallow copy in two different ways, the first way is we use the spread operator and the second way is Object.assign() method. Whenever we copy any object by using the spread operator or Object.assign() method then the value of the object gets copied.

Lets us take an example to understand better:

Shallow copy by using the spread operator :

const obj = {
    name:"sonu",
    lastName:"sahu"  
}

const user = {...obj} //spread operator
user.name = "Deepu";

console.log(obj); // {name: 'sonu', lastName: 'sahu'}
console.log(user) // {name: 'Deepu', lastName: 'sahu'}

Shallow copy by using the Object.assign() method :

const obj = {
    name:"sonu",
    lastName:"sahu"  
}

const user = Object.assign({},obj)
user.name = "Deepu";

console.log(obj); // {name: 'sonu', lastName: 'sahu'}
console.log(user) // {name: 'Deepu', lastName: 'sahu'}

You can see in the above code I have created an object named obj and also created a variable named user. In the user variable, we have assigned the obj object and after I am changing the name property of the user. the name property of the obj object has not changed Because here the actual value of the object is copied. So A shallow copy does not change the properties of the original object.

Now come to the deep copy.

Let us understand why we need a deep copy

const obj = {
    name:"sonu",
    lastName:"sahu",  
    Address:{
        city:"Gurugram",
    }
}

const user = {...obj}
user.Address.city ="Noida";
console.log(obj); // Address:{city: 'Noida'}
console.log(user); // Address:{city: 'Noida'}

In the above code, I have created one object and inside the same object I have created another nested object So if I change the city name property inside the Address object then the city name property is changing in both objects because whenever we create another object inside one object its reference is copied. So here we used deep copy.

lets us understand deep copy.

Deep Copy

A deep copy creates a completely new object with all new references to the original object's properties. The properties of the original object are copied to the new object. To create a deep copy in JavaScript, you can use JSON.parse() and JSON.stringify() methods.

const obj = {
    name:"sonu",
    lastName:"sahu",  
    Address:{
        city:"Gurugram",
    }
}

const user = JSON.parse(JSON.stringify(obj))
user.Address.city ="Noida";
console.log(obj); // Address:{city: 'Gurugram'}
console.log(user); // Address:{city: 'Noida'}

You can see in the above code JSON.stringify() converts the original object to a JSON-formatted string, and JSON.parse() parses that string to create a new object. This process creates a completely separate object. In other words, any changes made to the deep copy will not affect the original object.

This is the main difference between these two. I have explained both these terms very well to you. I hope you have understood.

Keep learning and keep exploring 🔥