JavaScript Immutability Interview Questions

Mutation vs immutability — the core difference

// MUTABLE — modify in place
const user = { name: 'Alice', score: 10 }
user.score += 5     // mutate the existing object
// Any other code holding a reference to 'user' now sees score: 15
// Including code that expected it to still be 10

// IMMUTABLE — produce a new object
const user    = { name: 'Alice', score: 10 }
const updated = { ...user, score: user.score + 5 }
// 'user' is untouched — score is still 10
// 'updated' is a new object with score: 15
// Both can be kept, compared, or thrown away independently

// With arrays:
const items = [1, 2, 3]

// Mutable operations — modify in place:
items.push(4)      // mutates items
items.splice(1, 1) // mutates items
items.sort()       // mutates items

// Immutable equivalents:
const withFour  = [...items, 4]                          // add
const without1  = items.filter((_, i) => i !== 1)       // remove by index
const sorted    = [...items].sort()                      // sort (copy first!)

Why React requires immutability — reference equality

// React compares previous and next state with Object.is()
// Object.is() on objects compares REFERENCES, not contents

const prev = { count: 0 }
const next = prev
next.count = 1  // mutated the same object

Object.is(prev, next)  // true — same reference!
// React sees no change → no re-render

// Immutable update — new reference
const prev = { count: 0 }
const next = { ...prev, count: 1 }

Object.is(prev, next)  // false — different references
// React sees a change → re-renders

// This is why direct state mutation causes "bugs" in React:
// setCount(count++)            // ❌ returns old value, AND mutates
// setState(state.push(item))   // ❌ push mutates, returns length not array
// setState([...state, item])   // ✓ new array — React detects the change

// React.memo and useMemo depend on this too:
const MemoizedList = React.memo(({ items }) => )
// If you mutate items instead of producing a new array,
// the reference is the same — memo thinks nothing changed — no re-render

Immutable update patterns — the complete toolkit

const state = {
  user:    { name: 'Alice', role: 'user' },
  items:   [{ id: 1, done: false }, { id: 2, done: true }],
  settings: { theme: 'dark', lang: 'en' }
}

// Update a nested property:
const withRole = {
  ...state,
  user: { ...state.user, role: 'admin' }
}

// Update an item in an array by index:
const toggleItem = (id) => ({
  ...state,
  items: state.items.map(item =>
    item.id === id ? { ...item, done: !item.done } : item
  )
})

// Add item to array:
const withNewItem = {
  ...state,
  items: [...state.items, { id: 3, done: false }]
}

// Remove item from array:
const withoutItem = (id) => ({
  ...state,
  items: state.items.filter(item => item.id !== id)
})

// Update deeply nested:
const withDeepChange = {
  ...state,
  settings: {
    ...state.settings,
    theme: 'light'
  }
}

// ES2023 — structuredClone for deep copy when needed
const deepCopy = structuredClone(state)
deepCopy.settings.theme = 'light'  // safe — original untouched

Object.freeze() — enforced immutability at runtime

// Object.freeze prevents property addition, deletion, and reassignment
const CONFIG = Object.freeze({
  API_URL:    'https://api.example.com',
  MAX_ITEMS:  100,
  FEATURES:   ['search', 'filter'],
})

CONFIG.API_URL   = 'https://evil.com'  // silently fails (throws in strict mode)
CONFIG.NEW_PROP  = 'x'                 // silently fails
delete CONFIG.MAX_ITEMS                // silently fails

CONFIG.FEATURES.push('export')  // ← THIS WORKS — freeze is SHALLOW
// The FEATURES array is not frozen — only the reference to it is frozen

// Deep freeze:
function deepFreeze(value) {
  if (typeof value !== 'object' || value === null) return value
  Object.keys(value).forEach(key => deepFreeze(value[key]))
  return Object.freeze(value)
}

const FROZEN_CONFIG = deepFreeze({ db: { host: 'localhost', port: 5432 } })
FROZEN_CONFIG.db.port = 9999  // throws in strict mode — deeply frozen

// Object.isFrozen(obj) — check if frozen
// Freeze is permanent — cannot unfreeze a frozen object

Immer — mutable syntax, immutable results

// Immer lets you write "mutating" code that actually produces immutable results
// It wraps your object in a Proxy, records your mutations,
// and applies them to a new copy — the original is untouched

import { produce } from 'immer'

const state = {
  user:  { name: 'Alice', score: 0 },
  items: [{ id: 1, done: false }, { id: 2, done: false }]
}

const nextState = produce(state, draft => {
  // 'draft' is a Proxy — mutations on it are recorded, not applied to state
  draft.user.score += 10
  draft.items[0].done = true
  draft.items.push({ id: 3, done: false })
})

// state is untouched:
state.user.score   // 0
state.items.length // 2

// nextState is a new object with the changes:
nextState.user.score    // 10
nextState.items.length  // 3

// Structural sharing: Immer only creates new objects for changed nodes
// unchanged parts of the tree are SHARED with the original — memory efficient
nextState.items[1] === state.items[1]  // true — same reference, not copied

Structural sharing — why immutability is not as expensive as it seems

// Naive immutability: clone the entire object on every change — expensive
// Structural sharing: only copy the changed path — efficient

// Example: a tree of 1000 nodes, updating one leaf
const tree = buildTree(1000)

// Without structural sharing: clone all 1000 nodes
const newTree = JSON.parse(JSON.stringify(tree))  // deep clone — 1000 new objects
newTree.branches[2].leaves[5].color = 'red'

// With structural sharing: only 3 new objects (tree → branches[2] → leaves[5])
const newTree = {
  ...tree,                // new root (shares all other branches)
  branches: [
    ...tree.branches.slice(0, 2),
    {
      ...tree.branches[2],          // new branch (shares all other leaves)
      leaves: tree.branches[2].leaves.map((leaf, i) =>
        i === 5 ? { ...leaf, color: 'red' } : leaf  // new leaf only for index 5
      )
    },
    ...tree.branches.slice(3)
  ]
}
// All unchanged nodes are REUSED — not copied
// This is how Redux, Immer, and persistent data structures work efficiently

const does NOT mean immutable

// const prevents REASSIGNMENT of the variable binding
// It says nothing about the object the variable points to

const user = { name: 'Alice' }
user = { name: 'Bob' }    // TypeError: Assignment to constant variable

user.name = 'Bob'          // ← THIS WORKS — const doesn't freeze the object
user.role = 'admin'        // ← THIS WORKS
delete user.name           // ← THIS WORKS

// const with primitives IS effectively immutable:
const x = 42
x = 43  // TypeError — primitives are values, not references

// For true immutability of objects: const + Object.freeze
const SETTINGS = Object.freeze({ theme: 'dark', lang: 'en' })
SETTINGS.theme = 'light'  // fails — frozen
SETTINGS = {}              // fails — const