Switch w JavaScript: case, break i fallthrough

Switch wybiera jedną gałąź z wielu

switch to instrukcja sterująca na sytuacje, gdy porównujesz jedną wartość z kilkoma znanymi opcjami. Łańcuch if/else if/else zrobi to samo, ale gdy sprawdzasz tę samą zmienną trzy albo cztery razy z rzędu, switch czyta się lepiej.

Podstawowa postać:

const day = "Wed";

switch (day) {
    case "Mon":
        console.log("Początek tygodnia");
        break;
    case "Wed":
        console.log("Środek tygodnia");
        break;
    case "Fri":
        console.log("Prawie weekend");
        break;
    default:
        console.log("Jakiś inny dzień");
}

Czytając od góry: JavaScript oblicza day, porównuje wynik z każdą etykietą case i wykonuje pasujący blok. default łapie wszystko, co nie pasowało, jak końcowe else. Kolejność czytania to wartość → case → kod.

Jak naprawdę działa dopasowanie

switch porównuje za pomocą ścisłej równości, czyli operatora ===. Bez konwersji typów, bez przybliżonych dopasowań. case 1: dopasuje liczbę 1, ale nie string "1".

const code = "1";

switch (code) {
    case 1:
        console.log("jeden jako liczba");
        break;
    case "1":
        console.log("jeden jako string");
        break;
    default:
        console.log("brak dopasowania");
}

Pasuje tylko drugi przypadek. Jeśli kiedyś zdziwi cię, że switch nie reaguje, winowajcą zwykle jest niezgodność stringa i liczby, pochodząca z pola formularza albo parametru URL.

break zatrzymuje przepływ

Tu wiele osób się potyka. Etykieta case to cel skoku, a nie samodzielny blok. Gdy wykonanie trafi na pasujący przypadek, leci dalej linia po linii, prosto przez etykietę następnego przypadku, aż natrafi na break, return albo koniec switch.

Zobacz, co się dzieje bez break:

const role = "editor";

switch (role) {
    case "admin":
        console.log("pełny dostęp");
    case "editor":
        console.log("może edytować");
    case "viewer":
        console.log("może przeglądać");
    default:
        console.log("zalogowany");
}

Pasuje "editor", ale i tak dostajesz może edytować, może przeglądać i zalogowany. To fallthrough: wykonanie przeleciało przez każdy kolejny przypadek, bo nic nie kazało mu się zatrzymać.

Dodaj break i wszystko działa jak trzeba:

const role = "editor";

switch (role) {
    case "admin":
        console.log("pełny dostęp");
        break;
    case "editor":
        console.log("może edytować");
        break;
    case "viewer":
        console.log("może przeglądać");
        break;
    default:
        console.log("zalogowany");
}

Nawyk: każdy przypadek kończy się break, chyba że świadomie chcesz fallthrough.

Celowy fallthrough do grupowania

Fallthrough nie zawsze jest pomyłką. Pominięcie break to czysty sposób, by powiedzieć "wszystkie te przypadki robią to samo":

function daysIn(month, year) {
    switch (month) {
        case "Jan":
        case "Mar":
        case "May":
        case "Jul":
        case "Aug":
        case "Oct":
        case "Dec":
            return 31;
        case "Apr":
        case "Jun":
        case "Sep":
        case "Nov":
            return 30;
        case "Feb":
            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
        default:
            return 0;
    }
}

console.log(daysIn("Feb", 2024));
console.log(daysIn("Aug", 2025));

Ułożone jedna pod drugą puste etykiety case dzielą blok znajdujący się pod nimi. Zauważ, że po return nie trzeba break: funkcja kończy się całkowicie. return wewnątrz switch pomija wszystko, co nastąpiłoby dalej.

Gdy naprawdę chcesz fallthrough między niepustymi przypadkami, zostaw komentarz, żeby następna osoba czytająca kod go nie "naprawiła":

switch (event) {
    case "click":
        track("click");
        // fallthrough
    case "hover":
        highlight();
        break;
}

default nie musi być na końcu

Zwyczajowo default stoi na dole i tam spodziewa się go większość czytelników. Technicznie to jednak zwykła etykieta: pasuje, gdy nie pasował żaden case, niezależnie od tego, gdzie stoi. Jeśli wstawisz default w środek bez break, wykonanie przejdzie do tego, co jest pod nim. Umieść go na końcu, zakończ break (albo nie, bo nic dalej nie ma), a twoje przyszłe ja ci podziękuje.

function describeStatus(code) {
    switch (code) {
        case 200:
        case 201:
            return "success";
        case 404:
            return "not found";
        case 500:
            return "server error";
        default:
            return "unknown";
    }
}

console.log(describeStatus(200));
console.log(describeStatus(404));
console.log(describeStatus(418));

Zasięg zmiennych wewnątrz case

Przypadki dzielą jeden zasięg blokowy: cały switch. Zadeklarowanie let albo const o tej samej nazwie w dwóch przypadkach rzuca błąd ponownej deklaracji:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

Rozwiązanie to osobny blok dla każdego przypadku: otocz ciało nawiasami { }:

const x = 2;

switch (x) {
    case 1: {
        const msg = "one";
        console.log(msg);
        break;
    }
    case 2: {
        const msg = "two";
        console.log(msg);
        break;
    }
}

Teraz każde msg żyje we własnym zasięgu i konflikt znika. Warto o tym pamiętać zawsze, gdy case potrzebuje więcej niż jednej czy dwóch linii logiki.

switch a if/else

switch błyszczy, gdy sprawdzasz jedną wartość względem wielu stałych opcji: kodów HTTP, typów akcji Reduxa, nazw poleceń, stringów działających jak enum. Wartość pojawia się raz na górze, a wzrok czytelnika przebiega po etykietach case jak po spisie treści.

if/else jest lepsze, gdy:

• Porównujesz przedziały (score >= 90, score >= 75).
• Warunki dotyczą różnych zmiennych albo wyrażeń logicznych.
• Chcesz luźnej równości albo własnych porównań (switch zawsze używa ===).

// Pasuje do switch: jedna wartość, wiele dyskretnych opcji.
function statusLabel(code) {
    switch (code) {
        case 200: return "OK";
        case 301: return "Moved";
        case 404: return "Not Found";
        case 500: return "Server Error";
        default:  return `Status ${code}`;
    }
}

// Better as if/else - ranges and mixed conditions.
function grade(score) {
    if (score >= 90) return "A";
    if (score >= 75) return "B";
    if (score >= 60) return "C";
    return "F";
}

console.log(statusLabel(404));
console.log(grade(82));

Popularną nowoczesną alternatywą dla pierwszego wzorca jest obiekt jako tablica wyszukiwania:

const labels = {
    200: "OK",
    301: "Moved",
    404: "Not Found",
    500: "Server Error",
};

function statusLabel(code) {
    return labels[code] ?? `Status ${code}`;
}

console.log(statusLabel(200));
console.log(statusLabel(418));

Trzy linie zamiast dziewięcioliniowego switch. Gdy przypadki to czyste mapowania danych bez prawdziwej logiki, obiekt (albo Map) zwykle czyta się lepiej. Po switch sięgaj wtedy, gdy każdy przypadek wykonuje prawdziwą pracę.

Dalej: pętle for

switch obsługuje jedną decyzję spośród wielu opcji. Kolejny element sterowania przepływem to powtarzanie: wykonywanie tego samego bloku kodu raz po raz. Do tego służą pętle for, które poznasz w następnej części.