Pure Functions and Side Effects in JavaScript

Let’s discuss pure functions and why they’re so important to our JavaScript code.

There any many concepts in the computer science field that are very old and were created decades ago. It happens all the time—we work on something and follow a paradigm or concept that was created by some amazing mind decades ago and we don’t even notice it. There were many tries in the past to define and find the best approaches for given situations. Many worked well and many didn’t.

Functional programming is a very important programming paradigm that has been used for decades. Many languages follow the paradigm to follow a more simplistic, powerful and concise way of programming. It is a programming paradigm that follows a simple rule of creating, applying and composing functions. It has become such an important paradigm that developers always try to follow a few concepts from it in other languages.

One of the concepts of functional programming is pure functions. The idea of relying on functions and creating the purest functions possible can make our code predictable, concise and powerful.

Pure Functions

Functions are one of the most important aspects of programming. Any programming language that you can imagine depends on functions.

Functions are a self-contained piece of code that performs a specific task. It can receive some data, make something with it, and return it as a function result. It can be called many times in different parts of the same application.

A pure function is a function that always returns the same output given a specific input.

A pure function does not change any value or state outside of its scope and it doesn’t depend on any value outside of its scope. It only depends on the input given to the function and does not produce any side effects.

Complexity is anything that makes software hard to understand or to modify.
— John Outerhout

There are only two things that we need to make sure to define that a function is a pure function:

1. The function must be predictable. Given a specific input, it will always return the same output.
2. The function does not produce any side effects.

Here’s a simple example of a pure function:

function sumTwoNumbers(num1, num2) {
  return num1 + num2
};

The function sumTwoNumbers receives two arguments. We’re simply adding the two numbers and returning them as the function result.

This function is a pure function because the result of the function relies entirely on the arguments passed to the function. Our function is not modifying any state or value outside its scope. No matter what we have in our application, if we’re dealing with heavy state management, data mutations, etc.

Now, let’s take a look at an example of the following function:

const person = {
  name: "Leonardo"
};

function myImpureFunction(obj) {
  obj.name = "Leonardo Maldonado";
  return obj;
}

This is a good example of an impure function because it is modifying the value of the person object outside its scope. Our function is receiving an object as an argument and modifying the name property.

Pure functions are used in almost every programming language because they help us to create more predictable code. We’re using pure functions in JavaScript without even noticing it.

Take as an example the Math built-in object that we can use for mathematical operations. There are many different functions that we can use and all the functions are pure. The Math.max() function, for example, returns the largest of the zero or more numbers given as input parameters.

No matter how many times we run the function, if we always pass the same input arguments, we’re going to receive the same result:

Math.max(1, 5, 10); // 10

Benefits of Pure Functions

There are many reasons to write pure functions in our applications. Here are a few reasons why we should write more pure functions and make them the go-to way of writing functions.

1. Predictability

It helps all of us to write some piece of code that we’re proud of. We get it. The truth is that nobody wants to write messy code but sometimes it happens. Usually, when someone asks you, “What’s this code doing?” it can mean that your code is hard to read.

Pure functions help us to create more predictable and readable code. Pure functions are small functions that perform some very specific task and will always return the same output given a specific input.

Readability matters in every application nowadays. We should remember that it’s not only us that is working in a codebase. After we write some line of code, there will be a lot of developers who will read it, and it should be as clean and readable as possible to not cause problems for other devs.

2. Testing

Pure functions are also the best option for writing tests. Testing pure functions is easier because they are predictable and do not produce any side effects so we will never be modifying any state of our value outside its scope.

function sumTwoNumbers(num1, num2) {
  return num1 + num2
};

describe("sumTwoNumbers", () => {
  test("should return 2". () => {
    expect(sumTwoNumbers(1, 1)).toEqual(2);
  });
});

An impure function on the other hand is a very hard function to write tests for. They modify the state or value outside its scope and can return a different result given a specific input every time.

3. Memoization

Caching the returned results of a function is something that can save us from writing expensive computational functions and make them more performant.

Pure functions are easy to memoize. Since they return the same results given a specific input, the cached result can be returned when the function is called with the same input arguments.

The key for writing a pure function is splitting huge functions into small ones and not mutating any values outside its scope. Each function should be responsible for a small part of the code.

Conclusion

Understanding and using pure functions in your code will make your code more readable, concise and predictable. It helps you to develop better code, making it easy to test and make your whole application more performant. You will start to see the benefits of writing pure functions in your code as they will make it more readable and predictable.