What Is a Shallow Copy?

A shallow copy creates a new outer object, but nested objects still share the same reference.

Shallow Copy vs Deep Copy Explained Simply (JavaScript)

This means

top-level values are copied

nested objects are still linked in memory

Shallow Copy Example

const user1 = {
  name: "Piyush",
  address: {
    city: "Delhi"
  }
};
const user2 = { ...user1 };
user2.address.city = "Mumbai";
console.log(user1.address.city); // Mumbai
console.log(user2.address.city); // Mumbai

Even though user2 looks like a copy, both objects still share the same address reference.

Why This Happens

The spread operator copies only the first level.

Nested objects are copied by reference, not by value.

This behavior is intentional and important to understand.

Common Ways to Create a Shallow Copy

🧩 Spread operator

const copy = { ...obj };

🧩 Object.assign

const copy = Object.assign({}, obj);

🧩 Array spread

const copy = [...arr];

All of these create shallow copies.

What Is a Deep Copy

A deep copy creates a completely independent copy of the object, including all nested objects.

No memory is shared.

Changes made in one object never affect the other.

Deep Copy Example

const user1 = {
  name: "Piyush",
  address: {
    city: "Delhi"
  }
};
const user2 = JSON.parse(JSON.stringify(user1));
user2.address.city = "Mumbai";
console.log(user1.address.city); // Delhi
console.log(user2.address.city); // Mumbai

Now both objects are truly independent.

Visual Memory Understanding

Shallow copy looks like this

user1 ──► address ──► { city: "Delhi" }
user2 ──► address ──► { city: "Delhi" }

Deep copy looks like this

user1 ──► address ──► { city: "Delhi" }
user2 ──► address ──► { city: "Mumbai" }

Limitations of JSON Deep Copy

The JSON method works only when

there are no functions

there are no Dates

there are no undefined values

circular references are not present

Because of these limitations, it is not always safe.

Better Ways to Perform Deep Copy

Modern JavaScript provides safer options.

Using structuredClone

const deepCopy = structuredClone(obj);

This handles

nested objects

arrays

dates

circular references

Why This Is Critical in React

React depends on immutability.

If you mutate state accidentally

React may not re-render

bugs become hard to trace

performance suffers

That is why shallow vs deep copy knowledge is mandatory for frontend developers.

Interview Perspective

Interviewers often ask

difference between shallow and deep copy

why spread operator fails for nested objects

how React detects state changes

how to safely clone data

Clear understanding here strongly separates senior developers from juniors.

When to Use What

Use shallow copy when

data is flat

performance is critical

nested mutation is not needed

Use deep copy when

nested objects exist

immutability is required

safety is more important than speed


Final Advice from DSA With Piyush

If data behaves unexpectedly, always suspect shared references.

Once you understand copying deeply, JavaScript becomes predictable.