Immutability & Pure Functions

The plain-language idea

A function is pure if it satisfies two rules: given the same input, it always returns the same output, and it causes no side effects — it doesn't mutate arguments, doesn't touch outside variables, doesn't log, fetch, or write.

// impure — mutates its argument, a side effect
function addItemImpure(cart, item) {
  cart.push(item);
  return cart;
}

// pure — same inputs always give the same new array, original untouched
function addItemPure(cart, item) {
  return [...cart, item];
}

Immutability is the discipline that makes purity practical: instead of changing a value in place, you produce a new value with the change applied, leaving the original untouched.

state.items.push(x) — mutates the array in place. Same reference as before.

BackNext

What people usually miss

Watch out

• This is exactly why React state updates use spread, not mutation. setState({ ...state, loading: true }) instead of state.loading = true — React compares references to decide whether to re-render; mutating in place doesn't change the reference, so React can miss the update entirely.
• Pure functions are trivially memoizable. Memoization's core assumption — same input, same output, forever — is only safe for pure functions, which is exactly why the memoization lesson calls this out as a precondition, not a nice-to-have.
• Immutable ≠ deep-frozen. Object.freeze only freezes one level; nested objects inside a frozen object are still fully mutable unless you freeze them too, or use a library that deep-freezes.

Why this matters in interviews

"Why does mutating state directly sometimes not trigger a re-render in React?" is a very common real bug, and the honest root cause is this lesson: React relies on reference equality, which mutation doesn't change.