JavaScript Closures Cheatsheet

What Is a Closure?

• A closure is a function that “remembers” the variables from its outer scope, even after the outer function has finished running.

function outer() {
  const name = 'Alice';

  function inner() {
    console.log(name); // still has access to `name`
  }

  return inner;
}

const greet = outer();
greet(); // 'Alice'

---

Common Uses of Closures

1. Data Privacy (private variables)

• Use closures to keep variables hidden from the outside scope.

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

---

2. Function Factories

• Return a function pre-configured with a specific value.

function multiplyBy(x) {
  return function (y) {
    return x * y;
  };
}

const double = multiplyBy(2);
double(5); // 10

---

3. Event Handlers in Loops (using `let` or closures)

• let is block-scoped, so it creates a fresh variable each iteration.

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// prints: 0, 1, 2

---

Gotcha: `var` in Loops with Closures

• var is function-scoped, so it does not preserve the loop value in closures.

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// prints: 3, 3, 3

---

Fix It with an IIFE (Immediately Invoked Function Expression)

• Wrap each iteration in a closure using an IIFE to capture i.

for (var i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(() => {
      console.log(i);
    }, 1000);
  })(i);
}
// prints: 0, 1, 2