JavaScript Functions

JavaScript Pure Functions

Written by Swapnil RajaPublished 24 Aug 2026

A JavaScript pure function always returns the same result for the same input and changes nothing outside itself.

Anything a function changes outside itself is called a side effect.

A pure function has none, which makes it easy to trust and easy to test.

Example

javascript

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
console.log(add(2, 3));

This function is pure: the same input always gives 5.

It reads nothing outside and changes nothing outside.

What is a Pure Function?

A pure function must satisfy two rules at once.

First, the same input always produces the same output.

Second, it has no side effects: it does not change variables, arrays, objects, the page, or anything else outside itself.

Syntax

javascript

function pure(input) {
  return input * 2;
}

Everything the function needs comes in through its parameters.

An Impure Function

This one depends on an outside variable, so its result can change.

Example

javascript

let rate = 1.2;

function withTax(price) {
  return price * rate;
}

console.log(withTax(100));

rate = 1.5;

console.log(withTax(100));

The same argument gives two different answers, so the function is impure.

Making It Pure

Pass everything the function needs as a parameter.

Example

javascript

function withTax(price, rate) {
  return price * rate;
}

console.log(withTax(100, 1.2));
console.log(withTax(100, 1.2));

Now the answer depends only on the arguments.

Changing an Array is a Side Effect

push changes the array that was passed in.

That is a side effect, even though nothing global is touched.

Example

javascript

const numbers = [1, 2, 3];

function addImpure(list, value) {
  list.push(value);
  return list;
}

addImpure(numbers, 4);
console.log(numbers);

The original array has been changed, which can surprise other code.

Returning a New Array

A pure version leaves the original alone and returns a copy.

Example

javascript

const numbers = [1, 2, 3];

function addPure(list, value) {
  return [...list, value];
}

const bigger = addPure(numbers, 4);

console.log(numbers);
console.log(bigger);

The original still has three items, and a new array has four.

Where Side Effects Belong

A program cannot be entirely pure. Something has to update the page or save the data.

The usual approach is to keep the calculations pure and gather the side effects in a few clear places.

Example

javascript

function calculateTotal(items) {
  return items.reduce((sum, n) => sum + n, 0);
}

const total = calculateTotal([10, 20, 30]);

console.log("Total: " + total);

The calculation is pure; only the last line touches the outside world.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Pure Functions</title>
</head>
<body>

  <h1>JavaScript Pure Functions</h1>

  <p id="result"></p>

  <script>
    function calculateTotal(items) {
      return items.reduce(function (sum, n) {
        return sum + n;
      }, 0);
    }

    const total = calculateTotal([10, 20, 30, 40]);

    document.getElementById("result").innerHTML = "Total: " + total;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try calling it twice:

Call calculateTotal with the same array twice and confirm the answer never changes.

Important Points

A pure function returns the same output for the same input.
A pure function has no side effects.
Reading an outside variable makes a function impure.
Changing an array or object that was passed in is a side effect.
Keep calculations pure and gather side effects in a few clear places.

Conclusion

JavaScript pure functions are predictable: the same input always gives the same result.

Because they touch nothing outside themselves, they are simple to test and safe to reuse.

Understanding purity helps you write code that is easier to reason about as it grows.

PreviousJavaScript call, apply and bind NextJavaScript Scope