Javascript switch case

switch - case - Syntax

Ein Programm oder Script zu lesen ist fast immer schwieriger, als das Programm zu schreiben. Knackig kurze Abfragen mit überschaubaren Zweigen machen es leichter, der Logik zu folgen.

switch-Anweisungen können komplexe if else-Bedingungen in eine besser überschaubare Struktur umsetzen.

sel.onchange = function () {
   switch (this.value) {
      case 'Kirschen' :
         res.innerHTML = 'Obst';
         break;
      case 'Erbsen' :
         res.innerHTML = 'Gemüse';
         break;
      default:
         res.innerHTML = 'Nüsse';
   }
}

default trifft auf jeden Wert zu, der nicht von einem der Filter zuvor abgefangen wurde und wird darum am Ende der switch-Anweisung notiert. break beendet die switch-Anweisung, so dass die folgenden Anweisungen nicht abgearbeitet werden.

switch vs if-then

Die switch-Anweisung kann gegen bedingte Anweisungen mit if then else ausgetauscht werden. 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.

sel.onchange = function () {
   if ( this.value == 'Kirschen' ) {
      res.innerHTML = 'Obst';
   } else if ( this.value == 'Erbsen') {
      res.innerHTML = 'Gemüse';
   } else {
      res.innerHTML = 'Nüsse';
   } 
}

case break default

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.
• Das Schlüsselwort default ist eine Sprungmarke, die alle Fälle abfängt, in denen keine der Bedingungen zutrifft.
• Das Schlüsselwort break ist eine Anweisung, den switch-Block sofort zu verlassen und am Ende des Blocks mit der Ausführung fortzufahren.

Nur die switch-Anweisung benötigt die geschweiften Klammern. Ein sauber formatierter Code sorgt dafür, dass die switch-Anweisung besser lesbar ist.

switch (auswahl) {
   case "Äpfel": 
      alert(auswahl + ' , 1,75€');
      break;
   case "Birnen": 
      alert(auswahl + ' , 2,70€');
      break;
   case "Pflaumen": 
      alert(auswahl + ' , 3,05€');
      break;

   default: 
      alert(auswahl + ' haben wir leider nicht im Angebot');
}

Apropos geschweifte Klammern: Die machen einen Block-Scope auf – einen!.

switch (auswahl) {
	case "Äpfel": 
		let mychoice = "Äpfel";
		break;
	case "Birnen": 
		let mychoice = "Birnen";
		break;

   default: 
      alert(auswahl + ' haben wir leider nicht im Angebot');
}

SyntaxError: Cannot declare a let variable twice: 'mychoice'.

Die case-Anweisungen können in solchen Fällen in geschweifte Klammern gesetzt werden.

break

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 Anweisungen 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.

switch – case-Block: Wert und Typ

switch - case testet, ob der Ausdruck identisch ist, und nicht, ob der Ausdruck gleich ist. Das bedeutet, dass ihr Wert denselben Wert und Typ liefern muss wie der Ausdruck der switch-Anweisung. Wenn das Ergebnis der switch-Bedingung also immer bei der default-Aktion endet, stimmen meist die Typen der entwickelten Ausdrücke nicht überein.

Im vorangegangenen Beispiel wäre das der Fall, wenn die Variable zahl nicht in einen Integer verwandelt worden wäre: Der Wert eines INPUT-Elements ist immer ein String, auch wenn eine Zahl eingegeben wird.

Mit switch-case testen, ob eine Zahl in einem Range zwischen x und y liegt:

let plz = parseInt(matches);
switch( true ) {
	case (plz >= 01067 && plz <= 01328):
		console.log ("Dresden");
		break;
	case (plz >= 20095 && plz <= 21039):
		console.log ("Hamburg");
		break;
	…

case mit Ausdruck

Der Wert, der auf case folgt, kann seit Javascript Version 1.3 auch ein Ausdruck sein. 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;