JavaScript Academy · Lesson

Immutable Update Patterns

Update data by creating new copies.

Immutable Update Patterns is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Update Without Mutating

Immutable updates create a new copy with the change applied, leaving the original untouched. This is the heart of predictable state management in modern JavaScript.

The spread operator ... is the main tool.

Copying an Object With Spread

Spread an object into a new one, then override a property. The original keeps its old value.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

They Are Different Objects

The copy is a brand-new object, not the same reference. Identity comparison confirms it.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Adding a Property Immutably

To add a field, spread the old object and include the new key. The original gains nothing.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Removing a Property Immutably

Use destructuring to pull out the unwanted key and capture the rest. The rest object excludes it.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Copying Arrays With Spread

Spread an array to copy it. Methods like map and filter also return new arrays, never mutating the source.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Adding to an Array Immutably

Instead of push (which mutates), build a new array with spread. The original length stays the same.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Removing From an Array Immutably

Use filter to produce a new array without the unwanted item, leaving the original intact.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Updating Nested Objects

Nested updates require spreading at each level you change. Only the touched branch is recreated; the rest is shared by reference.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Updating an Item in an Array

Use map to return a changed copy for the matching item and the original for the rest. No element is mutated.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Why Immutable Updates Matter

Never mutating shared state makes change detection cheap (compare references), enables undo/redo, and prevents action-at-a-distance bugs. The pattern: copy, then change the copy. For deep clones, the next lesson covers structuredClone.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Quick Check

What does { ...user, age: 37 } produce when user already has an age?

Recap: Immutable Update Patterns

You learned to update without mutating:

Spread { ...obj, key: value } to copy and override.
Destructure rest to remove a property immutably.
Use map, filter, and array spread instead of push/splice.
Spread at each level for nested updates; share the rest by reference.

Frequently asked questions

Is the “Immutable Update Patterns” lesson free?

Yes — the full text of “Immutable Update Patterns” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Immutable Update Patterns”?

Update data by creating new copies. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Immutable Update Patterns” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy