Closures are the question every senior interviewer reaches for when they want to separate "I learned JS from a YouTube playlist" from "I actually understand JS". The good news is the concept is not complicated. The bad news is most explanations make it sound mystical.

Forget the mysticism. A closure is a function plus the memory record it was born next to. That is the whole thing. Let's unpack the parts.

Lexical scope, written not called

Lexical scope means JS decides what variables a function can see based on where you wrote the function in the source code, not where you called it from.

const city = "Bengaluru";
 
function showCity() {
  console.log(city);
}
 
function caller() {
  const city = "Mumbai";
  showCity();
}
 
caller(); // Bengaluru, not Mumbai

showCity was written next to the global city, so it sees "Bengaluru". It does not matter that caller had its own city. The link was decided at write time.

That link is called the scope chain. Inner scope first, then outer, then outer's outer, then global. JS walks this chain looking for the name.

Every execution context carries a reference called the lexical environment. It is just a record of, "here are my variables, and here is a pointer to my parent's record." That parent pointer is what makes the chain.

Closures, the chai-stall cash-box

Imagine a chai-stall owner who gives his cousin a small cash-box and sends him out to deliver chai to offices. The cousin walks away from the stall, but the cash-box goes with him. He can still take payments because he is carrying that one box.

A closure is the same. A function that gets returned from another function carries its outer lexical environment with it, even after the outer function has finished.

function makeWallet(initial) {
  let balance = initial;
  return function spend(amount) {
    balance -= amount;
    return balance;
  };
}
 
const wallet = makeWallet(1000);
wallet(150); // 850
wallet(200); // 650

Step-by-step.

1. Step 1. makeWallet(1000) is called. New EC pushed. balance = 1000.
2. Step 2. It returns the inner spend function. The outer EC pops off the stack.
3. Step 3. Normally balance would be garbage-collected. But spend still references it, so JS keeps that lexical environment alive.
4. Step 4. wallet(150) calls spend. It walks the scope chain, finds balance in the preserved environment, mutates it.
5. Step 5. Next call sees the updated 850.

Interview trap: a closure does not snapshot values. It holds a live reference. Mutate balance and every call to spend sees the new value.

The famous for var setTimeout trap

This one shows up in every interview, every year.

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log("Order", i), 100);
}
// Output: Order 4, Order 4, Order 4

Why? var is function-scoped, so there is only one i shared by all three callbacks. By the time the timers fire, the loop has finished and i is 4. All three closures point at the same i.

Fix with let.

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log("Order", i), 100);
}
// Output: Order 1, Order 2, Order 3

let is block-scoped. Each iteration of the loop creates a fresh i in a new lexical environment. Each callback closes over its own copy. This is not a bug fix, it is JS doing exactly what the spec says.

Closures and memory, the leak nobody talks about

A closure only keeps the variables it actually references. JS engines are smart about this. But you can still leak.

function loadOrders() {
  const huge = new Array(1_000_000).fill("order");
  return function getCount() {
    return huge.length;
  };
}
 
const counter = loadOrders(); // huge stays in memory forever

huge is referenced by getCount, so the million-element array cannot be collected. If you only need the length, pull it out before returning.

function loadOrders() {
  const huge = new Array(1_000_000).fill("order");
  const length = huge.length;
  return function getCount() { return length; };
}

Now huge is unreferenced after loadOrders returns and the garbage collector can free it.

Predict the output

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a(), b()); // ?

Each counter() call creates a fresh n in a fresh lexical environment. a and b have separate boxes. Output is 1 2 1.

Senior rule: a closure is a function plus the lexical environment it was born in. Not a snapshot, a live reference.