JavaScript if, else if, else: costrutti condizionali in Javascript

I costrutti condizionali vengono usati per eseguire azioni differenti a seconda di determinate condizioni. Tutto questo permette ai nostri programmi di prendere decisioni e di cambiare il suo flusso a seconda di quello che accade. Il costrutto JavaScript if ci aiuta proprio in questo, vediamo come.

Elaborare costrutti condizionali, come accennato, permette di inserire punti di snodo nella logica di un programma in modo che, in base a determinate condizioni, il flusso di esecuzione possa essere convogliato verso un blocco di codice piuttosto che in un altro.

La parola chiave regina di questo meccanismo è if in qualsiasi linguaggio ed in questo post la vediamo applicata in JavaScript.

La parola chiave if si trova spesso accompagnata da else if e else:

• if è corredata con una condizione e seguita da un blocco di codice. Se la condizione risulta vera il blocco di codice viene eseguito una sola volta;
• else if è usato a cascata di un if ed è seguito da un’altra condizione booleana e da un altro blocco di codice. Se la condizione dell’if a cui l’else if è collegato risulta falsa allora viene verificata quella dell’else if che, se vera, porterà all’esecuzione del blocco di codice al suo interno;
• else si trova alla fine di un blocco if – else if e offre un’alternativa da attuare nel caso in cui tutte le condizioni dei vari if ed else if collegati siano risultate false.

Proviamo a descrivere a parole un tipico blocco if, else if, else:

Se (questa condizione è vera):
   //esegui questo codice;

Altrimenti Se (questa seconda condizione è vera):
   //esegui questo nuovo blocco di codice al posto del precedente

Altrimenti (se nessuna delle condizioni di cui sopra è vera):
   //esegui questo blocco codice senza considerare i precedenti;

Come vedete più facile a farsi, che a dirsi.

La struttura dell’if in JavaScript è la seguente:

if (condizione){
   // blocco di codice da eseguire se la condizione è vera
}

vediamo un piccolo esempio, vogliamo mostrare un alert che informa l’utente che può iscriversi a scuola guida per prendere la patente dell’auto solo se è maggiorenne:

if (eta >= 18){
   alert("Sei maggiorenne! Puoi iscriverti a scuola guida!");
}

Se si vuole porre un’alternativa al blocco di codice qualora la condizione fosse falsa si potrebbe agganciare semplicemente un else (quindi quando non è necessario verificare ulteriori condizioni):

if (condizione){
   // blocco di codice da eseguire se la condizione è vera
}
else{
   // blocco di codice da eseguire se la condizione è falsa
}

Riprendendo l’esempio precedente potremmo mostrare un altro alert nel caso l’età dell’utente fosse inferiore ai 18 anni:

if (eta >= 18){
   alert("Sei maggiorenne! Puoi iscriverti a scuola guida!");
} else {
   alert("Sei troppo piccolo, non puoi ancora guidare!");
}

Tra l’if e l’else potremmo porre però delle alternative con uno o più else if in questo modo:

if (condizione1){
   // blocco di codice da eseguire se condizione1 è vera
}
else if (condizione2 da valutare solo se condizione1 è falsa){
   // blocco di codice da eseguire se condizione2 è vera
}
else{
   // blocco di codice da eseguire se sia condizione1 sia condizione2 sono false
}

Tornando al nostro esempio, se l’utente non è maggiorenne potremmo verificare se ha almeno 16 anni, in tal caso potremmo ricordargli che può guidare il motorino:

if (eta >= 18){
   alert("Sei maggiorenne! Puoi iscriverti a scuola guida!");
} else if (eta >= 16)  {
   alert("Non puoi guidare la macchina, ma puoi guidare il motorino!");
} else {
   alert("Sei troppo piccolo, non puoi ancora guidare!");
}

Come vedi è molto semplice da usare.

Un blocco if/else if potrebbe anche non disporre di un else, anche se sarebbe sempre meglio prevederne uno.

Se infine nel tuo codice prevedi l’uso di diversi else if, potresti pensare di utilizzare al suo posto il costrutto switch.