Switch in JavaScript: case, break e fallthrough

Switch sceglie un ramo tra tanti

switch è un'istruzione di controllo del flusso da usare quando confronti un singolo valore con un piccolo gruppo di opzioni note. Una catena di if/else if/else può fare lo stesso lavoro, ma quando controlli la stessa variabile tre o quattro volte di fila, switch si legge meglio.

La forma di base:

const day = "Wed";

switch (day) {
    case "Mon":
        console.log("Start of the week");
        break;
    case "Wed":
        console.log("Midweek");
        break;
    case "Fri":
        console.log("Almost there");
        break;
    default:
        console.log("Some other day");
}

Leggendolo dall'alto in basso: JavaScript valuta day, lo confronta con ogni etichetta case ed esegue il blocco corrispondente. default cattura tutto ciò che non ha trovato corrispondenza, come un else finale. L'ordine di lettura è valore → case → codice.

Come funziona davvero il confronto

switch confronta con l'uguaglianza stretta, cioè con l'operatore ===. Nessuna conversione di tipo, nessuna corrispondenza approssimativa. case 1: corrisponde al numero 1 ma non alla stringa "1".

const code = "1";

switch (code) {
    case 1:
        console.log("number one");
        break;
    case "1":
        console.log("string one");
        break;
    default:
        console.log("no match");
}

Corrisponde solo il secondo case. Se ti capita di vedere uno switch che non scatta, di solito il colpevole è una discrepanza tra stringa e numero che arriva da un campo di un form o da un parametro dell'URL.

È break che ferma il flusso

Questa è la parte che mette in difficoltà. Un'etichetta case è un punto di salto, non un blocco a sé stante. Una volta che l'esecuzione arriva su un case corrispondente, continua riga per riga, attraversando anche l'etichetta del case successivo, finché non incontra break, return o la fine dello switch.

Guarda cosa succede senza break:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
    case "editor":
        console.log("can edit");
    case "viewer":
        console.log("can view");
    default:
        console.log("logged in");
}

La corrispondenza è "editor", ma ottieni comunque can edit, can view e logged in. Questo è il fallthrough: l'esecuzione è "caduta" in ognuno dei case successivi perché niente le ha detto di fermarsi.

Aggiungi break e si comporta come previsto:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
        break;
    case "editor":
        console.log("can edit");
        break;
    case "viewer":
        console.log("can view");
        break;
    default:
        console.log("logged in");
}

L'abitudine da prendere: ogni case termina con break, a meno che tu non voglia esplicitamente il fallthrough.

Fallthrough voluto per raggruppare i case

Il fallthrough non è sempre un errore. Omettere break è un modo pulito per dire "questi case fanno tutti la stessa cosa":

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

Le etichette case vuote impilate condividono il blocco sotto di loro. Nota che dopo return non serve break: la funzione termina del tutto. Un return dentro uno switch salta tutto ciò che sarebbe venuto dopo.

Quando vuoi il fallthrough tra case non vuoti, lascia un commento così chi legge dopo di te non lo "corregge":

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

default non deve per forza stare in fondo

Per convenzione default va in fondo, ed è lì che la maggior parte dei lettori se lo aspetta. Ma tecnicamente è solo un'altra etichetta: corrisponde quando nessun case lo ha fatto, ovunque si trovi. Se metti default nel mezzo senza break, l'esecuzione proseguirà in ciò che sta sotto. Mettilo per ultimo, chiudilo con break (o no, visto che dopo non c'è niente) e il te del futuro ti ringrazierà.

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

Lo scope delle variabili dentro un case

I case condividono un unico scope di blocco: l'intero switch. Dichiarare con let o const lo stesso nome in due case lancia un errore di ridichiarazione:

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

La soluzione è un blocco per ogni case: racchiudi il corpo tra { }:

const x = 2;

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

Ora ogni msg vive nel proprio scope e il conflitto sparisce. Vale la pena ricordarlo ogni volta che un case ha bisogno di più di una o due righe di logica.

switch vs if/else

switch dà il meglio quando confronti un solo valore con molte opzioni fisse: codici HTTP, tipi di azione Redux, nomi di comandi, stringhe simili a enum. Il valore compare una volta in cima, e l'occhio può scorrere le etichette dei case come un indice.

if/else è meglio quando:

• Confronti intervalli (score >= 90, score >= 75).
• Le condizioni coinvolgono variabili diverse o espressioni booleane.
• Vuoi l'uguaglianza debole o confronti personalizzati (switch usa sempre ===).

// Adatto a switch: un valore, molte opzioni distinte.
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));

Un'alternativa moderna molto diffusa per il primo pattern è una tabella di lookup con un oggetto:

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

Tre righe invece di uno switch di nove. Quando i case sono semplici corrispondenze di dati senza vera logica, un oggetto (o una Map) di solito si legge meglio. Usa switch quando ogni case fa un vero lavoro.

Prossimo passo: i cicli for

switch gestisce una decisione tra molte opzioni. Il prossimo elemento del controllo del flusso è la ripetizione: eseguire lo stesso blocco di codice più e più volte. È a questo che servono i cicli for, l'argomento della prossima pagina.