What Is a Pure Function in JavaScript? An In-Depth Look

Pure functions are a foundational concept in functional programming that enable writing cleaner, more predictable, and testable code. As a JavaScript developer, understanding what makes a function pure can improve the quality of the programs you write. In this in-depth guide, we‘ll explore the core characteristics of pure functions, why they are valuable, and how to write them in JavaScript.

The Anatomy of a Pure Function

A pure function in JavaScript can be defined as a function that:

1. Always produces the same output given the same input
2. Has no side effects

Let‘s break down each of these properties further.

Consistent Input-Output Mapping

One of the hallmarks of a pure function is that it will always return the same result when called with the same arguments. Take this simple pure add function:

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

No matter when or where the add function is called, if you pass it 2 and 3, it will always return 5. The output is purely a product of the input, without depending on any external state.

In contrast, consider this impure addToCount function:

let count = 0;

function addToCount(num) {
  count += num;
}

Here the function‘s behavior depends on the mutable external variable count. Calling addToCount(5) multiple times will yield different results each time as count gets updated. The inconsistent output makes the function impure and harder to reason about.

Freedom from Side Effects

The other core tenet of pure functions is the absence of side effects. A side effect is any change to state outside the function‘s own scope or any observable interaction with the outside world. Some examples of side effects include:

• Modifying an external variable or object property
• Logging to the console or displaying on the UI
• Making an HTTP request
• Querying the DOM
• Triggering any external process
• Calling any other functions with side-effects

Pure functions are self-contained and do not depend on or modify the state of variables outside their scope. Let‘s contrast an impure toUpperCase function with a pure version:

// Impure
let greeting = "Hello, world!";

function toUpperCase() {
  greeting = greeting.toUpperCase();
}

// Pure
function toUpperCase(str) {
  return str.toUpperCase();
}

The impure function directly mutates the external greeting variable. The pure version simply takes a string as input and returns a new uppercased string without modifying anything outside its scope.

The Benefits of Purity

Why go through the trouble of writing pure functions? It turns out pure functions have a number of beneficial properties for making programs simpler, more predictable, and testable.

Simplified Reasoning

Pure functions are easier to reason about because they only depend on their input and provide predictable output. With pure functions, you can be sure that:

• Given the same input, a pure function will always return the same result
• Executing a pure function will never alter any external state

This predictable behavior means you can call a pure function anytime with confidence, without worrying about unintended consequences or timing dependencies. You also don‘t need to reason about the entire program state to understand a pure function – its behavior is fully described by its input-output mapping.

Easier Testing and Debugging

The deterministic nature of pure functions makes them much easier to test than impure functions. Since they have no external dependencies, pure functions can be tested as isolated units with simple input-output assertions. You don‘t need complex mocking or setup to write a test for a pure function.

Debugging pure functions is also simpler since there are no hidden side effects to track down. If a pure function is not returning the expected result, the problem must lie within the function‘s own logic. Impure functions can fail due to any number of external factors, making them much trickier to debug.

Avoiding Subtle Bugs

Shared mutable state and side effects are a recipe for subtle, hard-to-reproduce bugs. Impure functions that mutate external variables can introduce timing dependencies and leave the program in an inconsistent state. With pure functions, you can avoid entire classes of bugs caused by unintended side effects.

For example, say you have an impure function that fetches some data from an API and directly mutates a shared data structure. If that function is called from multiple places in the code, it‘s easy to end up with race conditions and inconsistent data. A pure function that returns a new data structure with the fetched data is much safer and more predictable.

Strategies for Staying Pure

We‘ve seen the benefits of pure functions, but how can we ensure our functions stay pure in practice? Let‘s look at some strategies for avoiding side effects and mutations in JavaScript.

Avoiding Side Effects

The best way to avoid side effects is to program declaratively, expressing what to do rather than how to do it. Aim to write functions that take in all needed data as explicit inputs and return a result rather than triggering computation via side effects.

For unavoidable side effects like logging or HTTP requests, try to isolate them at the edges of the program. Keep the core logic pure and push effects to leaf functions that are orchestrated by the main program. Libraries like RamdaJS provide utilities like R.tap for wrapping logging side effects without sacrificing purity.

Avoiding Mutations with Immutable Updates

JavaScript‘s core data structures like objects and arrays are mutable by default. To avoid mutations and keep functions pure, we need to treat data as immutable, creating new objects rather than modifying existing ones.

For objects, use Object.assign or object spread to create a new object with updated properties:

function setProp(obj, key, val) {
  return { ...obj, [key]: val };
}

For arrays, use non-mutating methods like map, filter, and reduce and the array spread operator to produce new arrays rather than mutating:

function removeOdds(arr) {
  return arr.filter(x => x % 2 === 0);
}

function incrementAll(arr) {
  return arr.map(x => x + 1); 
}

By treating data structures as immutable and avoiding mutations, you can keep functions pure and predictable.

Advanced Pure Function Concepts

Pure functions enable some powerful concepts from mathematics and functional programming. Let‘s briefly explore a few of these.

Referential Transparency

A key property of pure functions is referential transparency. An expression is referentially transparent if it can be replaced by its evaluated value without changing the behavior of the program.

Pure functions are referentially transparent because they always produce the same output for the same input. This means any call to a pure function can be memoized – the result can be cached and reused for subsequent calls with the same arguments.

Function Composition

Pure functions are the building blocks of composition, a core tenet of functional programming. Two or more functions can be combined to produce a new function in a declarative way.

Since pure functions are guaranteed to be free of side effects, they can be composed together like operations in math. The output of one pure function can safely be passed as the input to another, allowing complex behavior to be built up from simple pieces.

const compose = (f, g) => x => f(g(x));

const toUpperCase = str => str.toUpperCase();
const exclaim = str => str + ‘!‘;
const angry = compose(exclaim, toUpperCase);

angry("Hello, world") //=> "HELLO, WORLD!" 

Composition lets us create reusable function pipelines and keep programs modular and declarative. Pure functions are essential for making composition reliable and predictable.

When to Use Pure Functions

As we‘ve seen, pure functions have significant benefits for program correctness and maintainability. However, real-world JavaScript programs can‘t be 100% pure – at some point, you need to interact with the DOM, communicate over HTTP, access a database, or perform some other side effect.

The key is to use pure functions strategically in the parts of the program that most benefit from their simplicity and predictability. Some good use cases for pure functions include:

• Utility libraries for data processing or mathematical operations
• State management layers like Redux reducers
• Complex business logic that benefits from isolated unit tests
• Performance-critical code where referential transparency enables memoization

Treat pure functions as the default, only adding side effects where necessary for program requirements. Isolate effects at the boundaries of the system so that the core logic remains pure and predictable.

Conclusion

Pure functions are a deceptively simple but powerful concept for writing more robust and maintainable JavaScript. By avoiding side effects and always returning the same output for the same input, pure functions are easier to reason about, test, and compose compared to their impure counterparts.

Admittedly, writing pure functions requires a bit of discipline and a shift in mindset if you‘re used to imperative programming. However, as you grow comfortable with functional JavaScript concepts, you‘ll start to appreciate the simplicity and predictability that pure functions bring to a codebase.

The next time you‘re writing a function, challenge yourself to make it pure. Treat data as immutable, avoid side effects, and strive for referential transparency. With practice, pure functions will become a valuable tool in your JavaScript arsenal, enabling you to write cleaner, more modular, and less error-prone code.