let and const in Loops: The Closure Fix

let and const in Loops: The Closure Fix

The classic var + setTimeout + closure bug is one of the most famous JS interview questions. let fixes it. Here is why.

The Bug With var

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// logs: 3, 3, 3
``
`var` is function-scoped. There is **one** `i` shared by all iterations. All three callbacks close over the same `i`. By the time they run, the loop has finished and `i` is 3.

### The Fix With `let`

```js
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// logs: 0, 1, 2
``
`let` is block-scoped. The spec says each iteration gets a **fresh binding** of `i`. Each callback closes over its own `i`, which holds the value for that iteration.

### How `let` Creates a Fresh Binding

Conceptually, the engine does something like:

```js
// pseudocode for let in a loop
let _i = 0;
while (_i < 3) {
  let i = _i;       // fresh copy for this iteration
  setTimeout(() => console.log(i), 0);
  _i++;
}
``
Each iteration copies the current value into a new `i`. The closure captures that specific `i`.

### `const` in `for...of` and `for...in`

```js
for (const item of [1, 2, 3]) {
  setTimeout(() => console.log(item), 0);
}
// logs: 1, 2, 3
``
`const` works here because each iteration is a fresh binding. `item` does not change within an iteration, so `const` is appropriate.

### `const` in a Classic `for` Loop

```js
for (const i = 0; i < 3; i++) {} // TypeError: Assignment to constant variable
``
`const` does not work for the classic `for` loop because `i++` reassigns `i`. Use `let` for the counter.

### The IIFE Fix (Pre-ES6)

Before `let`, the fix was an IIFE to capture the current value:

```js
for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 0);
  })(i);
}
// logs: 0, 1, 2
``
The IIFE creates a new scope per iteration, capturing `i` as `j`.

### The Takeaway

`let` in a `for` loop creates a fresh binding per iteration, fixing the classic closure bug. Use `let` for classic `for` loop counters. Use `const` for `for...of` and `for...in` (fresh binding per iteration, no reassignment needed).