Immutability ka Funda - Fullstackgada Interactive Demo

⚠️ Mutable vs 🔒 Immutable Demo

Mutation ka Problem: Jab hum original data ko directly change karte hain, toh unexpected side effects ho sakte hain!

Original User Object:
{ name: "Jethalal", city: "Mumbai", age: 45 }

Operation ke Results:

Upar wala button click karo to see mutation vs immutability in action...

💌 Love Letter wali Misal

💔

Mutation: Jaise koi mere love letter mein "I love you Babita" ki jagah "I love you Iyer" likh de!

💝

Immutability: Original letter ko safe rakho aur naya letter likho!

🛒 Shopping Cart ka Example

Use Case: Shopping cart mein items add karte waqt immutability kyun zaroori hai.

Abhi ka Cart:

Khali Cart

📊 Cart ka History (Immutable ke Fayde)

Khali cart state

💻 Code Examples - Mutable vs Immutable

// ❌ Dangerous: Direct Mutation
let user = { name: "Jethalal", city: "Mumbai" };
let anotherRef = user; // Same object reference
user.city = "Delhi"; // Mutation!
// Problem: Dono references par asar!
console.log(user.city);      // "Delhi"
console.log(anotherRef.city); // "Delhi" (Unexpected!)

// ❌ Array Mutation ka Problem
let cart = ["iPhone", "MacBook"];
let backupCart = cart; // Same reference
cart.push("iPad"); // Mutation!
console.log(backupCart); // ["iPhone", "MacBook", "iPad"]
// Original backup bhi change ho gaya!

// ✅ Safe: Immutable Object Update
let user = { name: "Jethalal", city: "Mumbai", age: 45 };
// Mutation ke bajaye nayi copy banaye
let updatedUser = { ...user, city: "Delhi" };
console.log(user.city);        // "Mumbai" (Original safe)
console.log(updatedUser.city);  // "Delhi" (Nayi copy)

// ✅ Object.assign() ka Use
let original = { name: "Babita", profession: "Teacher" };
let updated = Object.assign({}, original, { profession: "Doctor" });
console.log(original.profession); // "Teacher" (Safe)
console.log(updated.profession);  // "Doctor" (Nayi)

// ✅ Immutable Array Operations
let cart = ["iPhone", "MacBook"];
// Item immutably add karo
let newCart = [...cart, "iPad"];
// Item immutably remove karo
let filteredCart = cart.filter(item => item !== "MacBook");
console.log(cart);         // ["iPhone", "MacBook"] (Original safe)
console.log(newCart);      // ["iPhone", "MacBook", "iPad"]
console.log(filteredCart); // ["iPhone"]

// ✅ Array item immutably update karo
let users = [
  { id: 1, name: "Jethalal" },
  { id: 2, name: "Bhide" }
];
let updatedUsers = users.map(user => 
  user.id === 1 ? { ...user, name: "Jethalal Gada" } : user
);

// ✅ Pure Functions (No Side Effects)
function addToCart(cart, item) {
  return [...cart, item]; // Nayi array return karta hai
}
function updateUser(user, updates) {
  return { ...user, ...updates }; // Naya object return karta hai
}
// Usage
let cart = ["iPhone"];
let newCart = addToCart(cart, "MacBook");
// Original cart wahi ka wahi!

// ✅ Reducer Pattern (Redux Style)
function cartReducer(state, action) {
  switch(action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.item] };
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter(item => item.id !== action.id) };
    default:
      return state; // Hamesha state return karo
  }
}

⚖️ Immutability: Fayde vs Trade-offs

Aspect	✅ Fayde	⚠️ Trade-offs
Predictability	Koi unexpected side effects nahi, debugging asaan	Code thoda verbose, extra copying
Time Travel	Undo/Redo features, state history track karna	History ke saath memory use badhta hai
Concurrency	Thread-safe, koi race conditions nahi	Deep copying ke liye performance overhead
Testing	Pure functions ko test karna asaan	Immutable patterns ko sahi se test karna padta hai
Performance	Structural sharing, memoization possible	Copying ke liye initial performance cost