🔁 Deep Copy vs Shallow Copy in JavaScript: Explained for Beginners

When working with JavaScript, especially with objects and arrays, you’ll often need to copy data. However, not all copies behave the same. This brings us to two key concepts:

• Shallow Copy

• Deep Copy

Understanding the difference can save you from frustrating bugs and unexpected behavior in your code — especially when working with nested data structures or building apps with frameworks like React.

---

🔍 What’s the Difference?

---

🔧 How to Make a Copy in JavaScript

📦 Copying Objects

🧪 Example: Shallow Copy Using Object.assign()

javascriptCopyEditconst original = { name: "Alice", address: { city: "Paris" } };
const copy = Object.assign({}, original);

copy.address.city = "London";
console.log(original.address.city); // ❗ "London" – the original is affected

🧪 Using the Spread Operator (...)

javascriptCopyEditconst original = { name: "Bob", address: { city: "Rome" } };
const copy = { ...original };

copy.address.city = "Berlin";
console.log(original.address.city); // ❗ "Berlin" – still shallow!

👉 Real-world scenario: Imagine copying a user profile to modify the copy. If it has nested data (like address), and you use a shallow copy, changes might unintentionally affect the original user profile. Not good!

---

📚 Copying Arrays

🧪 Shallow Copy Using .slice()

javascriptCopyEditconst original = [[1, 2], [3, 4]];
const copy = original.slice();

copy[0][0] = 99;
console.log(original[0][0]); // ❗ 99 – original changed!

🧪 Using Spread for Arrays

javascriptCopyEditconst original = [[10, 20], [30, 40]];
const copy = [...original];

copy[1][1] = 999;
console.log(original[1][1]); // ❗ 999 – still shallow!

---

🧠 Deep Copy Techniques

✅ 1. Using JSON.stringify() + JSON.parse()

javascriptCopyEditconst original = { name: "Zoe", hobbies: ["reading", "biking"] };
const copy = JSON.parse(JSON.stringify(original));

copy.hobbies[0] = "gaming";
console.log(original.hobbies[0]); // ✅ "reading" – deep copy works!

⚠️ Limitations:

• Doesn’t work with functions, undefined, Date, or special object types like Map, Set.

✅ 2. Using Libraries Like Lodash

Lodash’s cloneDeep is very reliable.

javascriptCopyEditimport cloneDeep from 'lodash/cloneDeep';

const original = { user: { name: "Tom", settings: { theme: "dark" } } };
const copy = cloneDeep(original);

copy.user.settings.theme = "light";
console.log(original.user.settings.theme); // ✅ "dark" – completely independent!

---

👩‍🏫 Real World Use Case: React State Management

In React, state updates should never mutate the original state directly. If you accidentally create a shallow copy of a deeply nested state object and update it, your UI might not re-render properly, or you might introduce hard-to-find bugs.

✅ Best Practice Example

javascriptCopyEditconst updatedUsers = users.map(user => ({
  ...user,
  profile: { ...user.profile, age: user.profile.age + 1 }
}));

This ensures immutability — a key principle in modern JavaScript development.

---

🧭 Best Practices

1. Understand your data: If it has nesting, shallow copying will not be enough.

2. Use deep copy when needed: Especially when working with forms, state, or any structure passed to components or reused elsewhere.

3. Immutable patterns: Use immutability libraries or patterns to ensure safer code.

4. Debug carefully: If you see strange behavior, double-check if you’re mutating shared references.

---

🧵 Conclusion

Copying isn’t always as simple as it looks in JavaScript. Knowing when to use a shallow or deep copy can save you from unexpected side effects — especially as your apps grow more complex.

---

Want to practice? Try copying an array of objects and modifying just one entry without affecting the rest. Or clone a nested object and test whether the original stays intact!

If you have questions or want more examples, feel free to ask. 😊

Would you like a downloadable version of this article or maybe a code playground example too?
leave a comment ‘code’