Are you familiar with the concept of pure and impure functions in JavaScript?Understanding pure and impure functions is an essential aspect of writing efficient and maintainable code in JavaScript.

Introduction

Hello Everyone👋, my name is Hitesh Mishra. In this article, we will dive deeper into the differences between the two and why it matters. So, let's get started!

In JavaScript, pure functions and impure functions are two types of functions based on their behaviour.

Pure functions

A pure function is a function that always returns the same output given the same input and does not modify anything outside of its scope. It has no side effects and relies only on its input arguments to produce output. This makes it predictable and easier to test, as it does not rely on any external state. Examples of pure functions include mathematical operations like addition and multiplication, and array or string manipulation functions like slice and concat.

// Pure function example
function doubleArray(arr) {
  return arr.map((num) => num * 2);
}

const myArray = [1, 2, 3];
const doubledArray = doubleArray(myArray); // [2, 4, 6]
const doubledArrayAgain = doubleArray(myArray); // [2, 4, 6]

In this example, the doubleArray function takes an array of numbers as input and returns a new array where each element is twice the original value. This function has no side effects, as it does not modify the original array or any external state. It is also pure because given the same input, it always returns the same output.

Impure functions

On the other hand, an impure function is a function that has side effects or modifies something outside of its scope. This means that it can return different outputs for the same input, depending on the state of the application or environment in which it is executed. Examples of impure functions include functions that modify the DOM, interact with a database, or access a network resource.

// Impure function example
let count = 0;
function incrementCount() {
  count++;
  console.log(`Count is now ${count}`);
}

incrementCount(); // Count is now 1
incrementCount(); // Count is now 2

In this example, the incrementCount function increments a global variable count and logs the new value to the console. This function has a side effect, as it modifies the global state of the application. It is also impure, because calling it multiple times with the same input (i.e. no input) can produce different outputs, depending on the current value of count.

It is important to note that while impure functions can be useful, they can also make your code harder to test and debug, and can lead to unexpected behaviour if not used carefully. Therefore, it is generally recommended to strive for as much purity as possible in your functions, while recognizing that some impurity may be necessary for certain situations.

Conclusion

I've created a concise and informative table that outlines the key differences between pure and impure functions in JavaScript. The table serves as a helpful reference to understand and compare the two types of functions and their distinct characteristics. Check out the table below to gain a better understanding of pure and impure functions in JavaScript.