---

Shallow vs Deep Copy in JavaScript (with Immer)

🚀 Introduction

This repository demonstrates the difference between shallow and deep copy in JavaScript, along with a practical solution using the Immer library for immutable state management. Understanding how objects are copied in JavaScript can help prevent unexpected bugs, especially when dealing with nested data structures.

---

📚 Table of Contents

1. Shallow Copy vs Deep Copy
2. Why Does This Happen?
3. Deep Copy Using Immer
4. Installation
5. Usage
6. Examples
7. License

---

🔍 Shallow Copy vs Deep Copy

In JavaScript, copying objects is a common task, but there are key differences between shallow and deep copying:

🛠️ Shallow Copy

A shallow copy creates a new object, but nested objects or arrays are still referenced. Changes to nested structures affect both the original and copied object.

Example:

const obj1 = { name: "Wireless Mouse", address: { city: "Dhaka" } };
const obj2 = { ...obj1 };
obj2.address.city = "Khulna"; // Affects obj1 too!

console.log(obj1.address.city); // Output: Khulna

🔄 Deep Copy

A deep copy duplicates the entire object, including nested objects. Changes to one object do not affect the other.

Example:

const obj1 = { name: "Wireless Mouse", address: { city: "Dhaka" } };
const obj2 = JSON.parse(JSON.stringify(obj1)); // Deep copy
obj2.address.city = "Khulna"; // Does not affect obj1

console.log(obj1.address.city); // Output: Dhaka

---

🧐 Why Does This Happen?

This behavior is due to how JavaScript handles objects:

• Shallow copy: Copies only the top-level properties. Nested objects remain references.
• Deep copy: Creates a fully independent copy, including nested structures.

---

⚡ Deep Copy Using Immer

Immer is a modern JavaScript library that makes working with immutable data structures easier by allowing you to make immutable updates with a simple API. With Immer, deep copies can be done effortlessly without manually managing nested objects.

🌱 Solution Using Immer:

import produce from "immer";

const obj1 = {
    name: "Wireless Mouse",
    address: { city: "Dhaka", country: "Bangladesh" }
};

// Using Immer to create a deep copy and modify the object immutably
const obj2 = produce(obj1, (draft) => {
    draft.address.city = "Khulna";
});

console.log(obj1.address.city); // Output: Dhaka (unchanged)
console.log(obj2.address.city); // Output: Khulna (updated)

---

📦 Installation

To get started with this project, you need to clone the repository and install the required dependencies:

git clone https://github.com/yourusername/immer-shallow-deep-copy.git
cd immer-shallow-deep-copy
npm install

---

📝 Usage

1. Clone the repository:

   git clone https://github.com/yourusername/immer-shallow-deep-copy.git

2. Install dependencies:

   npm install

3. Run the example or integrate the solution into your project:

   import produce from "immer";
   
   const obj1 = { name: "Wireless Mouse", address: { city: "Dhaka" } };
   const obj2 = produce(obj1, (draft) => {
       draft.address.city = "Khulna";
   });
   
   console.log(obj1.address.city); // Dhaka
   console.log(obj2.address.city); // Khulna

---

💡 Examples

🧑‍💻 Example 1: Shallow Copy with Spread Operator

const obj1 = { name: "Keyboard", address: { city: "Dhaka" } };
const obj2 = { ...obj1 };
obj2.address.city = "Khulna";

console.log(obj1.address.city); // Output: Khulna (due to shallow copy)
console.log(obj2.address.city); // Output: Khulna

🧑‍💻 Example 2: Deep Copy Using Immer

import produce from "immer";

const obj1 = { name: "Keyboard", address: { city: "Dhaka" } };
const obj2 = produce(obj1, (draft) => {
    draft.address.city = "Khulna";
});

console.log(obj1.address.city); // Output: Dhaka (unchanged)
console.log(obj2.address.city); // Output: Khulna (updated)

---

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

---

🔧 Conclusion

Shallow and deep copying in JavaScript are fundamental concepts that you should be aware of when working with objects and arrays. While shallow copies are faster, deep copies are essential when you need to ensure full independence between objects. Immer is an excellent tool to help with immutability, making deep copying simple and efficient.