JavaScript: Closures (In-Depth)

A closure is a feature of JavaScript where an inner function has access to the variables and parameters of its outer function, even after the outer function has finished executing. Closures are essential for maintaining private state, creating function factories, and asynchronous programming.

What is a Closure?

When a function is declared inside another function, the inner function forms a closure. This means it "remembers" the environment in which it was created.

Closure Example

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
    

How Closures Work

• The inner function keeps a reference to the count variable even after makeCounter() has finished.
• This allows each counter to have its own private count state.

const anotherCounter = makeCounter();
anotherCounter(); // 1 (separate count!)
    

Closures and Private Data

Closures enable data privacy by keeping variables hidden from the outside world.

function secretHolder(secret) {
  return {
    getSecret: function() { return secret; },
    setSecret: function(val) { secret = val; }
  };
}
const holder = secretHolder("hidden");
holder.getSecret(); // "hidden"
holder.setSecret("new secret");
holder.getSecret(); // "new secret"
    

Closures in Loops

Be careful with closures inside loops! Each closure captures the variable, not its value at the time.

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs.push(function() { return i; });
}
funcs[0](); // 3, not 0!
    

let funcs = [];
for (let i = 0; i < 3; i++) {
  funcs.push(function() { return i; });
}
funcs[0](); // 0
    

Use Cases for Closures

• Data encapsulation and privacy
• Function factories (functions that create functions)
• Event handlers and callbacks
• Partial application and currying
• Maintaining state in asynchronous code

Summary

• Closures give functions access to their outer scope, even after the outer function has returned.
• They are the foundation for private variables, callbacks, and much more in JavaScript.