Introduzione
Nella programmazione, ci saranno molte occasioni in cui vorrete eseguire diversi blocchi di codice a seconda dell'input dell'utente o di altri fattori.
Ad esempio, potresti voler inviare un modulo se ogni campo è compilato correttamente, ma potresti voler impedire l'invio di quel modulo se mancano alcuni campi obbligatori. Al fine di svolgere compiti come questi abbiamo dichiarazioni condizionali (conditional statements), che sono parte integrante di tutti i linguaggi di programmazione.
Le dichiarazioni condizionali eseguono un'azione specifica basata sui risultati di un risultato di true o false .
Alcuni esempi di istruzioni condizionali JavaScript che potresti vedere includono:
- Controlla la posizione di un utente e visualizza la lingua corretta in base al paese
- Includi un modulo al momento dell'invio o visualizza avvisi accanto ai campi obbligatori mancanti
- Apri un menu a discesa su un evento clic o chiudi un menu a discesa se è già aperto
- Visualizza il sito Web di un fornitore di alcolici se l'utente ha superato l'età legale per bere
- Visualizza il modulo di prenotazione per un hotel ma non se l'hotel è prenotato
Le dichiarazioni condizionali fanno parte della logica, del processo decisionale o del controllo del flusso di un programma per computer.
In questo tutorial, andremo oltre istruzioni condizionali, compresi if, else e le parole chiave else if. Tratteremo anche l'operatore ternario.
Dichiarazione If
La più fondamentale delle dichiarazioni condizionali è la dichiarazione if. Un'istruzione if valuterà se un'istruzione è vera o falsa e verrà eseguita solo se l'istruzione ritorna true. Il blocco di codice verrà ignorato nel caso di un risultato false e il programma passerà alla sezione successiva.
Un'istruzione if viene scritta con la parola chiave if, seguita da una condizione tra parentesi, con il codice da eseguire tra parentesi graffe. In breve, può essere scritto come if () {}.
Ecco un esame più lungo della dichiarazione di base if.
if (condition) {
// code that will execute if condition is true
}Il contenuto di un'istruzione if è compreso tra le parentesi graffe che contengono il blocco di codice da eseguire e non finiscono con un punto e virgola, proprio come un blocco funzione.
Ad esempio, consideriamo un'app per lo shopping. Supponiamo che, per la funzionalità di questa app, un utente che ha depositato una determinata quantità di fondi nel proprio account desideri acquistare un articolo dal negozio.
// Set balance and price of item
const balance = 500;
const jeans = 40;
// Check if there are enough funds to purchase item
if (jeans <= balance) {
console.log("You have enough money to purchase the item!");
}You have enough money to purchase the item!
Abbiamo un saldo del conto 500 e vogliamo comprare un paio di jeans per 40. Utilizzando l'operatore minore o uguale, possiamo verificare se il prezzo dei jeans è inferiore o uguale alla quantità di fondi che abbiamo. Poiché jeans <= balance viene valutato true, la condizione passerà e verrà eseguito il blocco di codice.
In un nuovo esempio, creeremo un nuovo articolo del negozio che costa più del saldo disponibile.
// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
}Questo esempio non avrà output, poiché phone <= balance è valutato false. Il blocco di codice verrà semplicemente ignorato e il programma procederà alla riga successiva.
Dichiarazione Else
Con le istruzioni if, eseguiamo il codice solo quando viene valutata un'istruzione true, ma spesso desideriamo che accada qualcos'altro se la condizione fallisce.
Ad esempio, potremmo voler visualizzare un messaggio che indica all'utente quali campi sono stati compilati correttamente se un modulo non è stato inviato correttamente. In questo caso, utilizzeremo l'istruzione else, che è il codice che verrà eseguito se la condizione originale non ha esito positivo.
La dichiarazione else è scritta dopo la dichiarazione if e non ha condizioni tra parentesi. Ecco la sintassi per un'istruzione if...else di base .
if (condition) {
// code that will execute if condition is true
} else {
// code that will execute if condition is false
}Utilizzando lo stesso esempio di cui sopra, possiamo aggiungere un messaggio per visualizzare se i fondi nel conto sono troppo bassi.
// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
} else {
console.log("You do not have enough money in your account to purchase this item.");
}You do not have enough money in your account to purchase this item.
Poiché la condizione if non è riuscita, verrà eseguito solamente il codice all'interno dell'istruzione else.
Questo può essere molto utile per mostrare avvisi o per far sapere all'utente quali azioni intraprendere per andare avanti. Di solito sarà necessaria un'azione sia per il successo che per il fallimento, quindi if...else è più comune di una sola istruzione if isolata.
Dichiarazione Else if
Con if e else, possiamo eseguire blocchi di codice a seconda che una condizione sia true o false. Tuttavia, a volte potremmo avere più possibili condizioni e risultati e abbiamo bisogno di più di due semplici opzioni. Un modo per farlo è con l'affermazione else if, che può valutare più di due possibili esiti.
Ecco un esempio di base di un blocco di codice che contiene un'istruzione if, più istruzioni else if e un'istruzione else nel caso in cui nessuna delle condizioni venga valutata true.
if (condition a) {
// code that will execute if condition a is true
} else if (condition b) {
// code that will execute if condition b is true
} else if (condition c) {
// code that will execute if condition c is true
} else {
// code that will execute if all above conditions are false
}JavaScript tenterà di eseguire tutte le istruzioni in ordine e, se nessuna di esse ha esito positivo, verrà impostato automaticamente sul blocco else.
Puoi avere tutte le dichiarazioni else if necessarie. Nel caso di molte dichiarazioni else if, la dichiarazione switch potrebbe essere preferita per la leggibilità.
Come esempio di più dichiarazioni else if, possiamo creare un'app di valutazione che produrrà un voto in lettere basato su un punteggio su 100.
I requisiti di questa app sono i seguenti:
- Il grado 90 e superiore è un A
- Il grado da 80 a 89 è un B.
- Il grado da 70 a 79 è un C
- Il grado da 60 a 69 è una D
- Il grado di 59 o inferiore è una F
Qui di seguito creeremo un semplice insieme di dichiarazioni if, else e else if, e testeremo i gradi con un valore dato.
// Set the current grade of the student
let grade = 87;
// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
console.log("A");
} else if (grade >= 80) {
console.log("B");
} else if (grade >= 70) {
console.log("C");
} else if (grade >= 60) {
console.log("D");
} else {
console.log("F");
}B
Nel nostro esempio, controlliamo prima il punteggio più alto, che sarà maggiore o uguale a 90. Dopo di che, la dichiarazione else if si verifica per più di 80, 70 e 60 fino a raggiungere il valore di default else.
Anche se il nostro valore grade di 87 è tecnicamente vero anche per C, D e F, le dichiarazioni si fermeranno al primo che ha successo. Pertanto, otteniamo un output di B, che è la prima corrispondenza.
Operatore ternario
L'operatore ternario (ternary operator), noto anche come operatore condizionale, viene utilizzato come scorciatoia per un'istruzione if...else.
Un operatore ternario è scritto con la sintassi di un punto interrogativo (?) seguito da due punti (:), come dimostrato di seguito.
(condition) ? expression on true : expression on falseNell'istruzione precedente, la condizione viene scritta per prima, seguita da a ?. La prima espressione verrà eseguita su true e la seconda espressione verrà eseguita su false. È molto simile a un'istruzione if...else, con una sintassi più compatta.
In questo esempio, creeremo un programma che controlla se un utente è 21 o meno. In tal caso, verrà stampato "You may enter" sulla console. In caso contrario, verrà stampato "You may not enter." sulla console.
// Set age of user
let age = 20;
// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";
// Print output
oldEnough;'You may not enter.'
Poiché age dell'utente era inferiore a 21, il messaggio di errore viene inviato alla console. L'equivalente if...else a questo sarebbe "You may enter." nella dichiarazione if e "You may not enter." nella dichiarazione else.
Conclusione
Le istruzioni condizionali ci forniscono il controllo del flusso per determinare l'output dei nostri programmi. Sono uno dei mattoni fondamentali della programmazione e possono essere trovati praticamente in tutti i linguaggi di programmazione.
In questo articolo, abbiamo appreso come utilizzare parole chiave if, else e else if, l'annidamento di istruzioni e l'uso dell'operatore ternario.
