0Pricing
Frontend Academy · Lektion

Variablen: let, const, var und Geltungsbereich

Deklarieren Sie Variablen mit let, const und var. Verstehen Sie Block- und Funktions-Scope und warum const für die meisten Werte bevorzugt wird.

Variablen: let, const, var und Geltungsbereich ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Variablen?

Variablen speichern Werte, damit Sie sie wiederverwenden, aktualisieren und mit aussagekräftigen Namen versehen können. JavaScript bietet drei Möglichkeiten, Variablen zu deklarieren: var (veraltet), let (modern, neu zuweisbar) und const (modern, konstante Bindung).

const – Die Standardwahl

Deklarieren Sie eine Variable mit const, wenn Sie ihr keinen neuen Wert zuweisen werden. Das macht Ihre Absicht deutlich und verhindert versehentliche Neuzuweisungen. Hinweis: const verhindert eine neue Bindung, macht Objekte oder Arrays aber nicht unveränderlich.

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let – Wenn Sie einen neuen Wert zuweisen müssen

Verwenden Sie let, wenn sich der Wert ändern wird, etwa bei Schleifenzählern, aufaddierten Summen oder Zustandsvariablen. let hat Block-Scope – die Variable existiert nur innerhalb des nächsten umschließenden { }.

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var – Die veraltete Deklaration

var hat Funktions-Scope (keinen Block-Scope) und wird an den Anfang seiner Funktion hochgezogen. Das verursacht schwer erkennbare Fehler. Vermeiden Sie var in modernem JavaScript und bevorzugen Sie const und let.

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

Scope: Wo Variablen gültig sind

Globaler Scope: außerhalb jeder Funktion oder jedes Blocks deklariert und überall zugänglich. Funktions-Scope: innerhalb einer Funktion deklariert und nur in dieser Funktion zugänglich. Block-Scope: let/const innerhalb von { } und nur innerhalb dieses Blocks zugänglich.

Hoisting

Hoisting verschiebt Deklarationen zur Kompilierzeit an den Anfang ihres Gültigkeitsbereichs. var-Deklarationen werden hochgezogen und mit undefined initialisiert. let und const werden ebenfalls hochgezogen, aber nicht initialisiert – ein Zugriff vor der Deklaration verursacht einen Fehler in der Temporal Dead Zone.

Variablen benennen

Verwenden Sie aussagekräftige Namen. Nutzen Sie camelCase für Variablen und Funktionen (userName), UPPER_SNAKE_CASE für Konstanten (MAX_RETRIES) und PascalCase für Klassen (UserProfile). Vermeiden Sie einzelne Buchstaben, außer in Schleifen (i, j).

Mehrere Variablen deklarieren

Sie können mehrere Variablen in einer Anweisung deklarieren, aber meistens ist es übersichtlicher, pro Variable eine eigene Deklaration zu verwenden. Vermeiden Sie die Kommaschreibweise, da sie Scope und Typen schwerer erkennbar machen kann.

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

Die Temporal Dead Zone (TDZ)

Wenn Sie im Code vor ihrer Deklaration auf eine let- oder const-Variable zugreifen, wird ein ReferenceError ausgelöst. Dieser Bereich zwischen dem Beginn des Blocks und der Deklaration wird TDZ genannt.

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

const mit Arrays und Objekten

const verhindert, dass der Variablen ein neuer Wert zugewiesen wird, aber der referenzierte Wert kann weiterhin verändert werden. Verwenden Sie Object.freeze() für ein oberflächlich unveränderliches Objekt oder unveränderliche Muster für tiefe Unveränderlichkeit.

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

Warum const gegenüber let bevorzugen?

Wenn Sie standardmäßig const verwenden, lässt sich Code leichter nachvollziehen: Sie wissen, dass der Variablen an keiner anderen Stelle ein neuer Wert zugewiesen wird. Wechseln Sie nur dann zu let, wenn Sie tatsächlich eine Neuzuweisung benötigen. Diese Gewohnheit reduziert Fehler und verbessert die Lesbarkeit.

Kurztest

Was ist der wichtigste Unterschied zwischen let und var?

Zusammenfassung: Variablen und Scope

Bevorzugen Sie const für Werte, denen kein neuer Wert zugewiesen wird. Verwenden Sie let für veränderliche Werte. Vermeiden Sie var. Block-Scope (let/const) hält Variablen innerhalb ihres Blocks. Hoisting: var wird mit undefined initialisiert, während let/const bei einem zu frühen Zugriff einen TDZ-Fehler auslösen.

Häufig gestellte Fragen

Ist die Lektion „Variablen: let, const, var und Geltungsbereich“ kostenlos?

Ja — der vollständige Text von „Variablen: let, const, var und Geltungsbereich“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Variablen: let, const, var und Geltungsbereich“?

Deklarieren Sie Variablen mit let, const und var. Verstehen Sie Block- und Funktions-Scope und warum const für die meisten Werte bevorzugt wird. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 1 von 4.

Wie lange dauert die Lektion „Variablen: let, const, var und Geltungsbereich“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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. Variablen: let, const, var und Geltungsbereich
  2. Datentypen: string, number, boolean, null, undefined
  3. Funktionen: Deklarationen, Ausdrücke, Arrow Functions
  4. Kontrollfluss: if, else, switch, for, while
← Zurück zu Frontend Academy