Switch-Anweisung
if / else glänzt bei Ja/Nein oder Bereichen. Manchmal lautet die Frage anders: Welcher von mehreren festen Werten ist das? Tagescode 1…7, Status "ok" / "warn" / "err", Menüschlüssel. Für diese Form ist switch das saubere Werkzeug. Verzweigung kennst du; hier matchst du einen Wert gegen beschriftete Fälle.
Was macht switch?
switch betrachtet einen Ausdruck in Klammern. Er vergleicht diesen Wert mit jedem case-Label. Bei Treffer laufen die Anweisungen darunter. break beendet den switch, damit spätere Fälle nicht laufen. default ist der Fallback, wenn nichts passte.
Die Bauteile auf einen Blick
📊 Alltägliche switch-Bauteile
| Schlüsselwort | Alltagslesart | Typische Nutzung |
|---|---|---|
switch |
schau diesen Wert an… | Wahl öffnen |
case |
wenn er diesem Label entspricht… | eine feste Option |
break |
hier stoppen; switch verlassen | nach Treffer enden |
default |
wenn nichts passte… | Fallback-Pfad |
Der Abgleich ist streng gleichheitsartig (Idee von ===). Ein Zahlen-case matched keine Ziffernzeichenkette. Halte Wert und Labels in derselben Form.
let day = 3;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
case 3:
console.log("Wed");
break;
default:
console.log("other");
}
Ein Wert, mehrere beschriftete Pfade
Hier ist day gleich 3, also läuft case 3 und die Konsole druckt Wed. Die Fälle 1 und 2 wurden geprüft und übersprungen. Nach break ist der switch fertig — default läuft nicht.
Ohne break liefe JavaScript in die folgenden case-Körper weiter. Das heißt Fall-through. Einsteiger wollen fast immer ein break nach jedem fertigen Fall.
let day = 2;
switch (day) {
case 1:
console.log("Mon");
case 2:
console.log("Tue");
case 3:
console.log("Wed");
break;
default:
console.log("other");
}
Fehlendes break führt spätere Fälle mit aus
day ist 2. Der Treffer startet bei case 2, druckt Tue, läuft weiter in case 3 und druckt Wed vor dem break. Du wolltest ein Label; du bekamst zwei. Setze break unter jeden fertigen Fall, außer du teilst Code absichtlich.
let day = 9;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
default:
console.log("other");
}
default deckt „keines davon“ ab
day ist 9. Kein Fall passt, also läuft default und du siehst other. Nutze default, wenn unerwartete Werte trotzdem eine sichere Meldung brauchen. Weglassen nur, wenn Stille okay ist.
let status = "warn";
switch (status) {
case "ok":
console.log("green");
break;
case "warn":
console.log("yellow");
break;
case "err":
console.log("red");
break;
default:
console.log("unknown");
}
Fälle können auch Strings sein
status ist "warn", also siehst du yellow. String-Fälle sind üblich für kurze Codes aus Formular oder API. Bereiche wie „Note von 60 bis 90“ gehören weiter zu if / else if — switch will diskrete Labels.
let day = 1;
let label;
switch (day) {
case 1:
label = "Mon";
break;
case 2:
label = "Tue";
break;
default:
label = "other";
}
console.log(label);
Benenne das Ergebnis des Matches
Setze label in jedem Fall (und in default), dann nutze es danach einmal. Hier wird label zu "Mon". Dasselbe Muster wie bei if / else — erst wählen, dann verwenden.
Zeige den gewählten Pfad auf der Seite
Erzeuge mit switch eine kurze Meldung und schreibe sie in die Seite.
<!DOCTYPE html>
<html>
<head>
<title>Switch — page choice</title>
</head>
<body>
<p id="out">…</p>
<script>
let day = 3;
let msg;
switch (day) {
case 1:
msg = "Mon";
break;
case 2:
msg = "Tue";
break;
case 3:
msg = "Wed";
break;
default:
msg = "other";
}
let box = document.getElementById("out");
box.textContent = "day=" + msg;
</script>
</body>
</html>
day ist 3, die Seite zeigt day=Wed. Setze day auf 9, lade neu — du solltest day=other sehen. Die nächste Lektion (for) wiederholt Arbeit oft; für „welches feste Label?“ bleibt switch das Werkzeug.
Probier es selbst
- Baue ein
switchauflet day = 1, das für Fall1"Mon"loggt. - Ergänze Fälle für
2und3mitbreakdanach. - Setze
dayauf9und prüfe, dassdefault"other"loggt. - Schalte auf einen String
statusmit"ok","warn","err". - Entferne vorübergehend ein
breakund beobachte Fall-through in der Konsole. - Ändere im HTML-Demo nur
day, lade neu, lies den neuenday=-Text.
Typische Fehler
breaknach einem Fall vergessen (spätere Fälle laufen mit)switchfür offene Bereiche (score >= 60) — eherif/else if- Typen mischen, sodass eine Zahl nie einen String-Fall trifft
defaultweglassen, obwohl unbekannte Werte eine Meldung brauchen- Jedes
ifdurchswitchersetzen, obwohl es keine feste Label-Liste ist
Kurzfassung
switchmatcht einen Wert gegen mehrerecase-Labelsbreakbeendet den switch nach einem Trefferdefaultläuft, wenn nichts passte- Gut für diskrete Werte; Bereiche bleiben bei
if/else if - Speichere ein Label, wenn du das Ergebnis später brauchst; zeige es bei Bedarf auf der Seite
- Als Nächstes: for-Schleife — Arbeit eine feste Anzahl wiederholen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt