JavaScript Closures

A closure is created when a function "remembers" the variables from the scope in which it was defined, even after that outer scope has finished executing. Closures are not a special syntax you opt into — they happen automatically any time a function is defined inside another function and refers to that outer function's variables.

Closures are one of the most powerful and most misunderstood features of JavaScript. They enable patterns like data privacy, function factories, and memoization, and they explain why some variables in JavaScript seem to "stay alive" long after the function that created them has returned.

Why it matters

A closure is a function that remembers the variables around it after the outer function has finished. Every event handler, timer callback and React hook relies on this. It is also the single most asked concept in JavaScript interviews, so being able to explain it with a small example is worth the practice.

How a Closure Forms

When a function is defined, it keeps a reference to the scope it was created in — not just the values that existed at that moment, but a live link to the variables themselves. If that function is returned or passed elsewhere and called later, it still has access to those outer variables, and can even modify them, because the reference persists as long as the inner function exists.

Why Closures Matter: Data Privacy

Closures let you create private state that cannot be accessed directly from outside a function, only through functions you deliberately expose. This mimics private fields long before JavaScript classes gained a native private-field syntax, and it remains a common and idiomatic pattern.

A Concrete Example: The Counter Pattern

The classic closure example is a counter: an outer function declares a count variable and returns an inner function that increments and returns it. Each call to the outer function creates a brand-new, independent count variable and a brand-new closure over it, so multiple counters never interfere with each other.

Examples

function createCounter() {
  let count = 0; // private to this closure

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

const counterA = createCounter();
const counterB = createCounter();

console.log(counterA()); // 1
console.log(counterA()); // 2
console.log(counterA()); // 3
console.log(counterB()); // 1 — independent closure, unaffected by counterA

1
2
3
1

function makeGreeters() {
  const greeters = [];
  for (let i = 0; i < 3; i++) {
    greeters.push(() => `Greeter #${i}`);
  }
  return greeters;
}

const greeters = makeGreeters();
console.log(greeters[0]());
console.log(greeters[1]());
console.log(greeters[2]());

Greeter #0
Greeter #1
Greeter #2

Exercise

Write makeCounter, which returns a function. Each call of the returned function increases a private count and returns it. Two counters made by separate calls must not affect each other.

Expected output: 1, 2, 1 (one per line)

function makeCounter() {
  // TODO: a private variable, and a returned function that increases and returns it
}

const first = makeCounter();
console.log(first());
console.log(first());

const second = makeCounter();
console.log(second());

function makeCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}

const first = makeCounter();
console.log(first());
console.log(first());

const second = makeCounter();
console.log(second());

Quick quiz

Interview questions