JavaScript - Switch Case: Ein Anfängerguide

Hallo da, zukünftiger Codingsuperstar! Bist du bereit, eines der coolsten Entscheidungswerkzeuge von JavaScript zu lernen? Setz dich fest, denn wir tauchen gleich in die wunderbare Welt der Switch Case-Anweisungen ein!

Was ist Switch Case?

Bevor wir ins Detail gehen, beginnen wir mit einer einfachen Analogie. Stell dir vor, du bist in einem Eiscafé und musst einen Geschmack auswählen. Du könntest eine Reihe von "if-else"-Anweisungen verwenden, um zu entscheiden, aber das wäre wie das Fragen des Bedieners: "Ist es Vanille? Nein? Ist es Schokolade? Nein? Ist es Erdbeere?" und so weiter. Wäre es nicht einfacher, einfach zu sagen: "Welcher Geschmack ist es?" und dann basierend auf der Antwort zu wählen? Genau das macht Switch Case!

Flussdiagramm

Um zu visualisieren, wie Switch Case funktioniert, schauen wir uns ein Flussdiagramm an:

[Start]
|
v
[Überprüfe Ausdruck]
|
______|_______
|      |       |
v      v       v
[Fall 1][Fall 2][Fall 3]...
|      |       |
v      v       v
[Aktion 1][Aktion 2][Aktion 3]...
|      |       |
|______|_______|
|
v
[Standard]
|
v
[Ende]

Dieses Flussdiagramm zeigt, wie Switch Case einen Ausdruck überprüft und dann den entsprechenden Fallblock ausführt. Wenn kein passender Fall gefunden wird, wird der Standardblock ausgeführt (falls angegeben).

Syntax

Nun zerlegen wir die Syntax einer Switch Case-Anweisung:

switch(expression) {
case value1:
// auszuführender Code
break;
case value2:
// auszuführender Code
break;
case value3:
// auszuführender Code
break;
...
default:
// auszuführender Code, wenn kein Fall übereinstimmt
}

Hier ist, was jeder Teil bedeutet:

• switch(expression): Hier platzieren wir den Wert, den wir überprüfen möchten.
• case value: Dies sind die möglichen passenden Werte für den Ausdruck.
• // auszuführender Code: Dies ist, was passiert, wenn der Fall übereinstimmt.
• break: Dieses Schlüsselwort sagt JavaScript, den Switch-Block nach der Ausführung des passenden Falls zu verlassen.
• default: Dies ist wie das "else" in einer if-else-Anweisung. Es wird ausgeführt, wenn keine Fälle übereinstimmen.

Beispiele

Lassen Sie uns in einige Beispiele eintauchen, um Switch Case in Aktion zu sehen!

Beispiel 1: Wochentage

let day = 3;
let dayName;

switch (day) {
case 1:
dayName = "Montag";
break;
case 2:
dayName = "Dienstag";
break;
case 3:
dayName = "Mittwoch";
break;
case 4:
dayName = "Donnerstag";
break;
case 5:
dayName = "Freitag";
break;
case 6:
dayName = "Samstag";
break;
case 7:
dayName = "Sonntag";
break;
default:
dayName = "Ungültiger Tag";
}

console.log(dayName); // Ausgabe: Mittwoch

In diesem Beispiel verwenden wir Switch Case, um eine Tagesnummer in ihren entsprechenden Namen umzuwandeln. Hier ist, was passiert:

1. Wir setzen day auf 3.
2. Die Switch-Anweisung überprüft den Wert von day.
3. Sie findet eine Übereinstimmung im case 3.
4. Sie setzt dayName auf "Mittwoch".
5. Die break-Anweisung verlässt den Switch-Block.
6. Schließlich protokollieren wir dayName in der Konsole.

Beispiel 2: Notensystem

Lassen Sie uns ein einfaches Notensystem erstellen:

let grade = 'B';
let message;

switch(grade) {
case 'A':
message = "Excellent job!";
break;
case 'B':
message = "Great work!";
break;
case 'C':
message = "Good effort!";
break;
case 'D':
message = "You need to study more.";
break;
case 'F':
message = "Please see me after class.";
break;
default:
message = "Invalid grade";
}

console.log(message); // Ausgabe: Great work!

In diesem Beispiel:

1. Wir setzen grade auf 'B'.
2. Die Switch-Anweisung überprüft den Wert von grade.
3. Sie findet eine Übereinstimmung im case 'B'.
4. Sie setzt message auf "Great work!".
5. Die break-Anweisung verlässt den Switch-Block.
6. Wir protokollieren message in der Konsole.

Beispiel 3: Mehrere Fälle

Manchmal möchtest du, dass verschiedene Fälle das gleiche Ergebnis haben. Hier ist, wie du das erreichen kannst:

let fruit = "apple";
let category;

switch(fruit) {
case "apple":
case "pear":
case "banana":
category = "common fruit";
break;
case "mango":
case "papaya":
category = "tropical fruit";
break;
default:
category = "unknown fruit";
}

console.log(category); // Ausgabe: common fruit

In diesem Beispiel:

1. Wir setzen fruit auf "apple".
2. Die Switch-Anweisung überprüft den Wert von fruit.
3. Sie findet eine Übereinstimmung im ersten case "apple".
4. Da es kein break-Statement gibt, geht es zur nächsten Zeile weiter.
5. Sie setzt category auf "common fruit".
6. Das break-Statement verlässt dann den Switch-Block.

Switch Case Methoden

Hier ist eine Tabelle der Switch Case-bezogenen Methoden und ihre Beschreibungen:

Methode	Beschreibung
switch	Startet eine Switch-Anweisung
case	Definiert einen Fall in der Switch-Anweisung
break	Verlässt den Switch-Block
default	Definiert den Standardfall, wenn keine anderen Fälle übereinstimmen

Denke daran, Switch Case ist alles darum, deinen Code lesbarer und effizienter zu machen, wenn du mehrere Bedingungen überprüfen musst. Es ist wie ein Verkehrsleiter, der deinen Code basierend auf einem bestimmten Wert an die richtige Stelle leitet.

Also, das war's! Du bist jetzt mit der Macht von Switch Case ausgestattet. Erinnere dich daran, Übung macht den Meister, also versuche, deine eigenen Switch Case-Anweisungen zu erstellen. Vielleicht machst du ein spaßiges Spiel, bei dem verschiedene Entscheidungen zu unterschiedlichen Ergebnissen führen. Die Möglichkeiten sind endlos!

Happy Coding und möge der Switch mit dir sein! ??

Credits: Image by storyset