Articolo originale: JavaScript If-Else and If-Then – JS Conditional Statements

Ci saranno occasioni in cui avrai bisogno di scrivere comandi che gestiscono decisioni diverse nel tuo codice.

Per esempio, se stai creando un bot, puoi fare in modo che risponda con messaggi differenti in base ai comandi che può ricevere.

In questo articolo spiegherò cos'è un'istruzione if...else con esempi di codice. Ci occuperemo anche dell'operatore condizionale ternario, che può essere utilizzato come abbreviazione delle istruzioni if...else.

Cos'è un'istruzione if...else in JavaScript?

L'if...else è un tipo di istruzione condizionale (conditional statement), che esegue un blocco di codice quando la condizione contenuta nell'istruzione if è truthy (vera). Se la condizione è falsy (falsa), allora sarà il blocco else ad essere eseguito.

I valori truthy e falsy vengono convertiti in true (vero) o false (falso) nelle istruzioni if. 

if (condizione) {
   // codice eseguito se la condizione è vera
} else {
   // codice eseguito se la condizione è falsa
}

Qualunque valore che non è definito falsy, verrà considerato truthy in JavaScript.

Ecco una lista di valori falsy :

  • false
  • 0 (zero)
  • -0 (zero negativo)
  • 0n (BigInt zero)
  • "", '', `` (stringa vuota)
  • null
  • undefined
  • NaN (not a number)

Esempi di istruzioni if...else in JavaScript

In questo esempio, la condizione nell'istruzione if  è true, quindi il messaggio che verrà mostrato nella console sarà "Nick is an adult".

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}
Image

Ma se cambio la variabile age in modo che sia minore di 18, allora la condizione diventerà false, quindi il codice questa volta eseguirà il blocco else.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}
Image

Esempi con varie condizioni (istruzioni if...else if...else) in JavaScript

A volte potresti voler testare varie condizioni, e in questi casi entra in gioco il blocco else if.

if (condizione 1) {
   // codice eseguito quando condizione 1 è true
} else if (condizione 2) {
  // codice eseguito quando condizione 2 è true
} else {
   // codice eseguito quando nessuna delle condizioni precedenti è true
}

Quando la condizione dell'if è false, il computer valuta la condizione dell'else if.  Se anche questa risulta false, allora passa al blocco else.

In questo esempio, il blocco else if sarà quello che verrà eseguito, dato che Alice ha un'età compresa tra 18 e 21 anni. 

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}
Image

Quando utilizzare le istruzioni switch invece che le istruzionii if...else?

Ci sono occasioni in JavaScript in cui potresti considerare di utilizzare un'istruzione switch, invece di un'istruzione if else.

Le istruzioni switch  hanno una sintassi più pulita, a differenza delle complicate istruzioni if else.

Dai un'occhiata a questo esempio in basso – invece di utilizzare questa lunga istruzione if else, potresti scegliere di servirti di un'istruzione switch , che è molto più semplice da leggere. 

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";

switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

Le istruzioni switch non sono sempre la scelta più appropriata in tutte le situazioni, ma se pensi delle istruzioni if else siano troppo lunghe e complicate, allora un'istruzione switch potrebbe essere un'opzione alternativa.

L'operatore logico AND (&&) e le istruzioni if...else in JavaScript

Con l'operatore logico AND (&&), se entrambe le condizioni sono true, allora verrà eseguito il  blocco if. Se una o entrambe le condizioni sono false, allora sarà eseguito il blocco else.

In questo esempio, dato che l'età è maggiore di 16 e la variabile ownsCar è true, verrà eseguito il blocco if. Il messaggio mostrato dalla console sarà "Jerry is old enough to drive and has his own car."  

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}
Image

Cambiando la variabile age in modo che sia minore di 16, entrambe le condizioni non sono più true e quindi verrà eseguito il blocco else. 

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}
Image

L'operatore logico OR (||) e le istruzioni if...else in JavaScript

Nel caso dell'operatore logico OR (||), se una o entrambe le condizioni sono true, allora il codice nell'istruzione if sarà eseguito.

In questo esempio, anche se la variabile isSale è false, il codice nel blocco if verrà eseguito lo stesso, perché almeno la variabile boyfriendIsPaying è true. 

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Image

Se cambiassi il valore della variabile boyfriendIsPaying in false, allora il blocco  else verrebbe eseguito, perché entrambe le condizioni sarebbero false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Image

L'operatore logico NOT (!) e le istruzioni if...else in JavaScript

L'operatore logico NOT (!) cambia il valore di qualcosa da true a false, ma può anche fare il contrario, trasformandolo da false a true.

Possiamo modificare l'esempio precedente utilizzando l'operatore !, per rendere false la variabile boyfriendIsPaying. Dato che entrambe le condizioni adesso sono false, il blocco else verrà eseguito. 

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}
Image

L'operatore condizionale (ternario) in JavaScript

Se stai utilizzando un'istruzione if else breve, potresti scegliere di servirti dell'operatore ternario.

Questa è la sintassi di base dell'operatore ternario: 

condizione ? se condizione è true : se condizione è false

La condizione è posizionata prima del simbolo ? e se è true, allora il codice tra il simbolo ? ed il simbolo : verrà eseguito. Se la condizione è false, allora sarà il codice dopo il simbolo : ad essere eseguito.

In questo esempio, dato che l'età è maggiore di 18, il messaggio mostrato dalla console sarà "Can vote".

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);
Image

Questo è invece lo stesso codice, ma scritto usando un'istruzione if else:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

In conclusione

Le istruzioni if else eseguono un blocco di codice se la condizione nell'istruzione if è truthy. Se la condizione è falsy, allora sarà il blocco else ad essere eseguito.

Ci saranno occasioni in cui vorrai testare varie condizioni, e in questi casi potrai utilizzare le istruzioni if...else if...else.

Se pensi che un'istruzione if else sia lunga e complicata, allora c'è la possibilità di utilizzare un'istruzione switch come alternativa.

Utilizzare gli operatori logici per testare più di una condizione, può essere un'alternativa alle istruzioni if else annidate l'una nell'altra.

L'operatore ternario può essere utilizzato come metodo per scrivere un'istruzione if else in modo più sintetico.