Immutability: Building Predictable Data Flow

Why We Need Immutability

In the software world, unexpected data changes are like furniture suddenly moving in a room—you think the table is there, but when you walk over, it's already somewhere else. This uncertainty leads to hard-to-track bugs and complex debugging processes.

Immutability is one of the core principles of functional programming. Its core idea is simple: once data is created, it cannot be modified. If you need to "change" data, you actually create a new data copy containing the new values.

This might sound wasteful of memory, but the benefits far outweigh the costs: data flow becomes predictable, code is easier to understand, concurrency problems are greatly reduced, and time-travel debugging becomes possible.

Problems Caused by Mutability

Let's first look at what problems mutable data can cause.

1. Unexpected Side Effects

// A seemingly harmless function
function applyDiscount(product, discountRate) {
  product.price = product.price * (1 - discountRate);
  product.onSale = true;
  return product;
}

const laptop = {
  name: "MacBook Pro",
  price: 2000,
  onSale: false,
};

// Calculate discounted price
const discountedLaptop = applyDiscount(laptop, 0.1);

console.log("Original price:", laptop.price); // 1800 (accidentally modified!)
console.log("Sale price:", discountedLaptop.price); // 1800

// Original object is contaminated
console.log("Original object state:", laptop.onSale); // true (unexpectedly changed!)

In this example, we just wanted to calculate the discounted price, but we accidentally modified the original product object. If other code depends on the original price, bugs will occur.

2. Hard-to-Track State Changes

// Shopping cart management
let shoppingCart = {
  items: [{ id: 1, name: "Laptop", price: 1000, quantity: 1 }],
  total: 1000,
};

function addItem(item) {
  shoppingCart.items.push(item);
  shoppingCart.total += item.price * item.quantity;
}

function removeItem(itemId) {
  const index = shoppingCart.items.findIndex((item) => item.id === itemId);
  if (index > -1) {
    const removed = shoppingCart.items.splice(index, 1)[0];
    shoppingCart.total -= removed.price * removed.quantity;
  }
}

// Call these functions in different places
addItem({ id: 2, name: "Mouse", price: 50, quantity: 2 });
// ... 100 lines of code ...
removeItem(1);
// ... 200 lines of code ...
addItem({ id: 3, name: "Keyboard", price: 80, quantity: 1 });

// What's the state of shoppingCart now? Hard to track!
// If total is calculated incorrectly, where was the bug introduced?

When multiple functions modify the same object, it's hard to track when and where the state was changed. During debugging, you must check every possible modification point.

3. Concurrency Issues

// Multiple operations modifying data simultaneously
let balance = 1000;

async function withdraw(amount) {
  // Simulate async operation
  await new Promise((resolve) => setTimeout(resolve, 100));

  if (balance >= amount) {
    balance -= amount;
    return { success: true, newBalance: balance };
  }
  return { success: false, message: "Insufficient balance" };
}

// Execute two withdrawals simultaneously
Promise.all([withdraw(600), withdraw(600)]).then((results) => {
  console.log("Operation 1:", results[0]);
  console.log("Operation 2:", results[1]);
  console.log("Final balance:", balance); // Might be -200! (race condition)
});

When multiple operations modify shared data simultaneously, race conditions occur, leading to unpredictable results.

Practicing Immutability

1. Using Spread Operator and Array Methods

// ❌ Mutable approach
const numbers = [1, 2, 3];
numbers.push(4); // Modify original array
numbers[0] = 10; // Modify original array

// ✅ Immutable approach
const originalNumbers = [1, 2, 3];
const withNewNumber = [...originalNumbers, 4];
const withModifiedFirst = [10, ...originalNumbers.slice(1)];

console.log(originalNumbers); // [1, 2, 3] (not modified)
console.log(withNewNumber); // [1, 2, 3, 4]
console.log(withModifiedFirst); // [10, 2, 3]

Common immutable array operations:

const fruits = ["apple", "banana", "cherry"];

// Add elements
const withOrange = [...fruits, "orange"];
const withGrapeAtStart = ["grape", ...fruits];

// Delete elements
const withoutBanana = fruits.filter((fruit) => fruit !== "banana");
const withoutFirst = fruits.slice(1);
const withoutLast = fruits.slice(0, -1);

// Modify elements
const capitalized = fruits.map((fruit) => fruit.toUpperCase());
const replacedCherry = fruits.map((fruit) =>
  fruit === "cherry" ? "mango" : fruit
);

// Sorting (sort modifies original array, need to copy first)
const sorted = [...fruits].sort();

console.log("Original array:", fruits); // Always ['apple', 'banana', 'cherry']

2. Immutable Object Operations

// ❌ Mutable approach
const user = { name: "John", age: 25 };
user.age = 26; // Modify original object
user.email = "[email protected]"; // Add property

// ✅ Immutable approach
const originalUser = { name: "John", age: 25 };
const olderUser = { ...originalUser, age: 26 };
const userWithEmail = { ...originalUser, email: "[email protected]" };

console.log(originalUser); // { name: "John", age: 25 } (not modified)
console.log(olderUser); // { name: "John", age: 26 }
console.log(userWithEmail); // { name: "John", age: 25, email: "..." }

Immutable updates for complex objects:

const user = {
  id: 1,
  name: "Sarah",
  address: {
    city: "New York",
    street: "5th Avenue",
    zipCode: "10001",
  },
  preferences: {
    theme: "dark",
    language: "en",
  },
};

// Update nested property
const withNewCity = {
  ...user,
  address: {
    ...user.address,
    city: "San Francisco",
  },
};

// Update multiple nested properties
const updated = {
  ...user,
  name: "Sarah Johnson",
  address: {
    ...user.address,
    city: "Los Angeles",
    zipCode: "90001",
  },
  preferences: {
    ...user.preferences,
    theme: "light",
  },
};

console.log("Original object:", user.address.city); // "New York" (unchanged)
console.log("New object:", withNewCity.address.city); // "San Francisco"

3. Building Immutable Utility Functions

// General immutable update function
const updateObject = (obj, updates) => ({ ...obj, ...updates });

const updateNested = (obj, path, value) => {
  const keys = path.split(".");
  const lastKey = keys.pop();

  let result = { ...obj };
  let current = result;

  for (const key of keys) {
    current[key] = { ...current[key] };
    current = current[key];
  }

  current[lastKey] = value;
  return result;
};

// Usage
const user = {
  profile: {
    personal: {
      name: "John",
      age: 25,
    },
    contact: {
      email: "[email protected]",
    },
  },
};

const updated = updateNested(user, "profile.personal.age", 26);

console.log(user.profile.personal.age); // 25 (unchanged)
console.log(updated.profile.personal.age); // 26

General array operation utilities:

// Immutable array utilities
const arrayUtils = {
  // Insert at specified position
  insertAt: (arr, index, item) => [
    ...arr.slice(0, index),
    item,
    ...arr.slice(index),
  ],

  // Delete at specified position
  removeAt: (arr, index) => [...arr.slice(0, index), ...arr.slice(index + 1)],

  // Update at specified position
  updateAt: (arr, index, updater) =>
    arr.map((item, i) => (i === index ? updater(item) : item)),

  // Move element
  move: (arr, fromIndex, toIndex) => {
    const item = arr[fromIndex];
    const without = arrayUtils.removeAt(arr, fromIndex);
    return arrayUtils.insertAt(without, toIndex, item);
  },
};

const numbers = [1, 2, 3, 4, 5];

console.log(arrayUtils.insertAt(numbers, 2, 99)); // [1, 2, 99, 3, 4, 5]
console.log(arrayUtils.removeAt(numbers, 2)); // [1, 2, 4, 5]
console.log(arrayUtils.updateAt(numbers, 2, (n) => n * 10)); // [1, 2, 30, 4, 5]
console.log(arrayUtils.move(numbers, 0, 4)); // [2, 3, 4, 5, 1]

console.log(numbers); // [1, 2, 3, 4, 5] (always unchanged)

Real-world Application Scenarios

1. React State Management

In React, immutability is key to correctly updating state:

// State updates in React components
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn JavaScript", completed: false },
    { id: 2, text: "Write code", completed: false },
  ]);

  // ❌ Wrong way - directly modify state
  const toggleWrong = (id) => {
    const todo = todos.find((t) => t.id === id);
    todo.completed = !todo.completed; // Modified original object
    setTodos(todos); // React can't detect the change!
  };

  // ✅ Correct way - create new array
  const toggleCorrect = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  // Add new todo
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  // Delete todo
  const removeTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // Clear completed
  const clearCompleted = () => {
    setTodos(todos.filter((todo) => !todo.completed));
  };
}

2. Redux-style State Management

// Immutable reducer
const initialState = {
  users: [],
  loading: false,
  error: null,
};

function usersReducer(state = initialState, action) {
  switch (action.type) {
    case "FETCH_USERS_START":
      return {
        ...state,
        loading: true,
        error: null,
      };

    case "FETCH_USERS_SUCCESS":
      return {
        ...state,
        loading: false,
        users: action.payload,
      };

    case "ADD_USER":
      return {
        ...state,
        users: [...state.users, action.payload],
      };

    case "UPDATE_USER":
      return {
        ...state,
        users: state.users.map((user) =>
          user.id === action.payload.id
            ? { ...user, ...action.payload.updates }
            : user
        ),
      };

    case "DELETE_USER":
      return {
        ...state,
        users: state.users.filter((user) => user.id !== action.payload),
      };

    default:
      return state;
  }
}

// Usage example
let state = initialState;

state = usersReducer(state, {
  type: "ADD_USER",
  payload: { id: 1, name: "John", email: "[email protected]" },
});

state = usersReducer(state, {
  type: "ADD_USER",
  payload: { id: 2, name: "Jane", email: "[email protected]" },
});

state = usersReducer(state, {
  type: "UPDATE_USER",
  payload: { id: 1, updates: { email: "[email protected]" } },
});

console.log(state.users);

3. History and Undo Functionality

Immutability makes implementing undo/redo functionality simple:

class HistoryManager {
  constructor(initialState) {
    this.history = [initialState];
    this.currentIndex = 0;
  }

  // Execute new operation
  execute(updater) {
    // Get current state
    const currentState = this.getCurrentState();

    // Create new state
    const newState = updater(currentState);

    // Delete history after current position
    this.history = this.history.slice(0, this.currentIndex + 1);

    // Add new state
    this.history.push(newState);
    this.currentIndex++;

    return newState;
  }

  // Undo
  undo() {
    if (this.canUndo()) {
      this.currentIndex--;
      return this.getCurrentState();
    }
    return null;
  }

  // Redo
  redo() {
    if (this.canRedo()) {
      this.currentIndex++;
      return this.getCurrentState();
    }
    return null;
  }

  getCurrentState() {
    return this.history[this.currentIndex];
  }

  canUndo() {
    return this.currentIndex > 0;
  }

  canRedo() {
    return this.currentIndex < this.history.length - 1;
  }

  getHistory() {
    return {
      history: this.history,
      currentIndex: this.currentIndex,
    };
  }
}

// Usage example: document editor
const editor = new HistoryManager({ content: "" });

// Execute a series of edits
editor.execute((state) => ({ ...state, content: "Hello" }));
editor.execute((state) => ({ ...state, content: "Hello World" }));
editor.execute((state) => ({ ...state, content: "Hello World!" }));

console.log("Current:", editor.getCurrentState().content); // "Hello World!"

// Undo twice
editor.undo();
editor.undo();
console.log("After undo:", editor.getCurrentState().content); // "Hello"

// Redo once
editor.redo();
console.log("After redo:", editor.getCurrentState().content); // "Hello World"

// View complete history
console.log("History:", editor.getHistory());

Performance Optimization

1. Structural Sharing

Although immutability creates new objects, performance can be optimized through structural sharing:

// Only changed parts create new objects, unchanged parts share references
const original = {
  a: { value: 1 },
  b: { value: 2 },
  c: { value: 3 },
};

const updated = {
  ...original,
  a: { value: 10 }, // Only a is a new object
};

console.log(original.a === updated.a); // false (changed)
console.log(original.b === updated.b); // true  (shared reference)
console.log(original.c === updated.c); // true  (shared reference)

This means we can use shallow comparison to quickly detect changes:

// Optimization in React.memo or shouldComponentUpdate
function arePropsEqual(prevProps, nextProps) {
  // Shallow comparison is enough because references change when immutable data changes
  return prevProps.data === nextProps.data;
}

2. Using Immutable Libraries

For complex scenarios, you can use specialized immutable libraries like Immer:

import { produce } from "immer";

const baseState = {
  users: [
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Jane", age: 30 },
  ],
  settings: {
    theme: "dark",
    notifications: true,
  },
};

// Using Immer, you can use "mutable" syntax, but the result is immutable
const nextState = produce(baseState, (draft) => {
  // Looks like it's modifying, but Immer actually creates new objects
  draft.users.push({ id: 3, name: "Bob", age: 28 });
  draft.users[0].age = 26;
  draft.settings.theme = "light";
});

console.log(baseState.users.length); // 2 (unchanged)
console.log(nextState.users.length); // 3
console.log(baseState === nextState); // false (different objects)

Considerations

1. Handling Deep Nesting

Manually updating deeply nested objects is tedious:

// Deep nested update
const state = {
  app: {
    ui: {
      sidebar: {
        width: 200,
        collapsed: false,
      },
    },
  },
};

// Tedious but safe approach
const updated = {
  ...state,
  app: {
    ...state.app,
    ui: {
      ...state.app.ui,
      sidebar: {
        ...state.app.ui.sidebar,
        collapsed: true,
      },
    },
  },
};

// Or use helper function
const setIn = (obj, path, value) => {
  const keys = path.split(".");
  const lastKey = keys.pop();

  const newObj = { ...obj };
  let current = newObj;

  for (const key of keys) {
    current[key] = { ...current[key] };
    current = current[key];
  }

  current[lastKey] = value;
  return newObj;
};

const result = setIn(state, "app.ui.sidebar.collapsed", true);

2. Array Operation Performance

When frequently operating on large arrays, immutable approaches might affect performance:

// Performance considerations
const largeArray = Array.from({ length: 10000 }, (_, i) => i);

// Multiple updates create new arrays each time
console.time("immutable");
let result = largeArray;
for (let i = 0; i < 100; i++) {
  result = [...result, result.length]; // Copies entire array each time
}
console.timeEnd("immutable");

// If multiple updates are needed, consider batch processing
console.time("batched");
const updates = Array.from({ length: 100 }, (_, i) => i);
const batchResult = [...largeArray, ...updates];
console.timeEnd("batched");

Summary

Immutability is a core principle of functional programming that avoids modifying existing data to:

1. Eliminate side effects: Functions don't accidentally modify external state
2. Simplify debugging: Data flow is clear and easy to track
3. Support time travel: Can save and rewind state history
4. Optimize performance: Quickly detect changes through reference comparison
5. Ensure concurrency safety: Avoid race conditions

Although immutability adds some memory overhead, these costs are acceptable through structural sharing and reasonable library support. In modern JavaScript applications, especially when using frameworks like React and Redux, immutability has become standard practice.

Mastering immutable data operations is a key step towards writing maintainable, predictable code.

---