JavaScript switch: Case-Labels und Default-Fallback

Die JavaScript-switch-Anweisung wertet einen Ausdruck genau einmal aus und leitet die Ausführung mit strikter Gleichheit (===) zu einem passenden Case-Label weiter. Ersetze damit if...else-Ketten, wenn jeder Zweig dieselbe Variable gegen feste Werte prüft, zum Beispiel für Befehls-Dispatch, Statuszuordnung oder feste Optionen. Switch bündelt diesen wertbasierten Kontrollfluss in einem Block und steuert Fall-through explizit über break.

JavaScript-Switch-Beispiel für Wert-Routing

Ausgabe:

Die Ausgabe erscheint hier...

Ausgabe:

Datei wird gespeichert

So funktioniert dieses Beispiel

  1. switch (command) wertet command einmal aus und vergleicht das Ergebnis in Quellreihenfolge mit jedem JavaScript-Case-Label.
  2. Der Case "speichern" passt, daher springt die Ausführung in diesen Zweig und führt console.log("Datei wird gespeichert") aus.
  3. break verlässt den Switch-Block. Ohne break läuft die Ausführung in den nächsten Case-Body weiter, auch wenn dessen Label nicht passt.
  4. default ist der Auffangzweig und läuft, wenn kein Case-Label passt. Steht default zuletzt, ist danach kein break nötig.

In einer JavaScript-Case-Anweisung wie case "speichern": ist das Label ein zu vergleichender Wert, keine eigene boolesche Bedingung.

Häufige Fehler bei JavaScript Switch Case

break vergessen: Ohne break läuft die Ausführung in jeden nachfolgenden Case-Body weiter. Lass break nur weg, wenn du Cases absichtlich gruppierst.

const command = "speichern";

switch (command) {
  // Falsch: protokolliert beide Meldungen, wenn command "speichern" ist
  case "speichern":
    console.log("Speichern");
  case "schließen":
    console.log("Schließen");
}

Typen in Case-Labels mischen: Switch verwendet ===, daher passt "2" nie zu 2. Bringe den Ausdruck vor dem Switch auf einen einheitlichen Typ.

let/const über Cases hinweg wiederverwenden: Alle Cases teilen sich den Scope des Switch-Blocks. Deklarieren zwei Cases let result, entsteht ein SyntaxError. Packe jeden Case in { }, um getrennte lexikalische Scopes zu erzeugen.

Switch vs if…else

switch verwenden, wenn…if...else verwenden, wenn…
Ein Ausdruck mit mehreren festen Werten verglichen wirdBedingungen Bereiche, Ungleichheiten oder verschiedene Variablen enthalten
Mehrere Cases denselben Handler per Fall-through teilenJeder Zweig eigenständige, zusammengesetzte Logik hat

Für große Wert-zu-Aktion-Mappings ist ein Objekt-Lookup oft sauberer als beide Ansätze. Fange fehlende Schlüssel ab, damit du undefined nicht als Funktion aufrufst.

Weitere Beispiele

Gruppiere mehrere Case-Labels, damit sie einen Handler teilen:

const day = "Sa";
switch (day) {
  case "Sa":
  case "So":
    console.log("Wochenende");
    break;
  default:
    console.log("Wochentag");
}

Wenn du Case-Labels ohne break dazwischen stapelst, leiten alle aufgeführten Werte in denselben Block weiter. Halte den gemeinsamen Handler kurz und beende ihn mit break, return oder throw, damit nicht versehentlich spätere Cases laufen. Wenn du pro Label unterschiedliches Verhalten brauchst, vermeide Fall-through und gib jedem Case seinen eigenen Body und Exit.

FAQ

Verwendet JavaScript switch == oder ===?

Switch vergleicht mit strikter Gleichheit (===). Es gibt keine Typumwandlung, daher passt 0 nicht zu "0" und null nicht zu undefined. Sorge dafür, dass Ausdruck und Case-Labels denselben Typ haben.

Was passiert, wenn du break in einem Switch-Case weglässt?

Die Ausführung läuft in den nächsten Case-Body weiter, unabhängig vom Label. Das geht so weiter bis zu einem break, return oder bis zum Ende des Switch-Blocks. Absichtliches Fall-through wird genutzt, um mehrere Case-Labels unter einem Handler zu gruppieren.

Kann default vor anderen Cases stehen?

Ja. default kann überall im Switch-Block stehen. Es läuft weiterhin nur, wenn kein Case passt, danach setzt die Ausführung ab dieser Stelle fort. Setze daher ein break nach default, außer es ist die letzte Klausel.