Interview answer drill

Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow JavaScript mastery study plan Practice more JavaScript interview questions

Mutability vs Immutability in JavaScript (State, References, and Side Effects)Frontend interview answer

HighIntermediateJavascript

By FrontendAtlas Team · Updated Jan 30, 2026

Interview focus

This JavaScript interview question tests whether you can explain Mutability vs immutability in JavaScript: what is the difference, connect it to production trade-offs, and handle common follow-up questions.

Mutability vs immutability in JavaScript: what is the difference explanation without falling back to memorized docs wording
Immutability and State reasoning, edge cases, and production failure modes
How you would answer the most likely JavaScript interview follow-up

Practice more JavaScript interview questions

Interview quick answer

Mutable data can be changed in place, while immutable data is never modified — instead, new copies are created. Understanding this difference is critical for predictable state management in React, Angular, Redux/NgRx, and for avoiding side effects and hard-to-debug bugs.

Full interview answer

The core difference

Mutable data can be changed in place.

Immutable data is never modified; instead, you create a new value.

In JavaScript, objects and arrays are mutable by default. Most bugs in UI state management come from mutating something you thought was 'a copy'.

Concept	What it means	Example
Mutation	Changing the same object in memory	`arr.push(1)`, `obj.x = 5`
Immutability	Creating a new object instead of changing the old one	`newArr = [...arr, 1]`, `newObj = { ...obj, x: 5 }`

Same logical change, different memory behavior.

Mutation in action (the bug factory)

JAVASCRIPT

const state = {
  user: { name: 'Alice' },
  loggedIn: true
};

const nextState = state; // NOT a copy, same reference!

nextState.user.name = 'Bob';

console.log(state.user.name); // 'Bob' ❗ original is changed

Immutable update (correct pattern)

JAVASCRIPT

const state = {
  user: { name: 'Alice' },
  loggedIn: true
};

const nextState = {
  ...state,
  user: {
    ...state.user,
    name: 'Bob'
  }
};

console.log(state.user.name);    // 'Alice' ✅
console.log(nextState.user.name); // 'Bob'

Why frameworks care so much

React, Angular (OnPush), Redux, NgRx, etc. rely heavily on reference equality checks (===) to detect changes.

If you mutate in place:

The reference stays the same

Change detection may not run

UI gets out of sync

Operations: mutable vs immutable

Operation	Mutable	Immutable alternative
Add to array	`arr.push(x)`	`[...arr, x]`
Remove from array	`arr.splice(i, 1)`	`arr.filter((_, idx) => idx !== i)`
Sort array	`arr.sort()`	`[...arr].sort()`
Update object field	`obj.x = 5`	`{ ...obj, x: 5 }`

Same intent, different safety.

Performance reality

Naive deep copying everything is slow.

Real-world immutable systems use structural sharing: only copy the path you change, reuse the rest.

Libraries like Immer let you write “mutating” code that produces immutable results under the hood.

Important nuance

Immutability is a discipline, not a JavaScript language rule. const does not make objects immutable — it only prevents reassigning the variable.

JAVASCRIPT

const obj = { x: 1 };
obj.x = 2; // allowed ❗

One-sentence answer

Mutable data is changed in place, while immutable data is never modified — instead, you create new values and keep the old ones untouched, enabling predictable state and cheap change detection.