JavaScript: What Are Pure Functions And Why Use Them?

Pure Function Example

The first time I heard the term “Pure Function” I was confused. What was wrong with a regular function? Why does it need to be pure? Why do I even need pure functions?

Unless you already know what pure functions are you’re probably asking the same questions. They’re actually really simple. Let me show you …

What Is A Pure Function?

The definition of a pure function is:

1. The function always returns the same result if the same arguments are passed in. It does not depend on any state, or data, change during a program’s execution. It must only depend on its input arguments.
2. The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.

That’s all there is to a pure function. If it passes the above 2 requirements it’s pure. You’ve probably created a pure function in the past without even realising.

Before I show you an example of a pure and unpure function lets discuss the dreaded “side effects”.

What Are Observable Side Effects?

An observable side effect is any interaction with the outside world from within a function. That could be anything from changing a variable that exists outside the function, to calling another method from within a function.

Note: If a pure function calls a pure function this isn’t a side effect and the calling function is still pure.

Side effects include, but are not limited to:

• Making a HTTP request
• Mutating data
• Printing to a screen or console
• DOM Query/Manipulation
• Math.random()
• Getting the current time

Side effects themselves are not bad and are often required. Except, for a function to be declared pure it must not contain any. Not all functions need to be, or should be, pure. I will discuss use cases for pure functions in a moment.

But first, let’s show some examples of pure and impure functions …

Pure Function Example In JavaScript

For demonstration purposes here is an example of a pure function that calculates the price of a product including tax (UK tax is 20%):

function priceAfterTax(productPrice) {
 return (productPrice * 0.20) + productPrice;
}

It passes both 1, and 2, of the requirements for a function to be declared pure. It doesn’t depend on any external input, it doesn’t mutate any data and it doesn’t have any side effects.

If you run this function with the same input 100,000,000 times it will always produce the same result.

Impure Function In JavaScript

I’ve showed you a pure function, now lets look at an impure function example in JavaScript:

var tax = 20;
function calculateTax(productPrice) {
 return (productPrice * (tax/100)) + productPrice; 
}

Pause for a moment and see if you can guess why this function is impure.

If you said it’s because the function depends on an external tax variable you’d be right! A pure function can not depend on outside variables. It fails one of the requirements thus this function is impure.

Why Are Pure Functions Important In JavaScript?

Pure functions are used heavily in Functional Programming. And, libraries such as ReactJS and Redux require the use of pure functions (ps. If you don’t know ReactJS learn it. It will change your life).

But, pure functions can also be used in regular JavaScript that doesn’t depend on a single programming paradigm. You can mix pure and impure functions and that’s perfectly fine.

Not all functions need to be , or should be, pure. For example, an event handler for a button press that manipulates the DOM is not a good candidate for a pure function. But, the event handler can call other pure functions which will reduce the number of impure functions in your application.

Testability And Refactoring

Another reason to use pure functions where possible is testing and refactoring.

One of the major benefits of using pure functions is they are immediately testable. They will always produce the same result if you pass in the same arguments.

They also makes maintaining and refactoring code much easier. You can change a pure function and not have to worry about unintended side effects messing up the entire application and ending up in debugging hell.

When used correctly the use of pure functions produces better quality code. It’s a cleaner way of working with lots of benefits.

Note that pure functions are not limited to JavaScript. For an in depth — mind numbing — explanation of pure functions see here. I also highly recommend reading this and this.