Callbacks and Event Listeners as Closures in JavaScript

Callbacks and Event Listeners as Closures in JavaScript

Every callback and event listener in JavaScript is a closure. They close over variables from where they were defined. Understanding this explains timer behavior, event handler state, and memory management.

Callbacks Are Closures

const message = "hello";
setTimeout(() => {
  console.log(message); // "hello" (closed over)
}, 1000);
``
The `setTimeout` callback closes over `message`. Even though it runs later, it still has access to `message` via its lexical environment.

### Event Listeners Are Closures

```js
function setupCounter(button) {
  let count = 0;
  button.addEventListener("click", () => {
    count++;
    button.textContent = `Clicked ${count}`;
  });
}
``
The handler closes over `count` and `button`. Each click increments the closed-over `count`. The state persists across clicks because the closure keeps it alive.

### The Loop Closure Bug (Again)

```js
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// logs 3, 3, 3 (all close over the same i)
``
All callbacks share one `i` (var). Fix with `let` (fresh binding per iteration).

### Event Listeners and Memory

```js
function setup() {
  const element = document.getElementById("btn");
  element.addEventListener("click", () => {
    console.log(element.id); // closes over element
  });
}
``
The handler keeps `element` alive. If `element` is removed from the DOM but the listener is not removed, `element` stays in memory (memory leak).

**Fix**: Use a named function and `removeEventListener`, or use `WeakRef`.

### Removing Event Listeners

```js
const handler = () => console.log("clicked");
button.addEventListener("click", handler);
// later:
button.removeEventListener("click", handler); // same reference
``
You need the same function reference. Anonymous functions cannot be removed.

### Event Delegation and Closures

```js
document.querySelector("#list").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("clicked:", event.target.textContent);
  }
});
``
One listener on the parent handles all children. The closure captures the parent element, not each child. This is memory-efficient.

### The Takeaway

Every callback and event listener is a closure. They close over variables from where they were defined, which is how they access outer state. This is powerful but can cause memory leaks (listeners keeping elements alive). Use named functions for removable listeners, and clean up listeners when elements are removed.