Deep and Shallow Copy

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is a Shallow Copy? What is a Deep Copy? What's the difference? When should you use each? Imagine This 📚 Suppose you have a notebook. Shallow Copy 📄 You make a photocopy of only the first page . The pages inside are still shared. If someone changes page 2, both notebooks show the change. Deep Copy 📚📚 You make a complete photocopy of every page . Now both notebooks are completely independent. Changing one notebook doesn't affect the other. Example Object const user = { name: "Ajay" , address: { city: "Delhi" } }; What is a Shallow Copy? A Shallow Copy copies only the first level of an object. Nested objects are shared . Example const user = { name: "Ajay" , address: { city: "Delhi" } }; const copy = { ... user }; copy . name = "Rahul" ; console . log( user . name); console . log( copy . name); Output Ajay Rahul ✅ Primitive values are copied separately. Problem with Nested Objects const user = { name: "Ajay" , address: { city: "Delhi" } }; const copy = { ... user }; copy . address . city = "Mumbai" ; console . log( user . address . city); console . log( copy . address . city); Output Mumbai Mumbai ❌ Why? Because both objects point to the same address object . Memory Diagram (Shallow Copy) user │ ├── name → "Ajay" │ └── address ─────────┐ │ copy │ │ │ ├── name → "Ajay" │ │ │ └────────────────────┘ │ ▼ { city: "Delhi" } Both objects share the same nested object. What is a Deep Copy? A Deep Copy copies everything , including nested objects. The new object is completely independent. Example const user = { name: "Ajay" , address: { city: "Delhi" } }; const copy = structuredClone ( user ); copy . address . city = "Mumbai" ; console . log( user . address . city); console . log( copy . address . city); Output Delhi Mumbai ✅ The original object is unchanged. Memory Diagram (Deep Copy) user copy name → "Ajay" name → "Ajay" address address │ │ ▼ ▼ { city:"Delhi"} { city:"Delhi"} Both have different memory locations. Ways to Create a Shallow Copy 1. Spread Operator const copy = { ... user }; 2. Object.assign() const copy = Object . assign({}, user ); 3. Array Spread const arr = [ 1 , 2 , 3 ]; const copy = [... arr ]; Ways to Create a Deep Copy ✅ Modern JavaScript (Recommended) const copy = structuredClone ( user ); JSON Method (Simple Objects Only) const copy = JSON . parse( JSON . stringify( user )); ⚠️ Limitations: It does not correctly copy: Functions Date Map Set undefined Circular references Real-Life Example Imagine an employee record. const employee = { name: "Ajay" , salary: { basic: 50000 } }; If HR creates a Shallow Copy and changes the salary: copy . salary . basic = 60000 ; The original employee's salary also changes. ❌ Wrong. With a Deep Copy , only the copied record changes. Shallow vs Deep Copy Feature Shallow Copy Deep Copy Copies first level ✅ ✅ Copies nested objects ❌ No ✅ Yes Shares nested references ✅ Yes ❌ No Independent objects ❌ No ✅ Yes Faster ✅ Yes ❌ Slightly slower Interview Question What is the output? const person = { name: "Ajay" , address: { city: "Delhi" } }; const copy = { ... person }; copy . address . city = "Mumbai" ; console . log( person . address . city); Output Mumbai Reason: The spread operator creates a shallow copy , so address is shared. When Should You Use Them? Use Shallow Copy when: Object has only primitive values. You don't need to modify nested objects. Use Deep Copy when: Object contains nested objects or arrays. You want the copy to be completely independent. Key Points ✅ Shallow Copy copies only the first level. ✅ Nested objects are still shared. ✅ Deep Copy creates a completely separate copy. ✅ Use structuredClone() for deep copying in modern JavaScript. 🧠 Easy Formula Shallow Copy Object │ └── Shares nested objects ❌ Deep Copy Object │ └── Creates brand-new nested objects ✅ Remember: Shallow Copy = Shared nested objects Deep Copy = Completely independent copy