Introduction
In this tutorial, you will learn the concept of Deep Copy vs Shallow Copy in JavaScript
When working with objects and arrays in JavaScript, copying data can be tricky. Developers often confuse shallow copy and deep copy.
What is a Shallow Copy?
A shallow copy creates a new object, but nested objects are still referenced from the original object.
This means if you modify a nested property, it will affect both the original and copied objects.
Example
const original = {
name: "John",
address: { city: "Delhi" }
};
const copy = { ...original };
copy.address.city = "Mumbai";
console.log(original.address.city); // Mumbai
Explanation
The top-level object is copied, but the nested address object still points to the same memory reference.
What is a Deep Copy?
A deep copy creates a new object, and it is a completely independent copy of the object.
If you change the copied object, then it does not affect the original object.
Example
const original = {
name: "John",
address: { city: "Delhi" }
};
const copy = JSON.parse(JSON.stringify(original));
copy.address.city = "Mumbai";
console.log(original.address.city); // Delhi
Explanation:
All nested objects are duplicated, so the copied object is fully independent.
Shallow Copy vs Deep Copy
| Feature | Shallow Copy | Deep Copy |
|---|---|---|
| Copy Level | Only first level | All nested levels |
| References | Nested objects share reference | Completely independent |
| Performance | Faster | Slower |
| Memory Usage | Less memory | More memory |
| Example Methods | Spread operator, Object.assign() | JSON.parse(JSON.stringify()), structuredClone() |
How to create a Shallow Copy?
You can create a shallow copy through below methods
1 Spread Operator
const copy = { ...obj };
2 Object.assign()
const copy = Object.assign({}, obj);
How to create a Deep Copy?
You can create a deep copy through below methods.
1 JSON Method
const copy = JSON.parse(JSON.stringify(obj));
2 structuredClone()
const copy = structuredClone(obj);
When to Use Shallow Copy or Deep Copy?
Use Shallow Copy when:
- Objects do not contain nested objects.
- Performance is important.
Use Deep Copy when:
- Objects contain nested structures.
- You want completely independent copies.
Real Life Example
1. Shallow Copy – Shared Reference Problem
Suppose you are filling a form in a web application. The application copies your profile data to create an editable version.
let user = {
name: "John",
address: {
city: "Delhi"
}
};
let copyUser = { ...user }; // Shallow copy
copyUser.address.city = "Noida";
console.log(user.address.city); // Noida
Explanation:
- In the above example, the address object is still shared between both objects.
- So when the city is changed in copyUser, it also changes in the original user.
2. Deep Copy – Independent Objects
suppose the application creates a completely independent copy of the user profile before editing.
let user = {
name: "John",
address: {
city: "Delhi"
}
};
let copyUser = JSON.parse(JSON.stringify(user)); // Deep copy
copyUser.address.city = "Noida";
console.log(user.address.city); // Delhi
Explanation:
- Here, the copied object is fully independent.
- Changing copyUser will not affect the original object.
Interview Questions
Q 1: What is a shallow copy in JavaScript?
Q 2: What is a deep copy in JavaScript?
Q 3: What happens when you modify a nested object in a shallow copy?
Q 4: How to create a shallow copy in JavaScript.
Q 5: How can you create a deep copy in JavaScript?
Conclusion
Deep Copy and Shallow copy in JavaScript are important when working with objects and arrays.
A shallow copy only duplicates the top-level structure while keeping references to nested objects, which can lead to unexpected changes in the original data.
A deep copy creates a fully independent copy of the object, ensuring that modifications do not affect the original structure.