JavaScript switch-Anweisung

Einführung in die switch-Anweisung

In JavaScript führt die switch-Anweisung einen von mehreren Codeblöcken aus, abhängig vom Wert eines einzelnen Ausdrucks. Wenn du eine lange Kette von if / else if-Anweisungen schreibst, die alle dieselbe Variable mit verschiedenen Werten vergleichen, ist ein switch meistens eine übersichtlichere und lesbarere Möglichkeit, dieselbe Logik auszudrücken.

Dieses Kapitel behandelt die vollständige Syntax, wie case, break und default zusammenarbeiten, gezieltes vs. versehentliches Fall-Through, den strikten (===) Vergleich, den switch verwendet, wie Variablen innerhalb eines case einen eigenen Scope erhalten, und wann switch die richtige Wahl ist — und wann nicht.

Wie switch funktioniert

Ein switch wertet seinen Ausdruck einmal aus und vergleicht das Ergebnis dann von oben nach unten mit jedem case-Wert mithilfe des strikten Vergleichs (===). Der erste passende case wird zum Einstiegspunkt: Die Ausführung beginnt dort und läuft durch die folgenden Anweisungen weiter, bis sie auf ein break, ein return oder das Ende des switch trifft. Wenn kein case übereinstimmt, wird der optionale default-Block ausgeführt.

Syntax und Aufbau der switch-Anweisung

Das Grundgerüst einer switch-Anweisung sieht so aus:

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Ein paar wichtige Regeln:

• Der Ausdruck wird nur einmal ausgewertet, ganz am Anfang.
• case-Labels müssen von einem Doppelpunkt (:) gefolgt werden, nicht von einer geschweiften Klammer.
• break beendet den switch; ohne es fällt die Ausführung durch in den nächsten case (siehe Fall-Through unten).
• default ist optional und muss nicht an letzter Stelle stehen, obwohl es die Konvention ist.

Beispiel eines einfachen switch

Fall-Through: Gruppierung vs. Versehen

Wenn ein case kein break hat, "fällt die Ausführung durch" in den nächsten case. Das ist ein einziger Mechanismus mit zwei sehr unterschiedlichen Ergebnissen — eines nützlich, eines ein klassischer Fehler.

Gezielte Gruppierung (gutes Fall-Through)

Durch das Stapeln leerer case-Labels kannst du denselben Code für mehrere Werte ausführen. Das ist die idiomatische Methode, um „jede dieser Eingaben soll dasselbe tun" zu behandeln.

Da 'apple' mit dem ersten Label übereinstimmt und dieses Label keinen Rumpf hat, fließt die Ausführung in das gemeinsame console.log('Red fruit') und stoppt dann bei break.

Versehentliches Fall-Through (der Fehler)

Wenn du ein break vergisst, laufen alle cases nach dem übereinstimmenden ebenfalls durch, bis zum nächsten break oder dem Ende des switch. Hier ist fruit gleich 'apple', und trotzdem werden alle vier Zeilen ausgegeben:

Das Hinzufügen von break; nach jedem console.log würde die Ausgabe auf Apple is red. begrenzen. Die Faustregel: Beende jeden case mit break (oder return), es sei denn, du gruppierst cases absichtlich.

Block-Scope innerhalb eines case

Alle case-Klauseln teilen sich einen Block-Scope — den Rumpf des switch. Das bedeutet, dass ein mit let oder const in einem case deklariertes Objekt für die anderen sichtbar ist und einen Fehler „Cannot access before initialization" verursachen kann. Umschließe den Rumpf eines case mit eigenen geschweiften Klammern { ... }, um ihm einen privaten Scope zu geben:

Ohne die geschweiften Klammern würde das Deklarieren von const result in beiden cases einen Syntaxfehler auslösen, da es sich um eine doppelte Deklaration im gemeinsamen Scope handelt.

Strikter (===) Vergleich in switch

JavaScript's switch vergleicht den Ausdruck mit jedem case-Wert mithilfe strikter Gleichheit (===) — es findet keine Typumwandlung statt. Daher muss auch der Typ übereinstimmen, nicht nur der Wert. Mehr darüber, wie === sich von == unterscheidet, findest du unter Vergleichsoperatoren.

In diesem Beispiel stimmt der string '0' nicht mit der Zahl 0 überein, sodass default ausgeführt wird:

Wenn du unabhängig vom Typ vergleichen möchtest, konvertiere den Ausdruck zuerst, z. B. switch (Number(x)).

switch vs. if/else

Beide können dieselbe Verzweigungslogik ausdrücken — wähle nach der Form der Bedingung:

• Bevorzuge switch, wenn du einen Wert gegen viele diskrete, konstante Optionen vergleichst (einen Statuscode, einen Befehlsnamen, eine Menüwahl). Es liest sich klar und die Absicht ist offensichtlich.
• Bevorzuge if / else if, wenn Bedingungen Bereiche oder boolean-Ausdrücke sind (age >= 18, score > 90 && passed), verschiedene Variablen betreffen oder die lockere Flexibilität benötigen, die das strenge === nicht bieten kann.
• Für die Zuordnung eines Schlüssels zu einem einzelnen Wert ist eine einfache Objekt-Suche (const labels = { add: 'Addition' }) oft kürzer als beides. Siehe Logische Operatoren für das Kombinieren von Bedingungen im if-Stil.

Fazit

Die switch-Anweisung in JavaScript ist ein vielseitiges Werkzeug für die Behandlung mehrerer Bedingungen. Das Verständnis ihrer korrekten Verwendung und ihrer Besonderheiten kann die Lesbarkeit und Effizienz deines Codes erheblich verbessern.

Übungen