switch case – viele Alternativen übersichtlich prüfen

switch - case - Syntax

switch-Anweisungen können komplexe if else-Bedingungen in eine besser überschaubare Struktur umsetzen. Gut lesbare Abfragen mit überschaubaren Zweigen machen es leichter, der Logik zu folgen.

switch (Ausdruck) {
   case label1: 
      Anweisungen; 
      break;
   case label2: 
      Anweisungen; 
      break; 
   ...
   default: Anweisungen;
} 

• Das Schlüsselwort case ist eine Sprungmarke – ein „label“ –, das eine Stelle im Code markiert, an der die Ausführung des Programms beginnt, wenn der Ausdruck in der switch-Anweisung dem Wert der Sprungmarke entspricht.
• default ist eine Sprungmarke, die alle Fälle abfängt, in denen keine der Bedingungen zutrifft. default trifft auf jeden Wert zu, der nicht von einem der Filter zuvor abgefangen wurde und wird darum meist am Ende der switch-Anweisung notiert.
• break beendet die case-Bedingung, so dass die folgenden Fälle nicht abgearbeitet werden, springt zur default-Anweisung oder verläßt die switch-Abfrage.

Nur die switch-Anweisung benötigt die geschweiften Klammern.

const tag = 3;

switch (tag) {                    ◀───┐
  case 1:                             │
    console.log("Montag");            │
    break;                            │
                                      │
  case 2:                             │
    console.log("Dienstag");          │
    break;                            │
                                      │
  case 3:                             │
    console.log("Mittwoch");          │
    break;                            │
                                      │
  default:                            │
    console.log("Unbekannter Tag");   │
}                                 ◀───┘

switch vs if-then

Die switch-Anweisung kann gegen bedingte Anweisungen mit if then else ausgetauscht werden. Ein switch ist im Grund nur

if (tag === 1) {
	console.log("Montag");
} else if (tag === 2) {
	console.log("Dienstag");
} else if (tag === 3) {
	console.log("Mittwoch");
} else if (tag === 4) {
	console.log("Donnerstag");
} else {
	console.log ("Fehler")
}

Wenn mehr als zwei oder drei Alternativen bestehen, ist die switch-Anweisung einfacher in der Handhabung und auch effizienter, da sie nicht die Bedingung nicht für jede Option testen muss. switch ist sinnvoll, wenn ein Wert viele mögliche feste Varianten haben kann. Typischen Anwendungen sind

• Statuscodes
• Event-Typen
• Menü-Elemente

const res = document.querySelector("#res");
document.querySelector("#obst").addEventListener("change", (evt) => {
	switch(evt.target.value) {
		case "Kirschen": 
			res.textContent = "Kirschen";
			break;
		case "Orangen": 
			res.textContent = "Orangen";
			break;
		case "Zitronen": 
			res.textContent = "Zitronen";
			break;
		case "Äpfel": 
			res.textContent = "Äpfel";
			break;
		default:
			res.textContent = "Fehler";
	}
})

break – switch sofort beenden

Wenn break nicht am Ende jeder case-Marke steht, fällt die Prüfung im wahrsten Sinne des Wortes durch: Auch wenn z.B. die erste case-Marke zutrifft, werden die Befehle der folgenden case-Marke ausgeführt. Steht dort ebenfalls kein break, werden auch hier die Anweisungen ausgeführt und am Ende auch noch die Anweisungen der default-Marke.

let auswahl = "🌽";
switch (auswahl) {
	case "🍓": 
		console.log ("Erdbeere");
	case "🌽": 
		console.log ("Mais");
	case "🍍": 
		console.log ("Ananas");
	case "🍋": 
		console.log ("Zitrone");
	default: 
		console.log ("Am Ende von allem");
}

[Log] Erdbeere 
[Log] Mais 
[Log] Ananas 
[Log] Zitrone 
[Log] Am Ende von allem

Ein case-Block für mehrere Fälle

Es gibt auch Fälle, in denen es Sinn macht, die break-Anweisung zu unterlassen, z.B. um mehrere Fälle mit demselben Block von Anweisungen zu behandeln.

let go = document.getElementById("go");
go.onclick = function() {
   let zahl = document.getElementById("guess").value;
   let result = document.getElementById("guessResult");
   switch(parseInt(zahl)) {
      case 0:
      case 1:
      case 2:
         result.innerHTML = zahl + " ist zu klein";
         break;
      case 3: 
         result.innerHTML = "Genau! " + zahl + " ist richtig!";
         break;
      case 4:
      case 5:
         result.innerHTML = zahl + " ist zu groß";
         break;
      default:
         result.innerHTML = "Das ist völlig daneben oder gar keine Zahl!";
   } 
}

Wenn die Eingabe 0, 1, oder 2 war, wird der Anweisungsblock der case-Marke 2 ausgeführt, ebenso wie der Anweisungsblock der case-Marke 5 ausgeführt wird, wenn die Eingabe 4 oder 5 lautet.

case mit Ausdruck

switch prüft immer auf exakte Gleichheit (===). Der Wert, der auf case folgt, kann seit Javascript Version 1.3 auch ein Ausdruck sein. Bei logischen Ausdrücken – z.B. der Frage, ob ein Wert zwischen 10 und 20 liegt, wird switch nicht auf x sondern auf true geschaltet. Testen, ob ein Wert innerhalb eines numerischen Bereichs liegt:

width = window.innerWidth;
switch (true) {
    case (width > 1259): 
        win.innerHTML = '1260 px '; 
        break;
    case (width > 719): 
        win.innerHTML = '720 px '; 
        break;
    case (width > 479): 
        win.innerHTML = '480 px '; 
        break;
    default: 
        win.innerHTML = '300 px ';
}
win.innerHTML = width;