What is Pure Function in JavaScript?

A pure function in JavaScript is a function that returns the same result if the same arguments(input) are passed in the function. Let's see what makes a function pure in detail:

• The return value of the function on the function call should only be dependent on the input function arguments.
• It should not modify any non-local state. It means the function should not manipulate anything other than the data stored in the local variables declared within the function.
• The function should not have any side effects, such as reassigning non-local variables, mutating the state of any part of code that is not inside the function, or calling any non-pure functions inside it.

A function that follows all the above conditions is a pure function in javascript.

Example of a Pure Function in Javascript

Console:

All three functions in the above code are pure functions. Their return value is just dependent on the input arguments, they don't mutate any non-local state and they have no side effects (we will discuss side-effects further in this article).

Definition

Pure functions are building blocks of functional programming. They always yield consistent result and does not manipulate non-local state or have any side effects. There are mainly two requirements of a pure function:

• Consistent result
  • Same result for the same input every time.
  • Result is only dependent on the input arguments. As the function does not perform any operation that requires any variable or data from outside the scope of the function.
• No side effects some common side effects:
  • Making an HTTP request
  • Mutating any data that is not part of the function
  • Printing to a screen or console
  • DOM Query/Manipulation
  • Using Math.random()
  • Getting the current time

Now let's see why we should use pure functions in our javascript code.

Why Use Pure Functions in Javascript?

Pure functions make the code more readable, testable, and performant. The application that uses pure functions is easier to reason about and construct. Let's see its uses in detail:

1. Better Readability

Pure functions increase the readability of the javascript code because of its simplicity. A pure function always generates a consistent result and it does not mutate any non-local state. All these features of a pure function make it easier to read and understand the code.

2. Testable

It's easier to perform unit testing on a pure function than on an impure function. A pure function result only depends upon its input arguments hence the whole function can be treated as an independent entity. So we can just take that function and test it with some standard input values whose output is known. And we can compare the output we get from the pure function with the expected output to perform the testing.

3. Better Performance

Pure functions can be memoized and this makes your application faster. Memoization is an optimization technique that makes your code more efficient and hence quicker. In memorization, the computational result is stored in the cache once and can be retrieved later when it is needed again instead of computing it again.

Impure Function in Javascript

An impure function gives inconsistent results (different results for the same input values) and can have one or more of one side effects that we discussed earlier in the article. So impure functions in javascript are functions that can mutate non-local states and the result they return might not only be dependent on its input arguments.

Examples of an Impure Function

Let's see some examples of impure functions:

Mutating its arguments:

In the above example, we are manipulating the myArray argument and a pure function should not change(manipulate) any part of the code. That's why this is an impure function.

Returning value dependent on the non-local state:

Console:

In the above code, the result the function is returning is dependent on the variable that is not declared inside the function, that's why this is an impure function.

Other than these if a function does anything that affects the part of the code that's not in its block then it's an impure function. If it has any of the side effects like:

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

It's an impure function

How to Use Pure Functions in Your JavaScript Application?

Pure functions are fantastic however, you cannot expect to create a project just using pure functions. Pure functions should not have any side effects which means, they cannot manipulate DOM, cannot retrieve data from a database or manipulate the data, cannot make an HTTPS request, and many other things that you cannot do without having any side effects. However, to make a properly functioning application with features like creating, updating, and deleting data we have to use impure functions.

We have to organize our application so that a particular part of the code handles the side effects and keeps the other part of pure functions. So our application will be a mix of pure functions and impure functions.