Pure functions in JavaScript

Introduction

Before understanding what pure functions are, we should be having a decent knowledge of what functions are in JavaScript. Functions are the fundamental building blocks in JavaScript. In simpler terms, a function is a block of code that performs a specific set of task it is made for. Let's make a simple sum function to see what function looks like in JavaScript:

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

Functions help us to write clean, reusable code but as you get more experienced, you'll notice that writing clean code becomes more and more tough. In order to continue good practice of writing clean code, it is advised to use tools and patterns that make the job easier for you. One of these patterns is called pure functions and they are a great tool for cleaning up your code. Let's see in detail what pure functions are.

jerry-rig-everything-lets-get-started.gif

What are pure functions?

A function is said to be a pure function if it satisfies the following criteria:

  1. It produces the same output every time the same input is provided.
  2. It should not have any side effects.
  3. The function should use only the inputs of the functions to get the result.

So, as we now know the key points to tell whether a function is pure or not, let's see each on of them in detail.

jin.gif

Producing same output for same input

Consider the following example to understand this point better:

function greetUser (username) {
  console.log('Welcome', username)
}

The above function greetUser will take username as an input and greets them with a welcome message on console. Now this function is an example of a pure function as it gives us the same output for same input. Let's say the username is "nakulsharma15". So, whenever I call greetUser with the username "nakulsharma15", we'll be getting the same output. Now let's consider another example:

let greetMessage = "Good morning"

function greetUser2 (username) {
  console.log(greetMessage, username)
}

Now this function is an impure function because now the output of greetUser2 depends on a variable which is outside the function. Hence, the output of the function can be changed by changing an external variable which violates the criteria of pure functions. Therefore, greetUser2 is not a pure function.

Function should not have any side effects

A side effect is any code in a function that changes something outside the function. This could be as simple as changing a global variable or calling an API within a function. Pure functions should not have any side effects. An example of function having side effect is shown below:

const array = [1, 2, 3, 4, 5]

function addElementToArray(array, element) {
  array.push(element)
  return array
}

The above function changes the content of array which is outside the function and hence counts as an impure function. To make it a pure function, we can do some modifications in above function which results in the following function:

const array = [1, 2, 3, 4, 5]

function addElementToArray(array, element) {
  return [...array, element]
}

Function should not use any external data

This basically means that the function should not use any data which is not provided to function. Suppose, we have a function sum which takes two numbers and return their addition.

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

This function sum is a pure function as it is taking both the numbers as its inputs and returning their addition.

Conclusion

Thanks for reading! I hope that you now have a clear understanding of what pure functions are. Concepts like a pure function will make your code more usable and easy to manage. It means lesser bugs, quick identification of issues, increased reusability and testability.

the-office-bow.gif