Learnitweb

Pure Function in JavaScript

1. Introduction

A pure function is a function that adheres to two key principles:

  1. Deterministic: For the same input arguments, the function always produces the same output.
  2. No Side Effects: The function does not modify any external state or interact with the outside world (e.g., modifying variables, changing DOM, or performing I/O operations).

Pure functions are a foundational concept in functional programming and are widely appreciated for their simplicity, predictability, and testability.

2. Key Characteristics of Pure Functions

  • Same Input, Same Output:
    • A pure function always returns the same result for the same arguments.
  • No Side Effects:
    • A pure function does not rely on or modify external variables, data, or state.
    • It does not perform actions like logging to the console, modifying DOM elements, or altering global variables.
  • Immutability:
    • Pure functions do not mutate the arguments they receive or any external objects. Instead, they create and return new values.

3. Examples of Pure Functions

Pure Function: Addition

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

console.log(add(2, 3)); // Output: 5
console.log(add(2, 3)); // Output: 5 (always the same for the same inputs)

It always returns the same result for the same input and does not depend on or modify external variables.

Pure Function: Array Transformation

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

const numbers = [1, 2, 3];
console.log(doubleArray(numbers)); // Output: [2, 4, 6]
console.log(numbers);              // Output: [1, 2, 3] (original array unchanged)

It does not modify the input array but returns a new one.

4. Examples of Impure Functions

Impure Function: External Dependency

let multiplier = 2;

function multiply(a) {
    return a * multiplier;
}

console.log(multiply(3)); // Output: 6
multiplier = 3;
console.log(multiply(3)); // Output: 9

The output depends on the external multiplier, which can change, breaking the deterministic property.

5. How to Write Pure Functions

Avoid External Dependencies

Use arguments passed to the function instead of relying on external variables.

// Pure
function add(a, b) {
    return a + b;
}

// Impure
let x = 10;
function impureAdd(a) {
    return a + x;
}

Avoid Side Effects

Do not modify external variables or perform actions outside the function.

// Pure
function square(n) {
    return n * n;
}

// Impure
function impureSquare(n) {
    console.log(n * n); // Side effect: console.log
    return n * n;
}

Immutability

Do not modify objects or arrays passed as arguments. Instead, return a new copy with changes.

// Pure
function addToArray(arr, value) {
    return [...arr, value];
}

const numbers = [1, 2, 3];
console.log(addToArray(numbers, 4)); // Output: [1, 2, 3, 4]
console.log(numbers);               // Output: [1, 2, 3] (unchanged)

// Impure
function impureAddToArray(arr, value) {
    arr.push(value); // Modifies the original array
    return arr;
}

impureAddToArray(numbers, 4);
console.log(numbers); // Output: [1, 2, 3, 4] (modified)

6. Real-World Applications of Pure Functions

  • Pure functions are perfect for tasks like filtering, mapping, and reducing data.
  • Reducer functions in Redux are required to be pure to ensure state predictability and immutability.
  • Pure functions can be composed to build complex operations from simpler ones.