Scope, closures, this and prototypes in JavaScript

HOW IT FITS TOGETHER

KEY TERMS

Lexical scope

Which variables a function can see is fixed by where it is written, not where it is called. Each function and block creates an environment linked to its parent; name lookup walks that chain outward at read time.

Hoisting and the temporal dead zone

All declarations are registered when a scope is entered. var is initialized to undefined, function declarations to their function, while let, const and class stay uninitialized until their line runs; touching them earlier, even with typeof, throws a ReferenceError. The TDZ is about execution time, not text position.

Closures

A function plus the environment it was created in. The environment is held by reference, so closures share and see later writes to captured bindings. That gives private state and factories, and it is also the root of the var-in-a-loop bug: one binding, many readers.

this binding

Determined per call: new, then bind, then call/apply, then method call, then plain call (undefined in strict code). Arrow functions skip the rules and use the enclosing this. Passing obj.method as a callback passes the function, not the object.

Prototype chain

Every object has a [[Prototype]] link. Property reads check own properties, then walk the chain to Object.prototype and finally null. Writes create or update an own property, shadowing the inherited one rather than changing it.

class is mostly sugar

A class creates a constructor function whose prototype holds the methods; extends links both the prototypes and the constructors. Real differences: class bodies are strict, methods are non-enumerable, constructors throw without new, declarations sit in the TDZ, private #fields are enforced, and derived instances are created by the base constructor via super().

Closures and memory

Garbage collection frees what is unreachable. A closure keeps its captured scope reachable for as long as the closure itself is reachable, so long-lived references (event listeners, timers, caches, module-level arrays) are what turn a closure into a leak.

IN YOUR STACK

const handlers = [];
for (var i = 0; i < 3; i++) {
  handlers.push(() => i); // every closure reads the same function-scoped i
}
console.log(handlers.map((h) => h())); // [3, 3, 3]

const fixed = [];
for (let j = 0; j < 3; j++) {
  fixed.push(() => j); // let creates a fresh binding per iteration
}
console.log(fixed.map((h) => h())); // [0, 1, 2]

// The async form of the same bug: logs 3, 3, 3
for (var k = 0; k < 3; k++) setTimeout(() => console.log(k), 0);

// Closures share live bindings; they do not snapshot values
function counter() {
  let count = 0;
  return { inc: () => ++count, read: () => count };
}
const c = counter();
c.inc();
c.inc();
console.log(c.read()); // 2: both closures share one count

console.log(typeof declared); // "function": declaration hoisted with its body
console.log(v);               // undefined: var hoisted, initialized to undefined
try {
  console.log(l);             // binding exists but is uninitialized
} catch (err) {
  console.log(err.name);      // "ReferenceError": temporal dead zone
}
var v = 1;
let l = 2;
function declared() {}

// The TDZ is about time, not position
function readLater() {
  return late;
}
const late = "ok";
console.log(readLater()); // "ok": called after initialization

// Class declarations are in the TDZ too
try {
  new Early();
} catch (err) {
  console.log(err.name); // "ReferenceError"
}
class Early {}

class Counter {
  count = 0;
  increment() { return ++this.count; }
  incrementBound = () => ++this.count; // arrow field: lexical this, per instance
}

const c = new Counter();
const detached = c.increment;
try {
  detached(); // plain call in strict class code: this is undefined
} catch (err) {
  console.log(err instanceof TypeError); // true
}
console.log(c.increment());              // 1: receiver is c
console.log(detached.call(c));           // 2: explicit this
const bound = c.increment.bind(c);
console.log(bound.call({ count: 100 })); // 3: bind beats call
const { incrementBound } = c;
console.log(incrementBound());           // 4: arrow keeps the instance
const report = {
  name: "Q3",
  titles(rows) { return rows.map((r) => `${this.name}: ${r}`); }, // arrow: outer this
  broken(rows) { return rows.map(function (r) { return this?.name ?? "lost"; }); },
};
console.log(report.titles(["a"]), report.broken(["a"])); // ["Q3: a"] ["lost"] in a module

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
  speak() { return `${super.speak()} (woof)`; }
}

// Roughly the same wiring without class syntax
function Animal2(name) { this.name = name; }
Animal2.prototype.speak = function () { return `${this.name} makes a sound`; };
function Dog2(name) { Animal2.call(this, name); }
Object.setPrototypeOf(Dog2.prototype, Animal2.prototype); // instance chain
Object.setPrototypeOf(Dog2, Animal2);                     // static chain
Dog2.prototype.speak = function () {
  return `${Animal2.prototype.speak.call(this)} (woof)`;
};

const rex = new Dog("Rex");
console.log(Object.getPrototypeOf(rex) === Dog.prototype);                // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype);   // true
console.log(Object.hasOwn(rex, "name"), Object.hasOwn(rex, "speak"));     // true false
console.log(new Dog2("Max").speak()); // "Max makes a sound (woof)"

function buildReport() {
  return Array.from({ length: 1_000_000 }, (_, i) => ({ row: i }));
}

// Leak: the listener closes over report, and the button lives for the whole session
function attachLeaky(button) {
  const report = buildReport();
  button.addEventListener("click", () => console.log(report.length, "rows"));
}

// Fix: capture only what the callback needs, and make the listener removable
function attachFixed(button, signal) {
  const rowCount = buildReport().length; // the big array is garbage after this line
  button.addEventListener("click", () => console.log(rowCount, "rows"), { signal });
}

const controller = new AbortController();
attachFixed(document.querySelector("#export"), controller.signal);

// On teardown (route change, component unmount, dialog close):
controller.abort(); // removes the listener, so its closure becomes unreachable

WHERE IT BITES

• Passing a method as a callback (onClick={this.save}, setTimeout(obj.tick, 100), promise.then(service.handle)): the receiver is dropped and this becomes undefined in strict code.
• Using arrow functions for object or prototype methods. They cannot see the receiver, and fixing that with arrow class fields trades it for a closure per instance.
• Capturing a var loop variable in async callbacks, or a stale value in a long-lived closure such as a React effect or an interval. The closure reads the binding when it runs, not when it was created.
• ReferenceError from the TDZ at startup, typically from circular imports or a class referenced before its declaration was evaluated. It only shows up in certain import orders, so bundling changes can surface it.
• Long-lived closures retaining large data: listeners never removed, intervals never cleared, memoization caches without bounds. Use AbortController signals, clear timers on teardown and WeakMap for per-object caches.
• Mutating shared prototypes (adding methods to Array.prototype or Object.prototype). Every object in the realm sees it, including other libraries, and it can break future built-ins with the same name.

SOURCES

• MDN: this (opens in new tab)Checked 2026-10-11
• MDN: Closures (opens in new tab)Checked 2026-10-11
• MDN: let (temporal dead zone) (opens in new tab)Checked 2026-10-11
• MDN: Inheritance and the prototype chain (opens in new tab)Checked 2026-10-11
• MDN: Classes (opens in new tab)Checked 2026-10-11
• MDN: Memory management (opens in new tab)Checked 2026-10-11