What Is a Pure Function in JavaScript?

What Is a Pure Function in JavaScript?

What are Pure Functions? Not long ago, I learned the concept of Pure Functions, and to my surprise, I was already writing many pure functions, without realising that there was a term for it.

What are Pure Functions? Not long ago, I learned the concept of Pure Functions, and to my surprise, I was already writing many pure functions, without realising that there was a term for it.

JavaScript developers are embracing Functional Programming quite a lot these days, and there is a huge advocacy to write Pure Functions.

What qualifies as a Pure Function?

A function is considered pure, if it adheres to the following rules:

  1. The function always returns the same output if the same arguments are passed in.
  2. The function does not produce any side-effects.

We have all written pure functions in the past knowingly or unknowingly.

Take a look at a pure function below, that returns a sum of two numbers given two input arguments.

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

The output of this function will always remain the same, if the same input arguments are passed in. Simple enough. Pure functions are simple building blocks that have a predictable behavior always. Hence they always return the same predictable output, without any external influence.

Here is a simple example, on what an impure function looks like.

 var value = 5; function impure(arg) { return value + 2 + 3; }

Here the function is considered impure, because it is not using the argument that was passed to it. Instead, it uses an external value which is subject to change. Therefore, making the function impure due to external interference/side-effects.

Alright, let’s talk about the requirement two on side-effects.

What are Side-Effects?

Side effects occur anytime your function interacts with the outside world. Some examples of common side-effects include:

  • Making an API call
  • Mutating data
  • console logs to the screen
  • Manipulating the DOM
  • Date.now() to get current date/time
  • async await calls/waiting for promises to resolve
  • math.random() to generate random numbers

Well, you may wonder how we can write functions without side-effects all the time. It is quite challenging to avoid side-effects altogether. All I am saying is, for a function to qualify as pure, as the name suggests, it should have no side-effects.

What do I gain by writing Pure Functions?

Pic courtesy: Picpedia.Org

Alright, we got the definitions out of the way. You may now ask what are it’s benefits.

1. Testing is easy

Imagine, you have a bunch of pure functions, that do only one thing. They don’t have any external side-effects and they always return predictable output. These functions will be so much easier to test, than a function that has a bunch of dependencies and unpredictable behaviour. Writing clean, testable code will help improve your code quality drastically.

2. Debugging code is not a pain

With pure functions, debugging code won’t be a big pain, compared to debugging impure functions. If you run into an issue or bug, and you have narrowed it down to a pure function, then you can be rest assured that you don’t have to look outside the scope of that function to find the issue. Therefore, drastically improving the developer’s debugging experience.

3. Memoization to improve performance

With pure functions, it is guaranteed to return the same output for a given input. This creates possibility of memoization. When the same input is passed on to a function, it can pull the results from a cache, making the app perform faster. Caching can save tons of resources and improve performance. And caching pure functions can be done without any worry, since they are predictable with no side-effects.

4. Maintainable code, easy to refactor

This is an obvious one. With code, that is so clean, easy to test and debug, you end up with very maintainable code as well. This is an important aspect that keeps future in mind. Years/months later if your software has to have additional features, and refactoring, the code that comprises of bunch of pure functions will be extremely intuitive to re-factor. They won’t have any external side-effects that the developer would need to worry about. Even new developers on the team can take up on this task with ease.

A Real-World example that uses Pure Functions

Redux is so popular and most of us have either used it in some projects or have heard of it. Reducers are functions that are part of the Redux pattern and play a crucial role. The most important feature of redux reducers is that, they are Pure Functions.

Reducers are pure functions that take in a state and action and return a new state.

function(state, action) => newState 

Reducers are the major portion of the Redux integration and hold a lot of the business logic. And since redux enforces that the reducers have to be pure functions with no side-effects we end up with very elegant and simple functions that are easily maintainable

Redux is a classic example of writing pure functions. It derives inspiration from functional programming and has gained immense popularity in the last few years. It is heavily used in modern web applications for state management. Now you know the reason behind its success, t is it’s requirement to write pure functions. This makes the code testable, clean, easier to debug and maintainable.


We looked into how writing Pure Functions can benefit you and keep your code simple and elegant. Keep in mind that Pure Functions are not limited to JavaScript. This concept can be adopted in any programming language of your choice. It works well with JavaScript and any functional programming language.


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.