Closures

A closure is one of the most powerful and frequently misunderstood concepts in JavaScript. Simply put, a closure is a function bundled together with its lexical environment. This means that an inner function always has access to the variables and parameters of its outer function, even after the outer function has finished executing.

Whenever you create a function in JavaScript, a closure is created at that exact moment. The function permanently captures a reference to the environment where it was born.

Accessing Outer Scope

Because of closures, an inner function gives you access to an outer function’s scope. Here is a basic example where the inner function displayName accesses the variable name defined in its parent function makeFunc.

function makeFunc() {
  const name = 'Mozilla';
  function displayName() {
    console.log(name);
  }
  return displayName;
}
const myFunc = makeFunc();
myFunc();

Mozilla

When myFunc is invoked, it still has access to name, even though makeFunc has already finished executing.

Emulating Private Methods

JavaScript historically didn’t have a native way to declare private methods. However, closures provide a clean way to emulate private state. The variables captured by the closure cannot be modified from the outside.

const counter = (function() {
  let privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment() {
      changeBy(1);
    },
    value() {
      return privateCounter;
    }
  };
})();
counter.increment();
console.log(counter.value());

1

The Scope Chain

Every closure actually has three distinct scopes it can pull from:

1. Local scope (its own scope)
2. Enclosing scope (can be block, function, or module scope)
3. Global scope

const globalVar = 'G';
function outer() {
  const outerVar = 'O';
  return function inner() {
    const innerVar = 'I';
    console.log(globalVar, outerVar, innerVar);
  }
}
outer()();

G O I

The Loop Closure Trap

A very common edge case occurs when creating closures inside loops using var. Because closures capture variables by reference and not by value, and because var is function-scoped rather than block-scoped, all closures created inside the loop will point to the exact same variable. By the time they execute, the loop has already finished, and they all see the final value.

function createFuncs() {
  var arr = [];
  for (var i = 0; i < 3; i++) {
    arr.push(function() {
      console.log(i);
    });
  }
  return arr;
}
const funcs = createFuncs();
funcs[0]();
funcs[1]();
funcs[2]();

3
3
3

You might have expected this to print 0, 1, 2. Instead, because i was declared with var, there is only one i variable shared across all three closures. By the time the functions are called, the loop has finished and i has reached 3.

Using let instead of var fixes this entirely, because let creates a new block-scoped binding for every single iteration of the loop!

Edge Cases to Watch Out For

• Shared Bindings: As shown in the loop trap, using var inside a loop creates a single binding shared by all loop iterations, causing all closures to see the final value. Use let to give each closure its own binding.
• Stale State in React: Closures inside setTimeout or setInterval can retain stale state if you are not using functional state updates. The closure remembers the state exactly as it was when the timeout was declared.