Shallow Copy vs Deep Copy in JavaScript
Understand shallow copy vs deep copy in JavaScript with spread, Object.assign, structuredClone and JSON tricks, plus examples, pitfalls and interview answers.
Expected Interview Answer
A shallow copy duplicates only the top level of an object, so nested objects and arrays are shared by reference, while a deep copy recursively duplicates every level so the copy shares nothing with the original.
Shallow copies are made with the spread operator, Object.assign, or Array slice, and mutating a nested property changes both the copy and the source because they point to the same inner reference. Deep copies clone every nested value into brand-new memory, so structuredClone, or JSON.parse(JSON.stringify(x)) for JSON-safe data, produce a fully independent object where nested mutations no longer leak back.
- Shallow copy is fast and cheap for flat objects
- Deep copy fully isolates nested data from mutation
- structuredClone handles Dates, Maps, Sets and cycles
- Prevents accidental shared-reference bugs in state
- Lets you snapshot data before a risky update
AI Mentor Explanation
A shallow copy is like photocopying only the front cover of a team folder while the inner player files stay the single original set both folders point to; edit a player's record and both folders show it. A deep copy re-photocopies every player file too, giving a totally separate folder that changes independently.
Step-by-Step Explanation
Step 1
Identify nesting
Check whether the object contains nested objects or arrays — flat data rarely needs a deep copy.
Step 2
Choose the shallow tools
Use spread {...obj}, Object.assign({}, obj), or arr.slice() when only the top level must be independent.
Step 3
Reach for deep copy when nested state matters
Use structuredClone(obj) to recursively clone nested references into new memory.
Step 4
Know the JSON trick and its limits
JSON.parse(JSON.stringify(obj)) deep-clones JSON-safe data but drops functions, undefined, Dates become strings, and it throws on cycles.
Step 5
Verify isolation
Mutate a nested value on the copy and confirm the original is unchanged.
What Interviewer Expects
- Clear definition of reference vs value copying
- Naming spread, Object.assign and slice as shallow tools
- Knowing structuredClone as the modern deep-copy API
- Awareness of JSON.stringify limitations
- A concrete nested-mutation example
Common Mistakes
- Claiming the spread operator deep-copies nested objects
- Using JSON.parse(JSON.stringify()) on data with functions, Dates or cycles
- Not realizing shared nested references cause state bugs
- Confusing copying with simply reassigning a variable
Best Answer (HR Friendly)
“A shallow copy duplicates only the outer layer of an object, so anything nested inside is still shared with the original. A deep copy duplicates everything, all the way down, giving you a completely separate object you can change safely without affecting the source.”
Code Example
const original = { name: 'Ada', address: { city: 'London' } };
const shallow = { ...original };
shallow.address.city = 'Paris';
console.log(original.address.city); // 'Paris' — nested object was sharedconst original = { name: 'Ada', address: { city: 'London' } };
const deep = structuredClone(original);
deep.address.city = 'Paris';
console.log(original.address.city); // 'London' — fully independentFollow-up Questions
- Why does the spread operator only copy one level deep?
- What are the limitations of JSON.parse(JSON.stringify(obj))?
- How does structuredClone handle circular references?
- How would you deep-clone an object containing a Map and a Date?
- Why do shared references cause bugs in React or Redux state?
MCQ Practice
1. Which technique creates a shallow copy of an object?
The spread operator copies only top-level properties; nested objects remain shared by reference, making it a shallow copy.
2. What is a limitation of JSON.parse(JSON.stringify(obj)) for deep copying?
JSON serialization drops functions and undefined, converts Dates to strings, and cannot handle circular references.
3. After a shallow copy, mutating a nested object on the copy will:
Because the nested object is shared by reference, mutating it through the copy also mutates the original.
Flash Cards
What is a shallow copy? — A copy that duplicates only the top level; nested objects and arrays stay shared by reference.
What is a deep copy? — A copy that recursively duplicates every nested level so it shares no references with the original.
Modern deep-copy API? — structuredClone(value) — handles nested objects, Dates, Maps, Sets and circular references.
Shallow-copy tools? — Spread {...obj}, Object.assign({}, obj), and Array.prototype.slice().