Closures in JavaScript explained with real examples

What Is a Closure

A closure is a function that retains access to variables from its outer scope even after that outer function has returned. This happens automatically in JavaScript — every function closes over its environment.

Basic Closure

function makeCounter() {
  let count = 0; // lives in the closure

  return function() {
    count += 1;
    return count;
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

// count is inaccessible from outside — private

Factory Function Pattern

Closures power the factory pattern — a function that produces configured functions.

function multiplier(factor) {
  return (n) => n * factor; // closes over factor
}

const double = multiplier(2);
const triple = multiplier(3);

double(5); // 10
triple(5); // 15

Common Pitfall: Closures in Loops

// Bug with var
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // prints 3, 3, 3
}

// Fix with let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // prints 0, 1, 2
}

let creates a new binding per iteration; var shares one. This is a real-world reason to prefer let.