Pure Functions and Side Effects in JavaScript

Understanding pure functions and side effects is essential for writing clean, predictable, and maintainable JavaScript code. They are a fundamental concept in functional programming.

Pure Functions

A pure function is a function that:

1. Always returns the same output for the same input.
2. Does not modify any external state or variables (no side effects).

Characteristics of Pure Functions

• Deterministic: Same input → same output
• No reliance on external state or global variables
• Do not change arguments or data outside the function
• Easier to test, debug, and reuse

Syntax Example

function add(a, b) {
  return a + b; // Output depends only on inputs
}

console.log(add(2, 3)); // 5
console.log(add(2, 3)); // 5 (always same)

Another Example: Array Transformation

const numbers = [1, 2, 3];

function doubleArray(arr) {
  return arr.map(num => num * 2); // Pure: doesn't modify original array
}

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

Side Effects

A side effect occurs when a function modifies something outside its scope or interacts with external systems. Examples include:

• Modifying global variables
• Changing passed-in objects or arrays
• Logging to console
• Making HTTP requests
• Manipulating the DOM

Example of Side Effects

let counter = 0;

function incrementCounter() {
  counter += 1; // Side effect: modifies external variable
  return counter;
}

console.log(incrementCounter()); // 1
console.log(incrementCounter()); // 2 (depends on external state)

Differences Between Pure Functions and Side Effects

Benefits of Pure Functions

• Easier to test and debug
• More predictable behavior
• Avoids unintended changes in application state
• Compatible with functional programming patterns like map, filter, and reduce

Handling Side Effects

Not all side effects are bad. Some operations must interact with external systems (e.g., API calls, UI updates). The key is to isolate side effects from pure logic:

// Pure function for calculation
function calculateTotal(prices) {
  return prices.reduce((sum, price) => sum + price, 0);
}

// Side effect separated
function displayTotal(total) {
  console.log(`Total Price: ${total}`);
}

const total = calculateTotal([10, 20, 30]);
displayTotal(total); // 60