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';
   }
}

break beendet die case-Bedingungen, so dass die folgenden Fälle nicht abgearbeitet werden, verläßt die switch-Abfrage oder springt zur default-Anweisung.

default trifft auf jeden Wert zu, der nicht von einem der Filter zuvor abgefangen wurde und wird darum am Ende der switch-Anweisung notiert.

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": 
		const mychoice = "Äpfel";
		break;
	case "Birnen": 
		const mychoice = "Birnen";
		break;

   default: 
      console.log (`${auswahl} ist 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.

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;