Scope und Hoisting

Scope und Hoisting erklären, wo Variablen gültig sind und warum manches in JavaScript auch „vor“ der Zeile zu funktionieren scheint, in der du es deklarierst. Wenn du das verstehst, vermeidest du typische Fehler mit let, const und var.

Was ist Scope?

Der Scope (Gültigkeitsbereich) legt fest, an welchen Stellen im Code du auf eine Variable zugreifen darfst. Liegt eine Variable außerhalb ihres Scopes, kannst du sie nicht lesen oder ändern – JavaScript meldet dann einen Fehler.

Globaler Scope

Variablen, die du außerhalb von Funktionen und Blöcken anlegst, gehören zum globalen Scope. Du kannst sie überall im Skript verwenden – auch innerhalb von Funktionen.

1let name = "Anna";
2
3function begruessung() {
4    console.log("Hallo " + name);
5}
6
7begruessung();
8console.log(name);

name ist global: Die Funktion und der Code außerhalb greifen beide darauf zu.

Funktions-Scope

Variablen, die du innerhalb einer Funktion deklarierst, gelten nur dort. Außerhalb der Funktion existieren sie nicht.

1function zeigeNachricht() {
2    let text = "Nur hier sichtbar";
3    console.log(text);
4}
5
6zeigeNachricht();
7// console.log(text); // Fehler: text ist nicht definiert

So bleiben lokale Variablen „privat“ und überschreiben nicht aus Versehen globale Namen.

Block-Scope mit let und const

Ein Block ist alles zwischen geschweiften Klammern { } – zum Beispiel bei if, for oder while. Mit let und const gilt eine Variable nur innerhalb dieses Blocks.

1if (true) {
2    let innen = "im Block";
3    const auchInnen = "auch im Block";
4    console.log(innen);
5    console.log(auchInnen);
6}
7
8// console.log(innen); // Fehler
9// console.log(auchInnen); // Fehler

var verhält sich anders: Es kennt keinen Block-Scope, sondern nur Funktions- bzw. globalen Scope.

1if (true) {
2    var alt = "mit var";
3}
4
5console.log(alt); // funktioniert – var kennt keinen Block-Scope

Deshalb empfiehlt sich in neuem Code let und const – der Gültigkeitsbereich ist klarer und vorhersehbarer.

Was ist Hoisting?

Hoisting bedeutet, dass JavaScript Deklarationen beim Ausführen „nach oben“ im aktuellen Scope verschiebt – du kannst eine Funktion also oft schon aufrufen, bevor sie im Code steht. Bei Variablen ist das Verhalten je nach Schlüsselwort unterschiedlich.

Funktionsdeklarationen

Klassische function-Deklarationen werden vollständig gehoisted. Du darfst sie vor ihrer Definition aufrufen:

1sageHallo();
2
3function sageHallo() {
4    console.log("Hallo!");
5}

var wird gehoisted

Bei var wird die Deklaration nach oben geholt, die Zuweisung aber nicht. Vor der Zuweisung ist der Wert undefined:

1console.log(zahl);
2var zahl = 10;

Unterschied: var, let und const

let und const werden technisch auch „gehoisted“, liegen aber in der sogenannten Temporal Dead Zone: Du darfst sie nicht verwenden, bevor die Zeile mit der Deklaration ausgeführt wurde.

1// console.log(alter); // Fehler: Cannot access before initialization
2let alter = 25;
3console.log(alter);

• var: Funktions-/globaler Scope, vor der Zuweisung undefined
• let / const: Block-Scope, Zugriff erst nach der Deklaration
• Praxis: Nutze const und let, vermeide var