Common Closure Pitfalls and How to Avoid Them in JavaScript

Common Closure Pitfalls and How to Avoid Them in JavaScript

Closures are powerful but have pitfalls. Here are the common ones and how to avoid each.

Pitfall 1: The var Loop Bug

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// logs 3, 3, 3
``
**Fix**: Use `let` (fresh binding per iteration).

### Pitfall 2: Stale Closures in React

```js
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // count is stale (captured at render time)
    }, 1000);
    return () => clearInterval(id);
  }, []); // count is not in deps
  return <p>{count}</p>;
}
``
The closure captures `count = 0` from the first render. It never updates.

**Fix**: Use the functional form of `setCount`:

```js
setCount(c => c + 1); // uses the latest state
``
### Pitfall 3: Lost `this` in Callbacks

```js
const obj = {
  name: "Kunal",
  greet() { console.log(this.name); },
};
setTimeout(obj.greet, 0); // undefined (this is lost)
``
**Fix**: `bind`, arrow wrapper, or use an arrow method.

```js
setTimeout(obj.greet.bind(obj), 0);
setTimeout(() => obj.greet(), 0);
``
### Pitfall 4: Memory Leaks from Accumulating Closures

```js
const handlers = [];
function setup() {
  const big = new Array(1_000_000);
  handlers.push(() => big.length);
}
``
**Fix**: Remove handlers when done, or extract only what you need.

```js
const len = big.length;
handlers.push(() => len);
``
### Pitfall 5: Accidental Capture of Large Objects

```js
function foo() {
  const big = new Array(1_000_000);
  return () => 42; // does not use big, but may keep it alive
}
``
**Fix**: Extract only what you need, or restructure so the closure does not share the scope with `big`.

### Pitfall 6: Closures and `for...of` With `const`

```js
for (const item of items) {
  // item is const; if you try to reassign it, you get TypeError
  item = modify(item); // TypeError
}
``
**Fix**: Use a different variable name:

```js
for (const item of items) {
  const modified = modify(item);
}
``
### Pitfall 7: Overusing Closures for Simple State

```js
// overcomplicated
function createName() {
  let name = "";
  return {
    set: (n) => { name = n; },
    get: () => name,
  };
}
// simpler: just use a plain object
const nameObj = { name: "" };
``
**Fix**: Use closures only when you need privacy. For simple state, a plain object or class is simpler.

### The Takeaway

Common closure pitfalls: the `var` loop bug (use `let`), stale closures in React (use functional `setState`), lost `this` in callbacks (bind or arrow), memory leaks (remove handlers, extract what you need), accidental capture of large objects, `const` in `for...of`, and overusing closures for simple state. Use closures when you need privacy or functional patterns, not for everything.