Javascript switch case

Javascript switch case führt anstelle mehrfacher if then else-Abfragen die Alternativen in einer überschaubaren Liste von Anweisungen auf. switch vergleicht den Wert der Bedingung mit dem Wert, der neben jeder case-Marke aufgeführt ist.

Wenn die Bedingung in case zutrifft, führt das Programm die Anweisungen des case-Labels aus. Mehrere Fälle können zusammengefasst werden und die Bedingung kann auf Bereiche prüfen.

switch case wirkt wie ein Schalter mit vielen Optionen

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

switch - case - Syntax

switch – case
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 duch if then else ausgetauscht werden. Wenn mehr als zwei oder drei Alternativen bestehen, ist die switch-Anweisung meistens einfacher in der Handhabung und auch effizienter, da sie nicht die Bedingung nicht für jede Option testen muss.

if then else
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. 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.

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

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.

Rate eine Zahl zwischen 0 und 5

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;
switch case