Operatori condizionali in Javascript

Introduzione agli operatori condizionali

Gli operatori condizionali (detti anche istruzioni condizionali) in JavaScript sono il modo in cui un programma prende decisioni. Invece di eseguire ogni riga dall'alto verso il basso, permettono al codice di scegliere quale blocco eseguire in base al fatto che una condizione sia true o false.

Questo capitolo tratta l'intero set di strumenti che utilizzi ogni giorno:

• le istruzioni if, else if ed else,
• l'operatore ternario ? : (e quando non annidarlo),
• come i valori truthy e falsy influenzano le condizioni,
• la valutazione a cortocircuito con && e ||,
• l'operatore di coalescenza null ?? per i valori predefiniti.

Una condizione è qualsiasi espressione che JavaScript può valutare come boolean. Di solito è costruita con gli operatori di confronto (>, <, ===, …) e combinata con gli operatori logici (&&, ||, !).

L'istruzione if

L'istruzione if è il condizionale più fondamentale, utilizzata per eseguire un blocco di codice solo quando una condizione specificata è vera.

Sintassi

if (condition) {
  // code to execute if condition is true
}

Esempio

L'istruzione else

L'istruzione else completa if, eseguendo il proprio blocco quando la condizione di if è falsa.

Sintassi

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Esempio

L'istruzione else if

else if consente di testare più condizioni in sequenza. JavaScript le controlla una per una dall'alto verso il basso ed esegue il primo ramo la cui condizione è vera — gli altri vengono saltati, anche se sarebbero anch'essi veri. L'ordine è importante: metti prima le condizioni più specifiche o con priorità più alta.

Sintassi

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Esempio

Quando stai confrontando un unico valore con molte opzioni fisse, una catena di else if può diventare ripetitiva. L'istruzione switch è spesso una soluzione più pulita per questo caso.

L'operatore condizionale (ternario) ?

L'operatore ternario (? :) è una forma compatta equivalente a if...else. È l'unico operatore JavaScript che accetta tre operandi e, a differenza di un'istruzione, restituisce un valore — il che lo rende ideale per assegnare un risultato in base a una condizione.

Sintassi

let result = condition ? value1 : value2;

Se condition è vera, l'espressione restituisce value1; altrimenti restituisce value2.

Esempio

Poiché produce un valore, il ternario è utile anche direttamente all'interno di template string e argomenti di funzione:

Ternari annidati e concatenati

Un ternario può a sua volta restituire un altro ternario, il che simula una catena else if:

Questo funziona, ma la leggibilità cala rapidamente. Evita di annidare i ternari quando la logica non è banale — una catena profonda come a ? b : c ? d : e è difficile da leggere e facile da sbagliare. Preferisci if...else if (o switch) quando hai più di una condizione, e riserva il ternario per semplici scelte binarie.

Valori truthy e falsy

La condizione in un if o in un ternario non deve essere necessariamente un boolean. JavaScript converte qualsiasi valore che gli passi in true o false. I valori che vengono convertiti in false sono detti falsy; tutto il resto è truthy.

Esistono esattamente otto valori falsy:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Tutto il resto — inclusi "0", "false", [] (array vuoto) e {} (object vuoto) — è truthy.

Ecco perché un'abbreviazione comune come if (name) { ... } verifica se name ha un valore utilizzabile, anziché scrivere name === "" o name === undefined.

Valutazione a cortocircuito

Gli operatori logici && e || non restituiscono sempre un boolean — restituiscono uno dei loro operandi, e smettono di valutare non appena il risultato è noto. Questo si chiama cortocircuito.

• a && b restituisce a se a è falsy, altrimenti b.
• a || b restituisce a se a è truthy, altrimenti b.

Il fallback con || ha un'insidia: tratta tutti i valori falsy come mancanti. Se 0 o "" è un valore valido, || lo sostituirà erroneamente. È esattamente il problema che ?? risolve.

Consulta il capitolo dedicato agli operatori logici per le regole complete.

L'operatore di coalescenza null (??)

L'operatore di coalescenza null ?? restituisce il lato destro solo quando il lato sinistro è null o undefined — non per altri valori falsy come 0 o "".

Usa ?? ogni volta che assegni valori predefiniti a variabili che potrebbero legittimamente essere 0, "" o false. Usa || solo quando vuoi davvero che qualsiasi valore falsy attivi il fallback.

Conclusione

Gli operatori condizionali sono il modo in cui il tuo codice prende decisioni. Usa if / else if / else per la logica di diramazione, il ternario ? : per semplici scelte di valore (mai profondamente annidato) e ?? per fornire valori predefiniti in modo sicuro. Combinali con gli operatori di confronto e gli operatori logici per esprimere qualsiasi condizione, e passa all'istruzione switch quando stai confrontando un valore con molte opzioni.

Esercitazione