Switch Statements in JavaScript

Wenn du mehrere Werte prüfen musst, wird if/else schnell unübersichtlich. Switch Statements bieten eine elegante Alternative für Mehrfachverzweigungen.

Das Problem mit vielen if/else

const tag = "Montag";

// Unübersichtlich mit if/else
if (tag === "Montag") {
    console.log("Wochenstart!");
} else if (tag === "Dienstag") {
    console.log("Zweiter Tag");
} else if (tag === "Mittwoch") {
    console.log("Bergfest!");
} else if (tag === "Donnerstag") {
    console.log("Fast Freitag");
} else if (tag === "Freitag") {
    console.log("Wochenende naht!");
} else if (tag === "Samstag") {
    console.log("Wochenende!");
} else if (tag === "Sonntag") {
    console.log("Noch Wochenende!");
} else {
    console.log("Ungültiger Tag");
}

Die Lösung: Switch

const tag = "Montag";

switch (tag) {
    case "Montag":
        console.log("Wochenstart!");
        break;
    case "Dienstag":
        console.log("Zweiter Tag");
        break;
    case "Mittwoch":
        console.log("Bergfest!");
        break;
    case "Donnerstag":
        console.log("Fast Freitag");
        break;
    case "Freitag":
        console.log("Wochenende naht!");
        break;
    case "Samstag":
        console.log("Wochenende!");
        break;
    case "Sonntag":
        console.log("Noch Wochenende!");
        break;
    default:
        console.log("Ungültiger Tag");
}

Anatomie eines Switch Statements

switch (ausdruck) {
    case wert1:
        // Code für wert1
        break;
    case wert2:
        // Code für wert2
        break;
    default:
        // Code wenn nichts passt
}

Die Bestandteile

Teil	Beschreibung
`switch (ausdruck)`	Der Wert, der geprüft wird
`case wert:`	Ein möglicher Wert zum Vergleichen
`break;`	Beendet den Switch-Block
`default:`	Wird ausgeführt, wenn kein case passt

Wichtig: Das `break` Statement

Ohne break läuft der Code weiter! Das nennt man “Fall-Through”:

const note = 2;

// OHNE break - Fall-Through!
switch (note) {
    case 1:
        console.log("Sehr gut");
    case 2:
        console.log("Gut");
    case 3:
        console.log("Befriedigend");
    default:
        console.log("Ende");
}

// Ausgabe bei note = 2:
// "Gut"
// "Befriedigend"
// "Ende"

Mit break - Korrekt:

const note = 2;

switch (note) {
    case 1:
        console.log("Sehr gut");
        break;
    case 2:
        console.log("Gut");
        break;
    case 3:
        console.log("Befriedigend");
        break;
    default:
        console.log("Ende");
}

// Ausgabe: "Gut"

Fall-Through bewusst nutzen

Manchmal ist Fall-Through gewünscht - wenn mehrere Werte das gleiche Ergebnis haben sollen:

const tag = "Samstag";

switch (tag) {
    case "Montag":
    case "Dienstag":
    case "Mittwoch":
    case "Donnerstag":
    case "Freitag":
        console.log("Arbeitstag");
        break;
    case "Samstag":
    case "Sonntag":
        console.log("Wochenende!");
        break;
    default:
        console.log("Ungültiger Tag");
}
// Ausgabe: "Wochenende!"

Praktische Beispiele

Beispiel 1: Monatslänge berechnen

function getTageImMonat(monat, jahr) {
    switch (monat) {
        case 1: case 3: case 5: case 7:
        case 8: case 10: case 12:
            return 31;

        case 4: case 6: case 9: case 11:
            return 30;

        case 2:
            // Schaltjahr prüfen
            const istSchaltjahr = (jahr % 4 === 0 && jahr % 100 !== 0) || (jahr % 400 === 0);
            return istSchaltjahr ? 29 : 28;

        default:
            return -1; // Ungültiger Monat
    }
}

console.log(getTageImMonat(2, 2024)); // 29 (Schaltjahr)
console.log(getTageImMonat(2, 2023)); // 28
console.log(getTageImMonat(7, 2024)); // 31

Beispiel 2: Benutzer-Rollen

function getBerechtigungen(rolle) {
    let berechtigungen = [];

    switch (rolle) {
        case "admin":
            berechtigungen.push("benutzer_loeschen");
            berechtigungen.push("einstellungen_aendern");
            // Fall-through gewollt!
        case "moderator":
            berechtigungen.push("beitraege_loeschen");
            berechtigungen.push("benutzer_sperren");
            // Fall-through gewollt!
        case "user":
            berechtigungen.push("beitraege_schreiben");
            berechtigungen.push("profil_bearbeiten");
            break;
        default:
            berechtigungen.push("nur_lesen");
    }

    return berechtigungen;
}

console.log(getBerechtigungen("admin"));
// ["benutzer_loeschen", "einstellungen_aendern", "beitraege_loeschen",
//  "benutzer_sperren", "beitraege_schreiben", "profil_bearbeiten"]

console.log(getBerechtigungen("user"));
// ["beitraege_schreiben", "profil_bearbeiten"]

Beispiel 3: Taschenrechner

function rechne(a, operator, b) {
    switch (operator) {
        case "+":
            return a + b;
        case "-":
            return a - b;
        case "*":
            return a * b;
        case "/":
            if (b === 0) {
                return "Fehler: Division durch 0";
            }
            return a / b;
        case "%":
            return a % b;
        case "**":
            return a ** b;
        default:
            return "Unbekannter Operator";
    }
}

console.log(rechne(10, "+", 5));  // 15
console.log(rechne(10, "-", 5));  // 5
console.log(rechne(10, "*", 5));  // 50
console.log(rechne(10, "/", 5));  // 2
console.log(rechne(2, "**", 8));  // 256

Beispiel 4: HTTP Status Codes

function getStatusMessage(code) {
    switch (code) {
        case 200:
            return "OK - Anfrage erfolgreich";
        case 201:
            return "Created - Ressource erstellt";
        case 204:
            return "No Content - Erfolgreich, keine Daten";
        case 400:
            return "Bad Request - Ungültige Anfrage";
        case 401:
            return "Unauthorized - Nicht authentifiziert";
        case 403:
            return "Forbidden - Keine Berechtigung";
        case 404:
            return "Not Found - Nicht gefunden";
        case 500:
            return "Internal Server Error - Serverfehler";
        case 502:
            return "Bad Gateway - Gateway-Fehler";
        case 503:
            return "Service Unavailable - Dienst nicht verfügbar";
        default:
            if (code >= 200 && code < 300) {
                return "Erfolg (2xx)";
            } else if (code >= 400 && code < 500) {
                return "Client-Fehler (4xx)";
            } else if (code >= 500) {
                return "Server-Fehler (5xx)";
            }
            return "Unbekannter Status";
    }
}

console.log(getStatusMessage(200)); // "OK - Anfrage erfolgreich"
console.log(getStatusMessage(404)); // "Not Found - Nicht gefunden"

Switch mit Blöcken

Wenn du Variablen in einem case deklarierst, brauchst du geschweifte Klammern:

const aktion = "erstellen";

switch (aktion) {
    case "erstellen": {
        const nachricht = "Neuer Eintrag wird erstellt...";
        const timestamp = Date.now();
        console.log(nachricht, timestamp);
        break;
    }
    case "loeschen": {
        const nachricht = "Eintrag wird gelöscht..."; // Gleichername - OK wegen Block
        console.log(nachricht);
        break;
    }
    default: {
        console.log("Unbekannte Aktion");
    }
}

Switch vs. if/else - Wann was?

Verwende `switch` wenn:

// Viele exakte Wertvergleiche
switch (farbe) {
    case "rot": /* ... */ break;
    case "grün": /* ... */ break;
    case "blau": /* ... */ break;
}

// Enums oder feste Werte
switch (status) {
    case "PENDING": /* ... */ break;
    case "APPROVED": /* ... */ break;
    case "REJECTED": /* ... */ break;
}

Verwende `if/else` wenn:

// Bereiche prüfen
if (alter < 18) {
    console.log("Minderjährig");
} else if (alter < 65) {
    console.log("Erwachsen");
} else {
    console.log("Senior");
}

// Komplexe Bedingungen
if (user.isAdmin && user.isActive) {
    // ...
}

// Unterschiedliche Vergleiche
if (a > b && c !== d) {
    // ...
}

Alternative: Object Lookup

Für einfache Wertzuordnungen ist ein Object oft eleganter:

// Statt switch:
function getNoteName(note) {
    switch (note) {
        case 1: return "Sehr gut";
        case 2: return "Gut";
        case 3: return "Befriedigend";
        case 4: return "Ausreichend";
        case 5: return "Mangelhaft";
        case 6: return "Ungenügend";
        default: return "Ungültig";
    }
}

// Besser - Object Lookup:
const notenNamen = {
    1: "Sehr gut",
    2: "Gut",
    3: "Befriedigend",
    4: "Ausreichend",
    5: "Mangelhaft",
    6: "Ungenügend"
};

function getNoteName(note) {
    return notenNamen[note] || "Ungültig";
}

console.log(getNoteName(2)); // "Gut"

Mit Funktionen:

const aktionen = {
    erstellen: () => console.log("Erstelle..."),
    loeschen: () => console.log("Lösche..."),
    bearbeiten: () => console.log("Bearbeite..."),
    default: () => console.log("Unbekannt")
};

function ausfuehren(aktion) {
    const fn = aktionen[aktion] || aktionen.default;
    fn();
}

ausfuehren("erstellen"); // "Erstelle..."
ausfuehren("xyz");       // "Unbekannt"

Häufige Fehler

1. Break vergessen

// ❌ Falsch - Break vergessen
switch (x) {
    case 1:
        doSomething();
        // break fehlt!
    case 2:
        doSomethingElse();
        break;
}

// ✅ Richtig
switch (x) {
    case 1:
        doSomething();
        break;
    case 2:
        doSomethingElse();
        break;
}

2. Strikte Gleichheit vergessen

Switch verwendet === (strikte Gleichheit):

const wert = "1";

switch (wert) {
    case 1:
        console.log("Zahl 1");
        break;
    case "1":
        console.log("String 1");
        break;
}
// Ausgabe: "String 1" (weil "1" !== 1)

3. Default vergessen

// ❌ Ohne default - unbehandelte Fälle
switch (status) {
    case "ok":
        return true;
    case "error":
        return false;
}
// Was passiert bei "pending"? undefined!

// ✅ Mit default
switch (status) {
    case "ok":
        return true;
    case "error":
        return false;
    default:
        return null;
}

Zusammenfassung

Konzept	Beschreibung
`switch (wert)`	Prüft einen Wert gegen mehrere Cases
`case x:`	Definiert einen möglichen Wert
`break;`	Beendet den Switch-Block
`default:`	Wird ausgeführt wenn kein Case passt
Fall-Through	Ohne break läuft Code weiter
`===`	Switch verwendet strikte Gleichheit

Übung: Baue eine Funktion getJahreszeit(monat), die für Monate 1-12 die passende Jahreszeit zurückgibt. Nutze Fall-Through für Monate der gleichen Jahreszeit!

Switch Statements in JavaScript

Switch Statements in JavaScript

Das Problem mit vielen if/else

Die Lösung: Switch

Anatomie eines Switch Statements

Die Bestandteile

Wichtig: Das break Statement

Fall-Through bewusst nutzen

Praktische Beispiele

Beispiel 1: Monatslänge berechnen

Beispiel 2: Benutzer-Rollen

Beispiel 3: Taschenrechner

Beispiel 4: HTTP Status Codes

Switch mit Blöcken

Switch vs. if/else - Wann was?

Verwende switch wenn:

Verwende if/else wenn:

Alternative: Object Lookup

Mit Funktionen:

Häufige Fehler

1. Break vergessen

2. Strikte Gleichheit vergessen

3. Default vergessen

Zusammenfassung

Wichtig: Das `break` Statement

Verwende `switch` wenn:

Verwende `if/else` wenn: