Shallow Copy vs Deep Copy: What Is the Difference?
Learn the real difference between shallow and deep copies in JavaScript, why nested references leak, and how structuredClone fixes it.
Expected Interview Answer
A shallow copy duplicates only the top-level properties of an object or array, so nested objects are still shared by reference with the original, while a deep copy recursively duplicates every nested level so the two structures share no references at all.
When you use spread syntax, Object.assign, or Array.prototype.slice, you get a shallow copy: primitive values at the top level are copied by value, but any property whose value is itself an object or array still points to the exact same underlying object as the source. Mutating that nested object through the copy therefore also mutates it in the original, which is a common source of subtle bugs. A deep copy walks the entire structure recursively, creating brand-new nested objects and arrays at every level, so mutating the copy never touches the original. In modern JavaScript, structuredClone performs a true deep clone (including cycles and many built-in types), while JSON.parse(JSON.stringify(x)) is a common but lossy alternative that drops functions, undefined, Dates become strings, and cannot handle circular references. Choosing shallow vs deep is a tradeoff between performance and correctness — shallow copies are cheap but only safe when nested data will not be mutated or is intentionally shared.
- Shallow copies are fast and cheap for flat data with no nested mutation
- Deep copies guarantee full isolation, preventing accidental shared-reference mutation
- structuredClone gives a native, spec-correct deep clone including cycles
- Understanding the distinction prevents a whole class of “mutating the original by accident” bugs
AI Mentor Explanation
A shallow copy is like photocopying a scorecard sheet but leaving the attached player-stats booklet as the exact same physical booklet clipped to both copies. If someone scribbles a new average into that shared booklet, it changes on both scorecards at once, because there was only ever one booklet. A deep copy instead photocopies the sheet AND prints a brand-new booklet for the copy, so edits to one never touch the other. That difference — sharing the nested booklet versus duplicating it entirely — is exactly shallow versus deep copying in JavaScript.
Step-by-Step Explanation
Step 1
Identify nested references
Check whether the object/array has properties that are themselves objects or arrays.
Step 2
Choose the copy strategy
Use spread/Object.assign for flat data; use structuredClone or a recursive clone for nested data.
Step 3
Verify reference independence
Mutate a nested property on the copy and confirm the original is unaffected.
Step 4
Handle edge cases
Account for functions, Dates, Maps/Sets, and circular references, which naive JSON-based cloning breaks.
What Interviewer Expects
- Clear articulation that shallow copy only duplicates the top level
- Understanding that nested objects remain shared by reference in a shallow copy
- Knowledge of structuredClone as the modern deep-clone mechanism
- Awareness of JSON.parse(JSON.stringify()) pitfalls (functions, Dates, cycles)
Common Mistakes
- Assuming spread syntax ({ ...obj }) always produces a fully independent copy
- Using JSON.parse(JSON.stringify()) without knowing it drops functions and breaks on circular refs
- Deep-cloning everything by default even when a shallow copy would be safe and faster
- Not testing nested mutation to verify the copy is actually independent
Best Answer (HR Friendly)
“A shallow copy duplicates the outer layer of an object but any nested objects inside are still the same shared objects as the original, so changing them affects both. A deep copy makes a completely independent duplicate all the way down, so nothing you change in the copy ever touches the original.”
Code Example
const original = { name: 'Alice', address: { city: 'NYC' } }
// Shallow copy: top level is new, nested object is SHARED
const shallow = { ...original }
shallow.address.city = 'LA'
console.log(original.address.city) // 'LA' -- original mutated too!
// Deep copy: fully independent nested structures
const deep = structuredClone(original)
deep.address.city = 'Chicago'
console.log(original.address.city) // still 'LA' -- unaffectedFollow-up Questions
- Why does JSON.parse(JSON.stringify(obj)) fail on circular references?
- How would you deep clone an object containing functions or Dates correctly?
- What is structural sharing and how do libraries like Immer use it differently from deep cloning?
- When is a shallow copy actually the correct and preferred choice?
MCQ Practice
1. What happens to nested objects when you shallow copy with { ...obj }?
Spread syntax only copies the top-level properties; nested object references are shared.
2. Which built-in JavaScript function performs a true deep clone including cycles?
structuredClone is a native deep-clone algorithm that also supports circular references.
3. Why is JSON.parse(JSON.stringify(obj)) a risky deep-clone technique?
JSON serialization is lossy for many JS types and cannot represent circular structures.
Flash Cards
What does a shallow copy duplicate? — Only the top-level properties; nested objects are shared by reference.
What does a deep copy duplicate? — Every nested level recursively, so no references are shared.
Modern native deep-clone API? — structuredClone(value).
Main risk of JSON-based deep clone? — Loses functions/undefined, mangles Dates, and cannot handle circular references.