"Scope" (Geltungsbereich) bestimmt, WO im Code eine Variable sichtbar ist. Dieses Kapitel klärt den entscheidenden Unterschied zwischen var und let/const, den wir seit Kapitel 4 bewusst vermieden haben.

Block-Scope (let/const) vs. Function-Scope (var)

if (true) {
  let blockScoped = 'nur hier sichtbar';
  var functionScoped = 'entkommt dem Block';
}

console.log(functionScoped); // 'entkommt dem Block' - var 'entkommt' dem if-Block!
console.log(blockScoped);    // ReferenceError: blockScoped is not defined

let und const sind an den unmittelbar umgebenden Block ({ } – egal ob if, for, oder ein einfacher Block) gebunden. var IGNORIERT Blöcke komplett und ist nur an die umgebende FUNKTION (oder den globalen Scope) gebunden – das ist die Hauptquelle für Verwirrung und der Grund, warum var als veraltet gilt.

Die klassische var-Schleifen-Falle

// Mit var: alle drei Timeouts geben '3' aus - NICHT das Gewünschte!
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log('var:', i), 0);
}
// Ausgabe: var: 3, var: 3, var: 3

// Mit let: jede Iteration bekommt ihre EIGENE Bindung
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log('let:', j), 0);
}
// Ausgabe: let: 0, let: 1, let: 2

Der Grund: Es gibt nur EIN einziges, geteiltes i für die gesamte var-Schleife – wenn die Timeouts (Kapitel 23/24) schließlich laufen, hat die Schleife längst durchlaufen und i steht bei 3. Mit let erzeugt JEDE Iteration eine NEUE Bindung von j, die vom Closure (Kapitel 16) der jeweiligen Callback-Funktion korrekt eingefangen wird.

Hoisting im Detail

"Hoisting" beschreibt, dass Deklarationen (nicht Zuweisungen!) beim Einlesen der Datei bereits VOR ihrer eigentlichen Zeile bekannt sind. Die drei Deklarationsarten verhalten sich dabei unterschiedlich:

console.log(mitVar);   // undefined - gehoisted, aber noch ohne Wert
console.log(mitLet);   // ReferenceError: Cannot access 'mitLet' before initialization

var mitVar = 'Wert';
let mitLet = 'Wert';

var-Deklarationen werden gehoisted UND mit undefined vorinitialisiert. let/const werden zwar auch gehoisted, bleiben aber bis zur tatsächlichen Zeile in der sogenannten "Temporal Dead Zone" – ein Zugriff davor wirft einen Fehler, statt still undefined zu liefern. Das ist in der Praxis SICHERER: Ein Tippfehler oder eine falsche Code-Reihenfolge fällt sofort als Fehler auf, statt sich als stilles undefined zu verstecken.

Globalen Scope vermeiden

Eine mit var AUSSERHALB jeder Funktion deklarierte Variable landet im globalen Scope und ist somit von ÜBERALL im Programm sichtbar UND veränderbar – eine häufige Fehlerquelle in größeren Programmen, da jede Datei versehentlich denselben globalen Namen wiederverwenden könnte. ES Modules (Kapitel 21) kapseln jede Datei automatisch in ihrem eigenen Scope, was dieses Risiko in modernem Code stark reduziert.