What is the difference between shallow copy and deep copy in JavaScript?

Question

What’s the difference between shallow copy and deep copy in JavaScript?

Answer

A shallow copy copies only the top-level properties — nested objects still share references.
A deep copy duplicates everything recursively.

const original = { user: { name: 'Ghazi' } };
const shallow = { ...original };
const deep = structuredClone(original);

shallow.user.name = 'Ali';
console.log(original.user.name); // 'Ali' — reference shared

Deep copy creates a full clone, so changes in one don’t affect the other.

Real-World Example

When updating complex state in React or Redux, shallow copies can cause unintended mutations.

Quick Practice

Clone an object deeply using structuredClone() and verify that changing nested values doesn’t affect the original.

Summary

Shallow copy = one layer.
Deep copy = all layers.
Know the difference — it prevents silent bugs in state management.