JavaScript Academy · Lesson

Avoiding Mutation

Work with copies instead of mutating data.

Avoiding Mutation 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.

Why Avoid Mutation

Mutating shared data causes bugs that are hard to trace: a change in one place surprises code elsewhere. Functional style favors creating new values over modifying existing ones (immutability).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Spread to Copy Arrays

The spread operator ... creates a shallow copy of an array, letting you add elements without touching the source.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Spread to Copy Objects

Spread works for objects too, producing a new object with the same properties plus any overrides.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Non-Mutating Array Methods

Prefer methods that return new arrays: map, filter, concat, slice. Avoid mutating ones like push, splice, and in-place sort.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Adding Immutably

Instead of push, build a new array with spread or concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Removing Immutably

Use filter to produce a new array without an element, instead of splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Updating an Item Immutably

To change one element, map over the array and return a new value for the matching item.

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

Shallow vs Deep

Spread copies one level deep. Nested objects are still shared references. To update nested data immutably, spread at each level you change.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Freezing for Safety

Object.freeze prevents accidental mutation of an object at runtime, making immutability explicit (one level deep).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

Const Is Not Immutability

A common confusion: const only prevents reassigning the variable, not mutating the value it holds. An array declared with const can still be pushed to.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Benefits Recap

Immutable updates make change tracking trivial (compare references), enable undo/redo, prevent spooky action at a distance, and pair naturally with pure functions.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Quick Check

Avoiding mutation.

Recap

Immutability means creating new values instead of mutating. Use spread to copy arrays and objects, prefer non-mutating methods (map, filter, concat), and spread at each level for nested updates. Remember const blocks reassignment, not mutation; Object.freeze adds runtime protection. Immutable updates make change detection and pure code easy.

Frequently asked questions

Is the “Avoiding Mutation” lesson free?

Yes — the full text of “Avoiding Mutation” 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 “Avoiding Mutation”?

Work with copies instead of mutating data. 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 “Avoiding Mutation” 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