Understanding Object Mutability, Shallow vs Deep Copy, and the Power of Immer in JavaScript

In JavaScript, objects are mutable. This means if you assign an object to a new variable, both variables refer to the same memory. Any change made through one will affect the other.

Let's explore what this means — and how to avoid unintended side effects using techniques like shallow copy, deep copy, and Immer.

---

🔁 Problem: Object Mutability

const employee = {
  name: "Mir",
  address: {
    country: "Bangladesh",
    city: "Dhaka",
  },
};

const employee2 = employee;
employee2.name = "Mezba";

console.log(employee.name); // "Mezba" ❗ Unexpected mutation

employee2 and employee point to the same object. Changing employee2 affects employee.

---

🧪 Solution 1: Shallow Copy with Spread Operator

const employee2 = {
  ...employee,
  name: "Mezba",
};

employee2.address.city = "Chittagong";

console.log(employee.address.city); // "Chittagong" ❗ still mutated!

This only copies the top-level fields — nested objects like address are still shared.

---

🌊 Solution 2: Manual Deep Copy (One Level Down)

const employee2 = {
  ...employee,
  name: "Mezba",
  address: {
    ...employee.address,
    city: "Chittagong",
  },
};

console.log(employee.address.city); // "Dhaka" ✅

We manually copy nested structures to break the shared reference.

---

🧱 Solution 3: Structured Clone (Modern Browsers)

const employee2 = structuredClone(employee);
employee2.name = "Mezba";
employee2.address.city = "Chittagong";

console.log(employee.address.city); // "Dhaka" ✅

structuredClone() performs a deep copy automatically.
⚠️ Browser support: Modern browsers only (Chrome 98+, Node.js 17+)

---

🛠️ Solution 4: Deep Copy Using Immer

Immer lets you write mutative code that produces immutable updates.

🔧 Step 1: Install Immer

npm install immer

📦 Step 2: Use produce to Make Safe Updates

import { produce } from "immer";

const employee = {
  name: "Mir",
  address: {
    country: "Bangladesh",
    city: "Dhaka",
  },
};

const employee2 = produce(employee, (draft) => {
  draft.name = "Mezba";
  draft.address.city = "Chittagong";
});

console.log(employee);
// Output: { name: 'Mir', address: { country: 'Bangladesh', city: 'Dhaka' } }

console.log(employee2);
// Output: { name: 'Mezba', address: { country: 'Bangladesh', city: 'Chittagong' } }

✅ Clean, concise, and powerful. Perfect for managing immutable state in tools like Redux.

---

📌 Summary Table

Technique	Type	Handles Nested?	Notes
... spread	Shallow Copy	❌	Only copies top-level
Manual nested spread	Partial Deep	✅ (Manual)	Tedious for deep structures
structuredClone()	Deep Copy	✅	Browser/Node support required
Immer (produce)	Deep Copy	✅	Cleaner syntax for immutable logic

---

🧠 Final Thoughts

• Use shallow copy for flat objects.
• Use structuredClone or Immer for deeply nested updates.
• Immer is especially useful in React state management scenarios where immutability is key.

---

This post was crafted with a little help from AI 🤖
✍️ If you found this helpful, feel free to share or comment below. Happy coding!