JavaScript Functions
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.
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.
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.
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.
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.
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.
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>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.
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.