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 give 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 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 that problem is.

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 to use the spread operator, and the second way is to use the Object.assign() method. Whenever we copy any object by using the spread operator or the Object.assign() method, then the value of the object gets copied.

Let's 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 that I have created an object named obj and also created a variable named user. In the user variable, we have assigned the object, and after that, I am changing the name property of the user. The name property of the 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 the 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 that 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 of these terms very well to you. I hope you have understood.

Keep learning and keep exploring.