Shallow Copy and Deep Copy in JavaScript - Object Cloning

When working with objects and arrays in JavaScript, you’ll often need to copy or clone data but not all copies are same, thats where understanding Shallow Copy and Deep Copy in JavaScript helps.

In frontend interviews, this is a common topic because understanding how data is referenced in memory helps you debug unexpected behaviour in your web application.
In this post, Let’s learns Shallow copy and Deep copy in detail.

Table of Contents

1. Basic of Shallow Copy and Deep Copy
2. Understand Object Shallow Copy in JavaScript
3. Understand Object Deep Copy in JavaScript
4. Shallow Copy vs Deep Copy
5. Learn more

Basics of Shallow Copy and Deep Copy

In simple words:

• A shallow copy copies only the first level of the object and links the reference of nested levels.
• A deep copy copies everything, including nested objects at all the levels.

So, if the original object changes inside its nested levels, a shallow copy might still get affected but a deep copy stays completely independent.

Understand Object Shallow Copy in JavaScript with Example

A shallow copy means that you copy the top-level properties, but if any property is an object, it’s still linked to the original object

This happens because JavaScript objects are reference types, and it means they store memory addresses, not the actual value.

Example

Here is the quick example showing how shallow copy referencing to the nested original object.

const user = {
  name: "Anuj",
  address: {
    city: "Delhi",
    country: "India",
  },
};

// Create a shallow copy using spread
const shallowCopy = { ...user };

// Modify the nested object
shallowCopy.address.city = "Mumbai";

// Shallow copy still referencing to the original address
// That's why changes reflected to the original object.
console.log(user.address.city); 
// Output: "Mumbai"

Even though we changed shallowCopy.address.city, the original user object also changed.

That’s because the address object was copied by reference, not as a new object. 

Common ways to make a shallow copy:

1. Using the spread operator (...)

const shallowCopy = { ...user };

2. Using Object.assign()

Object.assign(shallowCopy, user);

Understand Object Deep Copy in JavaScript with Example

A deep copy creates a completely new copy of the object and its nested properties. Changes in the deep-copied object do not affect the original.

This is useful when you want to safely modify data without altering the original, such as managing React state, Redux data, or API responses.

Example

const user = {
  name: "Anuj",
  address: {
    city: "Delhi",
    country: "India",
  },
};

// Deep copy using JSON methods, Not the most optimal way
const deepCopy = JSON.parse(JSON.stringify(user));

// Modify the nested object
deepCopy.address.city = "Mumbai";

console.log(user.address.city); // Output: "Delhi"
console.log(deepCopy.address.city); // Output: "Mumbai"

This time, changing the nested property in deepCopy didn’t affect the original user object.

Common ways to make a shallow copy:

1. (Optimal Way) Using structuredClone() 

const deepCopy = structuredClone(user);

2. Using JSON.stringify()

const deepCopy = JSON.parse(JSON.stringify(user));

Shallow Copy vs Deep Copy

Let’s break down the differences one by one — this will help you clearly understand how both work and when to use which.

1. Definition

• Shallow Copy: Copies only the top-level properties of an object.
• Deep Copy: Copies everything, including all nested objects and arrays.

2. Nested Objects Handling

• Shallow Copy: The nested objects are still linked (by reference) to the original object. So, changing nested data in the copied object will also update it in the original one.
• Deep Copy: The nested objects are completely separated and independent. Changes made in one do not affect the other.

3. Memory Usage

• Shallow Copy: Uses less memory because it reuses references for nested objects.
• Deep Copy: Takes more memory since it creates new copies of all nested structures.

4. Performance

• Shallow Copy: Faster to create since it only copies one level.
• Deep Copy: Slightly slower because it needs to recursively copy every nested property.

5. When to Use

• Shallow Copy: Best for small or simple objects where nested changes don’t matter.
• Deep Copy: Ideal for complex data or when you want to protect the original data (like in React state updates).

6. Common Methods to implement

• Shallow Copy:
  • Using the spread operator - { ...obj }
  • Using Object.assign()
• Deep Copy:
  • Using JSON.parse(JSON.stringify(obj))
  • Using structuredClone()

Learn Next

1. Machine Coding Cheat Sheet
2. Frontend System Design Cheat Sheet
3. Promise polyfill in JavaScript
4. Promise.all polyfill in JavaScript
5. Best Polyfill resources to ace JavaScript Interview