Bedingungen überprüfen mit switch & case
Anstelle von if-Abfragen kann in JavaScript auch switch case verwendet werden. Diese Konstruktion kann übersichtlicher in der Verwendung sein –je nach Anwendungsfall.
Der grundsätzliche Aufbau von switch case in JavaScript:
switch(Ausdruck) {
case Wert1:
// Anweisungsblock 1
break;
case Wert2:
// Anweisungsblock 2
break;
default:
// Anweisungsblock alternativ
}
Es wird also einen Ausdruck (meistens eine Variable) in der Anweisung switch übergeben, die dann in den einzelnen Fällen (case) überprüft werden. Trifft ein Fall zu, werden die nach dem Doppelpunkt enthaltenen Anweisungen ausgeführt, bis das Ende des Falles über break erreicht ist.
Anhand von Beispielen wird es verständlich. Wir wollen die Jahreszeit ausgeben. Zur Vereinfachung beginnt der Frühling am 1. März und nicht um den 21. März, unser Sommer startet ab dem Juni, Herbst beginnt am September und Winter ab Dezember.
Wir speichern unseren Monat in einer Variablen mit dem Namen „monat“.
Für einen guten Vergleich die Abfrage als erstes mit der schon bekannten if-Konstruktion:
let monat = 6;
if (monat >= 3 && monat < 6) {
document.write('Es ist Fruehling');
} else if ( monat >= 6 && monat < 9 ) {
document.write('Es ist Sommer');
} else if ( monat >= 9 && monat < 12 ) {
document.write('Es ist Herbst');
} else {
document.write('Es ist Winter');
}
Das ganze Programm wollen wir nun mit switch anstelle von if schreiben. Es wird im ersten Schritt umständlicher aussehen aber nach und nach werden so alle Feinheiten von der Funktion switch gezeigt. Also bitte bis zum Ende lesen!
let monat = 6;
switch (monat) {
case (3):
document.write('Es ist Fruehling');
break;
case (4):
document.write('Es ist Fruehling');
break;
case (5):
document.write('Es ist Fruehling');
break;
case (6):
document.write('Es ist Sommer');
break;
case (7):
document.write('Es ist Sommer');
break;
case (8):
document.write('Es ist Sommer');
break;
case (9):
document.write('Es ist Herbst');
break;
case (10):
document.write('Es ist Herbst');
break;
case (11):
document.write('Es ist Herbst');
break;
default:
document.write('Es ist Winter');
break;
}
Das sieht nun irgendwie länger aus. Wo soll also da der Vorteil liegen, zumal wir 3-mal für jede Jahreszeit den Text „Es ist …“ geschrieben haben.
Jetzt kommt es. Lassen wir einfach mal das break weg und schauen, was unser Programm als Ergebnis dann liefert:
let monat = 6;
switch (monat) {
case (3):
document.write('Es ist Fruehling');
case (4):
document.write('Es ist Fruehling');
case (5):
document.write('Es ist Fruehling');
case (6):
document.write('Es ist Sommer');
case (7):
document.write('Es ist Sommer');
case (8):
document.write('Es ist Sommer');
case (9):
document.write('Es ist Herbst');
case (10):
document.write('Es ist Herbst');
case (11):
document.write('Es ist Herbst');
default:
document.write('Es ist Winter');
}
Und nun kommt die Überraschung – unser Ergebnis in der Browserausgabe:
Es ist SommerEs ist SommerEs ist SommerEs ist HerbstEs ist HerbstEs ist Herbst
Unser Programm führt also Programmpunkte ab dem zutreffenden Fall (case (6)) aus. Es kommt daher 3-mal „Es ist Sommer“ und 3-mal „Es ist Herbst“.
Dieses Vorgehen von JavaScript ist kein Fehler, sondern eine Feature und wird Fallthrough-Verhalten genannt. Dies kann man in unserem Fall geschickt nutzen und somit die case-Abfragen zusammenfassen. Am Ende das break verhindert dann, dass der nächste Block auch ausgeführt wird.
Unser aufgeräumter Code vom obigen Beispiel sieht dann so aus:
let monat = 6;
switch (monat) {
case (3):
case (4):
case (5):
document.write('Es ist Fruehling');
break;
case (6):
case (7):
case (8):
document.write('Es ist Sommer');
break;
case (9):
case (10):
case (11):
document.write('Es ist Herbst');
break;
default:
document.write('Es ist Winter');
}
Der Bereich default wird i.d.R. als letzte Anweisung stehen, da es so logisch ist und übersichtlich bleibt – muss es aber technisch nicht, sondern könnte z.B. auch als erste Anweisung kommen.
Bevor wir weitere Beispiele machen. Oft wird der Monat aus dem Objekt Date und dessen Methode .getMonth() erzeugt.
var datum = new Date('December 24, 2019');
document.write(datum.getMonth());
Hier sieht man, dass JavaScript bei 0 anfängt zu zählen. Somit steht die 0 für Januar und die 11 für Dezember. Setzt man solchen Code ein, dass muss man obiges Beispiel bei den Fällen (case) entsprechend ändern!
Strict Comparison (===) bei switch
Die Kontrolle von den Fallwerten erfolgt bei switch immer auch auf den Typ der Variablen – sprich mit „===“.
Folgendes Programm wird nicht wie erwartet funktionieren, sondern der Fall default wird ausgeführt!
monat = "3";
switch (monat) {
case (3):
document.write('Es ist Fruehling');
break;
default:
document.write('Es ist Winter');
}
Warum? Die Variable mit dem Wert „3“ ist ein String und wird verglichen mit der Nummer 3. Somit klappt das nicht!
Es klappt nur, wenn in der Variablen auch eine Nummer gespeichert wird:
monat = 3;
switch und case ohne Zahlenwerte
Bei switch muss der zu überprüfende Wert nach case nicht unbedingt eine Zahl sein. Folgender Code als Beispiel:
let antwort = "Ja";
switch (antwort) {
case ("Ja"):
document.write('Ist erlaubt');
break;
case ("Nein"):
document.write('Ist nicht');
break;
case ("Vielleicht"):
document.write('Ist manchmal');
break;
default:
document.write('Noch nicht festgelegt');
}
case mit Ausdruck anstelle von Wert
Seit der Version 1.3 von JavaScript sind auch folgende Strukturen möglich (wobei man sich natürlich fragen kann, warum man dann nicht doch eine if-Abfrage nutzt).
Ein Beispiel der Vollständigkeit halber dazu:
let pixelbreite = 1300;
switch (true) {
case ( pixelbreite >= 1280):
document.write('Die Pixelbreite ist 1280 oder größer');
break;
case ( pixelbreite >= 800):
document.write('Die Pixelbreite ist 800 oder größer');
break;
default:
document.write('Die Pixelbreite ist kleiner als 800');
}
Wer hier einen realen Wert für die Fensterbreite des Browserfensters verwenden möchte, kann dies über window.innerWidth – Details dazu unter
https://www.javascript-kurs.de/javascript-innerWidth-outerWidth-innerHeight-outerHeight.htm<