L’istruzione JavaScript Switch è un’istruzione del flusso di controllo condizionale. È incredibilmente utile per creare blocchi condizionali con molte clausole.
Questo articolo è un tutorial sull’istruzione switch e su come utilizzarla. Lo confronteremo anche con altri costrutti condizionali, istruzioni if e operatori ternari in modo che tu possa sapere quando utilizzarli.
Sommario:
Qual è l’istruzione Switch in JavaScript?
L’istruzione Switch JavaScript viene utilizzata per decidere quale ramo di codice eseguire in base al valore di un’espressione. È una delle due istruzioni condizionali in JavaScript.
Il primo è l’istruzione if e il secondo è l’operatore ternario. Funziona in modo molto simile ai due ma ha sfumature diverse, che lo rendono ideale per alcuni casi. In questo articolo esploreremo tutto questo.
Come utilizzare l’istruzione Switch JavaScript
In questa parte dell’articolo, spiegherò la dichiarazione Switch JavaScript e come utilizzarla. Utilizzerò esempi di codice, quindi avrai bisogno di un compilatore JavaScript da seguire. Il più semplice da usare è questo compilatore JavaScript online. In alternativa, puoi consultare il nostro articolo sui migliori IDE JavaScript online.
Sintassi generale
La sintassi generale per un’istruzione switch è la seguente:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
La parola chiave switch segna l’inizio di un blocco switch JavaScript. All’interno delle parentesi, inserisci qualsiasi espressione JavaScript. Un’espressione è tutto ciò che restituisce un valore. Ad esempio, valori letterali come stringhe o numeri, variabili o chiamate di funzioni.
Successivamente, aggiungiamo il corpo dell’istruzione switch tra parentesi graffe. Il corpo è composto da diversi casi. Ogni caso ha un valore e un gruppo di affermazioni. Se l’espressione tra parentesi equivale al valore di un caso, vengono eseguite le istruzioni di quel caso.
Per ogni caso, possiamo aggiungere la parola chiave break. L’aggiunta di questa parola è del tutto facoltativa. Se lo aggiungi, JavaScript esce dal blocco switch quando lo incontra. Se non è presente, JavaScript continuerà a essere eseguito in tutti i casi successivi. Questo è noto come caduta. A meno che tu non voglia sfruttare il fall through, ti consigliamo di aggiungere la parola chiave break.
L’ultima parola chiave da prendere in considerazione è la parola chiave predefinita. Questo caso corrisponde a qualsiasi valore dell’espressione tra parentesi.
Esempi
Questa sezione mostrerà diversi esempi di utilizzo dell’istruzione switch.
#1. Con Fallthrough
Ecco un esempio di utilizzo dell’istruzione switch senza la parola chiave break. Lo scopo di questo è dimostrare il fallimento.
In questo esempio, stiamo scrivendo codice per gestire diversi codici di stato HTTP:
const statusCode = <insert status code here>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirect');
case 403:
console.log('Forbidden');
case 404:
console.log('Not Found');
case 500:
console.log('Internal Server Error')
}
Nello snippet di codice sopra, controlliamo se un valore equivale a un particolare codice di stato, quindi stampiamo un messaggio che descrive il codice di stato.
Osserva cosa succede quando imposti il codice di stato su 403.
Dopo aver abbinato i 403 casi, sono stati abbinati anche tutti i casi successivi. Questo si chiama fallimento. Questo non è l’ideale, poiché spesso preferiamo abbinare un caso. Questa strana stranezza di JavaScript è il motivo per cui è necessario aggiungere la parola chiave break.
#2. Senza Fallthrough
Per evitare fallthrough, aggiungiamo la parola chiave break alla fine di ogni caso. L’esempio seguente dimostra cosa succede quando lo fai.
const statusCode = <insert a status code here>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirect');
break;
case 403:
console.log('Forbidden');
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Internal Server Error')
break;
}
E quando esegui il codice sopra con il codice di stato 403, ottieni questo.
Come puoi vedere, il codice ora corrisponde a un solo caso ed evita il fallthrough.
#3. Fallthrough utile
Detto questo, è importante notare che il fallthrough può essere utile in alcuni casi. Considera il seguente esempio in cui vogliamo verificare se una persona si sta muovendo orizzontalmente o verticalmente in base all’input direzionale.
const direction = '<enter direction here>'
switch(direction) {
case 'left':
case 'right':
console.log('horizontal movement');
break;
case 'up':
case 'down':
console.log('horizontal movement');
break;
}
Se imposti la direzione a sinistra ed esegui il codice sopra, questo è il risultato:
E quando imposti la direzione a destra, ottieni comunque lo stesso risultato:
Questo perché quando il caso sinistro corrisponde, passa al caso destro e stampa il “movimento orizzontale”. Ma poiché esiste una parola chiave break, non rientra nel caso up. Quando il caso giusto corrisponde, esegue le istruzioni nel caso giusto e si interrompe.
Pertanto, viene visualizzato il “movimento orizzontale” quando la direzione è sinistra o destra. Pertanto, fallthrough ti consente di creare la logica OR nel tuo codice.
#4. Intervalli di corrispondenza
L’istruzione switch JavaScript controlla se il valore di un case è uguale al valore dell’espressione. In tal caso, esegue le istruzioni in quel caso. Tuttavia, a volte potresti voler verificare se un valore rientra in un determinato intervallo. Gli intervalli di corrispondenza possono essere complicati, ma lo snippet di codice riportato di seguito mostra una soluzione alternativa.
Nell’esempio seguente stiamo implementando un programma che, dato un voto, stampa il voto. Ad esempio, se il segno è superiore a 90, il programma stamperà A+. Se è superiore a 80 ma inferiore a 90, verrà stampato A e così via.
Per fare ciò, ho messo l’espressione vero tra parentesi. Quindi, il valore di ciascun caso è stato definito come un’operazione logica che sarà vera solo se il segno rientra nell’intervallo per quel caso. Ad esempio, il segno dell’ultimo caso >= 90 sarà vero solo se il segno è maggiore o uguale a 90. Pertanto, corrisponderà al valore dell’espressione poiché vero è uguale a vero.
const mark = <replace with any mark>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
L’output del codice sopra quando il segno è impostato su 80 è:
E quando il segno è impostato su 95:
E quando il voto sarà 45:
Scoping lessicale
Le istruzioni all’interno di un case in uno switch non hanno ambito lessicale. Ciò significa che le variabili definite in un caso saranno accessibili in un caso diverso. Questo è importante da sapere mentre scrivi blocchi di opzioni in cui verrà abbinata più di una casella. Ecco un esempio per spiegarlo meglio:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
Nello snippet di codice riportato sopra, entrambi i casi corrispondono. Nel primo caso definiamo la variabile num; nella seconda accediamo al suo valore. Non riceveremo alcun errore, come puoi vedere dallo screenshot qui sotto:
Differenza tra un’istruzione Switch e altri condizionali
Un’istruzione Switch è più adatta agli scenari in cui si verificano più condizioni. Un’istruzione if è adatta alle condizioni in cui stai testando 2 o 3 condizioni. Un operatore ternario è utile solo per le condizioni in cui si desidera esprimere un condizionale come una riga.
Per brevità, dovresti scegliere di scrivere prima gli operatori ternari. Se è impossibile esprimere la logica in un operatore ternario, è possibile utilizzare un’istruzione if. Ma se ciò non è possibile, opti per l’istruzione switch.
Conclusione
Questo articolo ha trattato l’istruzione switch, come usarla e le sue stranezze. Abbiamo anche spiegato quando usarlo.
Successivamente, potresti voler perfezionare JavaScript utilizzando questi cheat sheet JavaScript.