JavaScript Academy · Lesson

Pure Functions and Side Effects

Write predictable, testable functions.

Pure Functions and Side Effects is a free JavaScript Academy lesson on CoddyKit — lesson 1 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.

What Makes a Function Pure

A pure function has two properties: given the same inputs it always returns the same output, and it causes no observable side effects. Pure functions are predictable and easy to test.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

Deterministic Output

Purity means determinism. The same arguments must always map to the same result, with no dependence on hidden state, time, or randomness.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

What Is a Side Effect

A side effect is anything a function does beyond returning a value: logging, mutating external state, writing to storage, network calls, or changing its arguments.

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

Depending on External State

Reading mutable external state also breaks purity, because the output changes even when the argument stays the same.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

Making It Pure

Pass everything the function needs as arguments. Now its result depends only on inputs.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

Mutating Arguments Is Impure

Changing an object or array passed in is a side effect the caller can observe. Pure functions leave their inputs untouched.

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

Returning New Values

A pure version builds and returns a new value instead of mutating the input.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

Why Purity Helps

Pure functions are trivial to test (no setup, no mocks), safe to cache (memoize), and safe to run in any order or in parallel. They make reasoning about code local.

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

Isolating Impurity

You cannot avoid all side effects; apps must log, fetch, and render. The goal is to push effects to the edges and keep the core logic pure.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

Referential Transparency

A pure call can be replaced by its result without changing behavior. add(2, 3) is interchangeable with 5 anywhere. This property is called referential transparency.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

Spotting Impurity

Watch for clues: console, Math.random, Date.now, assignments to outer variables, or mutating arguments. Any of these make a function impure.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

Quick Check

Identifying pure functions.

Recap

Pure functions are deterministic and free of side effects: no external mutation, no I/O, no argument mutation. Pass dependencies as arguments and return new values instead of mutating. Purity gives testability, memoization, referential transparency, and parallel safety. Keep the core pure and push effects to the edges.

Frequently asked questions

Is the “Pure Functions and Side Effects” lesson free?

Yes — the full text of “Pure Functions and Side Effects” 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 “Pure Functions and Side Effects”?

Write predictable, testable functions. 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 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pure Functions and Side Effects” 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