0Pricing
JavaScript Academy · Lektion

Block-, Funktions- und Modul-Scope sowie die TDZ

Verstehen Sie Block-, Funktions- und Modul-Scope, erleben Sie die TDZ in Aktion und vermeiden Sie das Auslaufen von Variablen.

Block-, Funktions- und Modul-Scope sowie die TDZ ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung

Ziel: Verstehen Sie, wo Variablen gültig sind und wann sie verwendet werden können.

  • Block-Sichtbarkeit (let/const)
  • Funktions-Sichtbarkeit (var)
  • Modul-Sichtbarkeit
  • TDZ-Sicherheit
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 1

Demo zur Block-Sichtbarkeit

Block-Sichtbarkeit hält Variablen auf den Bereich innerhalb eines geschweiften Klammerpaars beschränkt.

// Block scope: let/const exist only inside the braces
let lives = 3;

if (true) {
  const bonus = 5;
  let level = 1;
  console.log("Inside block:", bonus, level);
}

console.log("Lives:", lives);
// Uncommenting next line would fail (not in scope):
// console.log(bonus, level);
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 2

Funktions-Sichtbarkeit mit var

var ist an Funktionen gebunden, nicht an Blöcke. Bevorzugen Sie in modernem JavaScript let und const.

// Function scope: var is visible across the whole function
function demo() {
  if (true) {
    var x = 10; // function-scoped
  }
  console.log("x is visible here:", x); // 10
}
demo();
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 3

Grundlagen der Modul-Sichtbarkeit

Modul-Sichtbarkeit: Bindungen auf der obersten Ebene sind auf die Datei beschränkt (ES-Module).

// Module scope: top-level variables are local to the module file
const appName = "CoddyKit";
console.log("App name:", appName);

// In a real project, this would be its own file/module.
// Other files must import to access appName.
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 4

Temporal Dead Zone

TDZ verhindert versehentliches Lesen vor der Deklaration. Deklarieren Sie Variablen zuerst und verwenden Sie sie danach.

// TDZ: using let/const before declaration throws ReferenceError
try {
  // Uncommenting would trigger TDZ:
  // console.log(mode); // ReferenceError
  let mode = "dark";
  console.log("Mode after declare:", mode);
} catch (e) {
  console.log("Caught:", e.message);
}
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 5

Fallstricke bei der Sichtbarkeit

Fallstricke:

  • Mischen Sie var nicht mit let/const im selben Gültigkeitsbereich.
  • Deklarieren Sie Variablen nahe an ihrer Verwendung.
  • Vermeiden Sie das Lesen von Werten vor der Deklarationszeile (TDZ).
Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 6

TDZ-Quiz

Kurzer Check: Verhalten der TDZ.

Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 7

Zusammenfassung

Zusammenfassung: let und const sind an Blöcke gebunden, var ist an Funktionen gebunden, Module haben ihren eigenen Gültigkeitsbereich auf Dateiebene und die TDZ verhindert zu frühen Zugriff.

Block-, Funktions- und Modul-Scope sowie die TDZ — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Block-, Funktions- und Modul-Scope sowie die TDZ“ kostenlos?

Ja — der vollständige Text von „Block-, Funktions- und Modul-Scope sowie die TDZ“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Block-, Funktions- und Modul-Scope sowie die TDZ“?

Verstehen Sie Block-, Funktions- und Modul-Scope, erleben Sie die TDZ in Aktion und vermeiden Sie das Auslaufen von Variablen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Block-, Funktions- und Modul-Scope sowie die TDZ“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. let, const und var vermeiden
  2. Block-, Funktions- und Modul-Scope sowie die TDZ
  3. Benennung, Lesbarkeit und häufige Fallstricke
← Zurück zu JavaScript Academy