JavaScript switch: cases, break & fallthrough erklärt

Mit switch gezielt einen Zweig auswählen

Das switch-Statement in JavaScript ist genau dann praktisch, wenn du einen einzelnen Wert gegen mehrere bekannte Optionen prüfen willst. Klar, mit einer if/else if/else-Kette kommst du zum selben Ergebnis – aber sobald du dieselbe Variable drei- oder viermal hintereinander abfragst, liest sich ein switch einfach angenehmer.

So sieht der grundlegende Aufbau aus:

Wenn du das von oben nach unten liest: JavaScript wertet day aus, vergleicht den Wert mit jedem case-Label und führt den passenden Block aus. default fängt alles ab, was nicht gematcht hat – quasi wie ein abschließendes else. Die Leserichtung ist also: Wert → case → Code.

Wie der Vergleich im switch case tatsächlich funktioniert

switch vergleicht streng auf Gleichheit – mit dem Operator ===. Keine Typumwandlung, keine unscharfen Treffer. case 1: matcht also die Zahl 1, aber nicht den String "1".

Nur der zweite Fall greift. Falls dich also mal wundert, warum dein switch nicht zündet, liegt es meistens daran, dass ein String mit einer Zahl verglichen wird – typischerweise bei Werten aus Formularfeldern oder URL-Parametern.

break steuert den Ablauf

Genau hier stolpern viele. Ein case-Label ist ein Sprungziel, kein abgeschlossener Block. Sobald ein passender Case getroffen wird, läuft der Code Zeile für Zeile weiter – einfach über das nächste case-Label hinweg – bis er auf break, return oder das Ende des switch trifft.

Schau dir an, was ohne break passiert:

Der Match ist "editor", trotzdem bekommst du kann bearbeiten, kann ansehen und angemeldet zu sehen. Genau das ist das sogenannte Fallthrough: Die Ausführung fällt einfach in die nachfolgenden cases durch, weil ihr niemand sagt, dass sie stoppen soll.

Mit break läuft's dann wie erwartet:

Angewohnheit: Jeder case endet mit break, außer du willst ganz bewusst einen Fallthrough.

Bewusster Fallthrough zum Gruppieren von Cases

Fallthrough ist nicht immer ein Fehler. Das Weglassen von break ist ein sauberer Weg, um auszudrücken: „Diese Fälle machen alle dasselbe":

Gestapelte leere case-Labels teilen sich den Block darunter. Nach return ist übrigens kein break nötig – die Funktion wird ohnehin komplett verlassen. Ein return innerhalb eines switch überspringt alles, was danach gekommen wäre.

Wenn du tatsächlich ein Fallthrough zwischen nicht-leeren Cases haben willst, hinterlass einen Kommentar, damit die nächste Person das nicht „wegoptimiert":

default muss nicht am Ende stehen

Per Konvention landet default ganz unten – und genau dort erwarten es die meisten Leser auch. Technisch gesehen ist es aber einfach nur ein weiteres Label: Es greift immer dann, wenn kein case gepasst hat, egal an welcher Stelle es steht. Packst du default in die Mitte und vergisst das break, fällt die Ausführung ganz selbstverständlich in den nächsten Block durch (klassisches Switch-Fallthrough). Stell default lieber ans Ende und schließ es mit break ab (oder eben nicht, weil danach sowieso nichts mehr kommt) – dein zukünftiges Ich wird's dir danken.

Variablen innerhalb eines Case korrekt scopen

Alle Cases teilen sich denselben Block-Scope – nämlich den des gesamten switch. Wenn du also in zwei verschiedenen Cases eine Variable mit demselben Namen per let oder const deklarierst, bekommst du einen Redeclaration-Fehler:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

Die Lösung ist ein eigener Block pro case — einfach den Body in { } einpacken:

Jedes msg lebt jetzt in seinem eigenen Scope und die Kollision ist Geschichte. Das lohnt sich zu merken, sobald ein case mehr als ein, zwei Zeilen Logik enthält.

switch vs if/else in JavaScript

switch spielt seine Stärken aus, wenn du einen Wert gegen viele feste Optionen prüfst: HTTP-Codes, Redux-Action-Types, Befehlsnamen, enum-artige Strings. Der Wert taucht einmal ganz oben auf, und das Auge kann die case-Labels wie ein Inhaltsverzeichnis überfliegen.

if/else passt besser, wenn:

• du Wertebereiche vergleichst (score >= 90, score >= 75).
• die Bedingungen unterschiedliche Variablen oder boolesche Ausdrücke einbeziehen.
• du lose Gleichheit oder eigene Vergleiche brauchst (switch arbeitet immer mit ===).

Eine gängige moderne Alternative zum ersten Muster ist ein Object Lookup:

Drei Zeilen statt ein neunzeiliges switch. Wenn die Cases reine Datenzuordnungen ohne echte Logik sind, liest sich ein Objekt (oder eine Map) meistens besser. Zum switch greifst du, wenn in jedem Case tatsächlich etwas passiert.

Als Nächstes: for-Schleifen

Ein switch trifft eine Entscheidung und wählt aus vielen Optionen. Der nächste Baustein im Kontrollfluss dreht sich um Wiederholung – also denselben Codeblock immer wieder auszuführen. Genau dafür sind for-Schleifen da, und die schauen wir uns jetzt an.