Istruzione switch in JavaScript

Introduzione all'istruzione switch

In JavaScript, l'istruzione switch esegue uno di diversi blocchi di codice in base al valore di una singola espressione. Quando ti ritrovi a scrivere una lunga catena di istruzioni if / else if che confrontano tutte la stessa variabile con valori diversi, uno switch è solitamente un modo più pulito e leggibile per esprimere la stessa logica.

Questo capitolo tratta la sintassi completa, il funzionamento di case, break e default insieme, il fall-through intenzionale vs. accidentale, il confronto strict (===) usato dallo switch, come creare uno scope per le variabili all'interno di un case, e quando switch è — e non è — la scelta giusta.

Come funziona switch

Uno switch valuta la sua espressione una sola volta, poi confronta il risultato con ogni valore case dall'alto verso il basso usando il confronto strict (===). Il primo case corrispondente diventa il punto di ingresso: l'esecuzione inizia lì e continua attraverso le istruzioni successive fino a quando non incontra un break, un return, o la fine dello switch. Se nessun case corrisponde, viene eseguito il blocco opzionale default.

Sintassi e struttura dell'istruzione switch

La struttura di base di un'istruzione switch è la seguente:

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Alcune regole da ricordare:

• L'espressione viene valutata una sola volta, all'inizio.
• Le etichette case devono essere seguite da due punti (:), non da una parentesi graffa.
• break termina lo switch; senza di esso, l'esecuzione cade in avanti al case successivo (vedi Fall-Through di seguito).
• default è opzionale e non deve necessariamente essere l'ultimo, anche se posizionarlo alla fine è la convenzione.

Esempio di switch di base

Fall-Through: Raggruppamento vs. Accidentale

Quando un case non ha break, l'esecuzione "cade in avanti" nel case successivo. Questo è un singolo meccanismo con due esiti molto diversi — uno utile, uno un classico bug.

Raggruppamento intenzionale (fall-through corretto)

Impilando etichette case vuote, puoi eseguire lo stesso codice per più valori. Questo è il modo idiomatico per gestire "qualsiasi di questi input deve fare la stessa cosa."

Poiché 'apple' corrisponde alla prima etichetta e quella etichetta non ha corpo, l'esecuzione fluisce nel console.log('Red fruit') condiviso e poi si ferma al break.

Fall-Through accidentale (il bug)

Se dimentichi un break, ogni case dopo la corrispondenza viene eseguito fino al prossimo break o alla fine dello switch. Qui fruit è 'apple', eppure vengono stampate tutte e quattro le righe:

Aggiungere break; dopo ogni console.log limiterebbe l'output solo a Apple is red.. La regola generale: termina ogni case con break (o return) a meno che tu non stia deliberatamente raggruppando i case.

Scope dei blocchi all'interno di un case

Tutte le clausole case condividono un unico scope di blocco — il corpo dello switch. Ciò significa che una let o const dichiarata in un case è visibile agli altri e può causare un errore "Cannot access before initialization". Racchiudi il corpo di un case tra parentesi graffe proprie { ... } per dargli uno scope privato:

Senza le parentesi graffe, dichiarare const result in entrambi i case genererebbe un errore di sintassi a causa della dichiarazione duplicata nello scope condiviso.

Confronto strict (===) in switch

Lo switch di JavaScript confronta l'espressione con ogni valore case usando l'uguaglianza strict (===) — non avviene alcuna coercizione di tipo. Quindi il tipo deve corrispondere, non solo il valore. Per ulteriori informazioni su come === differisce da ==, vedi Operatori di confronto.

In questo esempio, la string '0' non corrisponde al numero 0, quindi viene eseguito il default:

Se hai bisogno di eseguire la corrispondenza indipendentemente dal tipo, converti prima l'espressione, ad es. switch (Number(x)).

switch vs. if/else

Entrambi possono esprimere la stessa logica di branching, quindi scegli in base alla forma della condizione:

• Preferisci switch quando confronti un valore con molte opzioni discrete e costanti (un codice di stato, un nome di comando, una scelta di menu). Si legge in modo chiaro e l'intento è ovvio.
• Preferisci if / else if quando le condizioni sono intervalli o espressioni boolean (age >= 18, score > 90 && passed), coinvolgono variabili diverse, o richiedono la flessibilità che il === strict non può fornire.
• Per mappare una chiave a un singolo valore, una semplice ricerca in un object (const labels = { add: 'Addition' }) è spesso più breve di entrambi. Vedi Operatori logici per combinare condizioni nello stile if.

Conclusione

L'istruzione switch in JavaScript è uno strumento versatile per gestire condizioni multiple. Comprendere il suo corretto utilizzo e le sue sfumature può migliorare notevolmente la leggibilità e l'efficienza del tuo codice.

Esercitazione