How do closures work in JavaScript?

In JavaScript, closures are a powerful and fundamental concept that allows functions to “remember” and access their lexical environment (variables, functions, etc.) even after the outer function has finished executing. Here’s a breakdown of how they work:

How Closures Work

Lexical Scoping:
When a function is defined, it captures (closes over) its surrounding lexical environment (i.e., the variables and scope chain available at the time of its creation).
Retained References:
Even if the outer function completes execution, the inner function (closure) retains access to the variables and parameters of its outer scope.

Example

function outer() {
  const outerVar = "I'm from outer!";

  function inner() {
    console.log(outerVar); // Accesses outerVar from the outer scope
  }

  return inner;
}

const closureFunc = outer();
closureFunc(); // Logs: "I'm from outer!"

inner is a closure because it retains access to outerVar even after outer() has finished executing.

Key Characteristics

Memory Retention:
Variables closed over by a closure are not garbage-collected as long as the closure exists.
Encapsulation:
Closures enable data privacy by encapsulating variables that are not exposed globally (e.g., module patterns).

Common Use Cases

Data Privacy:

   function createCounter() {
     let count = 0;
     return {
       increment: () => ++count,
       getCount: () => count,
     };
   }

   const counter = createCounter();
   counter.increment();
   console.log(counter.getCount()); // 1
   // `count` is inaccessible outside `createCounter`

Event Handlers/Callbacks:
Closures retain state for asynchronous operations (e.g., timers, event listeners):

   function setupAlert(message) {
     setTimeout(() => {
       alert(message); // Closure retains `message`
     }, 1000);
   }
   setupAlert("Hello after 1 second!");

Currying/Partial Applications:
Closures enable functions to pre-set arguments:

   function multiply(a) {
     return (b) => a * b; // Closure retains `a`
   }
   const double = multiply(2);
   console.log(double(5)); // 10

Pitfalls to Avoid

Accidental Closures in Loops:
Variables closed over in loops may reference the latest value (not the value at iteration time):

  // Problem: All closures reference the same `i` (final value: 3)
  for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // Logs 3, 3, 3
  }

  // Fix: Use `let` (block-scoped) or an IIFE to capture per-iteration values
  for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // Logs 0, 1, 2
  }

Memory Leaks:
Closures can inadvertently retain large objects in memory. Clean up references when they’re no longer needed.

Under the Hood

A closure’s environment is stored in the [[Environment]] property of the function object.
When the closure is invoked, it combines its own scope with the outer lexical environment to resolve variables.

Closures are a core feature of JavaScript, enabling patterns like modules, memoization, and functional programming techniques. Understanding them unlocks powerful ways to structure and manage state in your code!