JavaScript Academy · Lesson

Pure Functions and Side Effects

Write predictable, testable functions.

Lesson 1 of 413 steps

Pure Functions and Side Effects is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the JavaScript Academy learning path, including “Pure Functions and Side Effects”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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

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