Pure vs Impure Functions in JavaScript

Introduction

We have reached a day where we are classifying functions as pure and impure. If this is the first time you are hearing this term. Then there is a huge chance you are wondering what "pure function" is on earth. This article focuses on explaining the difference between pure and impure functions and what is observable side effects.

Pure Functions

The definition of a pure function is that:

1. The function always returns the same result if the same arguments are passed in. These functions do not access or modify variables outside of their scope, which means it does not depend on any state or data and only depend on their input arguments.

2. They do not cause side effects (such as network requests, logs, or state changes).

Any function that satisfies the above two conditions can be deemed as a pure function. Now you might wonder what a side effect is, let's dig deep into that.

Side Effects

A 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 an HTTP request
• Mutating data
• Printing to a screen or console
• DOM Query/Manipulation
• Generating a random number (Math.random())
• Getting the current time

Side effects do not mean they are bad, many a times, we require them. But when a function is needed to be pure, it should not contain any side effects.

Pure Function Example

For demonstration purposes here is an example of a pure function that calculates the percentage of marks obtained out of 100.

function percentage(obtainedMarks, totalMarks) {
 return (obtainedMarks/totalMarks)*100;
}

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. This function will always and always generate the same result no matter what.

Impure Functions

Now let's take a look at what an impure function is.

let totalMarks = 100;
function percentage(obtainedMarks) {
 return (obtainedMarks/totalMarks)*100;
}

Here you can observe that the return value will change according to the change in an outside variable.

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.

Not all functions need or should be pure. A button press event handler that modifies the DOM, for instance, is not a good fit for a pure function. However, using other pure functions from the event handler will cut down on the number of impure functions in your application.

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.

Additionally, they make it much simpler to maintain and refactor code. A pure function can be changed without worrying about unforeseen consequences messing up the entire application and sending you to debugging hell.

So simply put, pure functions are an absolute way to have clean code and its a best practice to have

Reference:

• https://jsfunctions.io/pure-versus-impure-functions