Switch in JavaScript

L'istruzione switch valuta un'espressione confrontandola con le varie clausole case ed esegue le istruzioni associate a quello corrispondente.

Più specificamente switch come prima cosa valuta l'espressione, in seguito la mette a confronto stretto (===) con i vari case e appena ne trova uno che corrisponde all'espressione passa il controllo a ciò che è presente nel case, eseguendo le relative istruzioni.

Se non ci fossero case corrispondenti all'espressione il programma cercherebbe la clausola default, se presente trasferirà a lei il controllo e verranno eseguite le istruzioni ad essa associate. Se non dovesse esserci una clausola di default il programma andrebbe avanti normalmente.

Infine, abbiamo la possibilità di specifica l'interruzione dello switch con l'uso dell'istruzione break. In questo modo quando viene eseguito una clausola case ci assicuriamo che successivamente all'esecuzione delle istruzioni associate non continui con gli altri case, ma che si interrompa ed "esca" dallo switch. Se omesso il programma andrebbe avanti con gli altri case, quindi attenzione a quando e dove metterlo.

Personalmente considero switch un modo più elegante per scrivere una serie di if/else if/else. Prendiamo in esame il seguente codice:

1const espressione = "Noci";
2if (espressione === "Noci") {
3  console.log("Le noci costano € 4.99");
4} else if (espressione === "Arachidi") {
5  console.log("Le arachidi costano € 3.99");
6} else if (espressione === "Nocciole" || espressione === "Anacardi") {
7  console.log("Nocciole ed anacardi costano € 5.99");
8} else {
9  console.log("Spiacente, non abbiamo quel tipo di frutta secca.");
10}

Se hai già letto il mio articolo precedente questo non dovrebbe suonarti nuovo. In base al valore della costante espressione verrà visualizzato in console un messaggio diverso (in questo caso specifico "Le noci costano € 4.99").

Con switch possiamo scrivere la stessa cosa, in questo modo:

1const espressione = "Noci";
2switch(espressione) {
3  case "Noci":
4    console.log("Le noci costano € 4.99");
5    break;
6  case "Arachidi":
7    console.log("Le arachidi costano € 3.99");
8    break;
9  case "Nocciole":
10  case "Anacardi":
11    console.log("Nocciole ed anacardi costano € 5.99");
12    break;
13  default:
14    console.log("Spiacente, non abbiamo quel tipo di frutta secca.");
15}

La sintassi

• Tra le parentesi tonde di switch ci va l'espressione che verrà confrontata con i vari case.
• case valueN è il "caso" con la quale l'espressione viene confrontata. Se l'espressione corrisponde al valore di case, verrà quindi eseguito ciò che è stato scritto nella clausola case corrispondente fino a quando non verrà trovato un break.
• default è il case che viene eseguito qualora non ci fosse corrispondenza con nessun'altro case. Un po' come else nell'if.

Esempi d'utilizzo

Nell'esempio precedente abbiamo visto il funzionamento di base di uno switch, ma vediamo qualche caso d'utilizzo extra giusto per chiarire al 100% il suo funzionamento.

Cosa succede se dimentichi un break?

1const espressione = "Noci";
2switch(espressione) {
3  case "Noci":
4    console.log("Le noci costano € 4.99");
5    // Qui ho omesso il break
6  case "Arachidi":
7    console.log("Le arachidi costano € 3.99");
8    break;
9  case "Nocciole":
10  case "Anacardi":
11    console.log("Nocciole ed anacardi costano € 5.99");
12    break;
13  default:
14    console.log("Spiacente, non abbiamo quel tipo di frutta secca.");
15}

Nel case "Noci" ho scordato di inserire break, cosa accadrà? Le istruzioni presenti nel case "Arachidi" verranno eseguite anche senza l'uguaglianza della clausola con l'espressione.

Case multipli, operazione singola

Nell'esempio della frutta secca è già presente questo tipo di case.

1// Codice omesso
2case "Nocciole":
3case "Anacardi":
4  console.log("Nocciole ed anacardi costano € 5.99");
5  break;
6// Codice omesso

Questo caso è molto simile al precedente e di fatto sfrutta la stessa logica e cioè l'omissione del break. Nel caso l'espressione fosse "Nocciole" verrebbe fornito il controllo alla clausola case "Nocciole" la quale è sprovvista di break e quindi continuerà a scendere fino a quando non troverà un'istruzione da eseguire e un break che ne fermi l'esecuzione.

Lo scope delle variabili in uno switch

Questa cosa frega anche me ogni tanto. Uno logicamente penserebbe di dichiarare delle variabili all'interno dei singolo case, ma la cosa è più complessa del previsto. Prendiamo come esempio questo snippet di codice:

1const azione = "cucina";
2switch(azione) {
3  case "cucina":
4    let messaggio = "Cucina in corso...";
5    console.log(messaggio);
6    break;
7  case "lava":
8    let messaggio = "Lavaggio in corso...";
9    console.log(messaggio);
10    break;
11  default:
12    console.log("Azione non programmata");
13}

Il risultato di quanto scritto è un bell'errore. Nello specifico Uncaught SyntaxError: Identifier 'messaggio' has already been declared.

Il primo let messaggio = "Cucina in corso..." va in conflitto con il secondo let messaggio = "Lavaggio in corso..." anche se fanno parte di case differenti. Inoltre, usando entrambi usano let e quindi fanno parte dello stesso scope di blocco.

Per risolvere possiamo usare le parentesi graffe all'inizio e alla fine del case.

1const azione = "cucina";
2switch(azione) {
3  case "cucina": {
4    let messaggio = "Cucina in corso...";
5    console.log(messaggio);
6    break;
7  }
8  case "lava": {
9    let messaggio = "Lavaggio in corso...";
10    console.log(messaggio);
11    break;
12  }
13  default: {
14    console.log("Azione non programmata");
15  }
16}

Ora tutto funzionerà perfettamente.