Pure Functions and Side Effects

A pure function always evaluates to the same result value given the same argument values and has no observable side effects.

The Anatomy of Purity

To understand why purity matters, you first need to consider what happens when a program runs. Every application relies on some form of state—data stored in memory, databases, or the user interface. When code behaves unpredictably, it is almost always because the state changed when you did not expect it to.

If you pass the same arguments to a pure function, you will always get the exact same answer back. It does not depend on anything that changes over time, like Math.random(). It does not secretly rely on a variable declared elsewhere in your file. It acts as an isolated, mathematical box.

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

5
5

If a function uses randomness, it returns a different value each time. That unpredictability makes it impure.

function generateId() {
  return Math.random();
}
const id1 = generateId();
const id2 = generateId();
console.log(id1 === id2);

false

What exactly is a side effect?

A side effect is any state change that is observable outside the called function other than its return value. A function might return the correct value, but if it quietly modifies something else along the way, it is impure.

Consider a function that updates a global variable. A reader might expect the function merely to compute a value, but instead, it alters the program’s broader state. This creates hidden dependencies.

let total = 0;
function addToTotal(amount) {
  total += amount;
  return total;
}
console.log(addToTotal(5));
console.log(addToTotal(5));

Mutating an object argument is another common side effect. Because objects are passed by reference, any changes you make to properties on that object are instantly visible to the code that called your function. This can lead to horrifying bugs where data seems to change itself from a distance.

function addAge(person) {
  person.age = 30;
  return person;
}
const user = { name: 'Alice' };
addAge(user);
console.log(user.age);

30

Embracing Immutability

To avoid side effects when working with objects and arrays, you can use immutability. Instead of modifying an object, you create a brand new one. The spread syntax (...) allows you to copy all existing properties into a new object and overwrite just the ones you need to change.

function addAgePure(person) {
  return { ...person, age: 30 };
}
const user2 = { name: 'Bob' };
const updated = addAgePure(user2);
console.log(user2.age);
console.log(updated.age);

undefined
30

Array methods like .map() and .filter() are fantastic for writing pure functions because they return a new array instead of modifying the original one.

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

[ 1, 2, 3 ]
[ 2, 4, 6 ]

Edge Cases and Limits

Purity is stricter than it first looks in some places and looser in others.

• Reading constants: Reading from an immutable global variable does not violate purity. If the variable never changes, the function remains entirely predictable.
• Internal mutations: Internal mutations (like creating a local array inside the function, modifying it, and returning it) are completely fine as long as they don’t affect outer state. The caller never knows the difference.

A Note on React and Frameworks

If you are learning JavaScript to use a framework like React, you will hear a lot about pure functions. React relies heavily on functional purity for its components and state updates (for instance, treating props and state as immutable). However, it is important to remember that purity is a core computer science and vanilla JavaScript concept, not a React invention. React merely uses these same vanilla JS mechanics to figure out when to efficiently redraw the screen.