Ogni programma utile arriva inevitabilmente a un punto di decisione. Questo pulsante deve inviare il modulo o mostrare un errore? Questo utente vede la dashboard dell'amministratore o la vista ospite? JavaScript risponde a queste domande con le istruzioni condizionali. Sono le valvole di controllo del tuo codice: aprono un percorso, ne chiudono un altro, tutto in base al fatto che un'espressione valga true o false. Senza di esse, il tuo script procederebbe dall'alto verso il basso senza mai reagire alla persona che lo sta utilizzando.
Il ramo più semplice: if
L'istruzione if è il primo cancello che attraversi. Inserisci una condizione tra parentesi. Se quella condizione risulta true, viene eseguito il blocco di codice sottostante. Se risulta false, JavaScript salta interamente il blocco e prosegue nel file.
Questo è esattamente ciò di cui hai bisogno per controlli semplici e isolati. Immagina di validare un campo di un modulo prima di inviare qualsiasi cosa a un server:
const email = document.getElementById("email").value;
if (email === "") {
alert("Please enter your email.");
}
Nessuna email, nessun invio. La logica è diretta e chiara. Usa if quando c'è un solo caso speciale da gestire e non è richiesta un'azione alternativa.
Gestire l'alternativa: if...else
La maggior parte delle decisioni reali ha due lati. La coppia if...else copre esattamente questo. Un blocco viene eseguito quando la condizione è vera, l'altro quando è falsa. I due percorsi sono mutuamente esclusivi.
Immagina un controllo della modalità scura al caricamento della pagina:
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
Il browser non aggiungerà mai entrambe le classi. Sceglie un percorso, lo esegue e va avanti. Ogni volta che la tua logica si divide nettamente in due possibili esiti, questa è la struttura da utilizzare.
Percorsi multipli: if...else if...else
Non tutti i problemi sono binari. A volte hai bisogno di una scala di possibilità. La catena if...else if...else ti permette di testare diverse condizioni in sequenza. JavaScript le valuta dall'alto verso il basso ed esegue il primo blocco la cui condizione sia vera. Dopo quel match, il resto della scala viene ignorato.
Un classico esempio è mappare un punteggio numerico a un voto letterale:
const score = 87;
let grade;
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else if (score >= 70) {
grade = "C";
} else {
grade = "F";
}
Qui l'ordine è fondamentale. Se controllassi score >= 70 prima di score >= 90, quasi ogni voto sufficiente finirebbe nel contenitore C perché il primo match vero vince. Mantieni le tue condizioni ordinate dalla più specifica alla meno specifica e chiudi sempre la catena con un else finale per intercettare qualsiasi cosa sfugga.
Corrispondenza di valori fissi: switch
Quando confronti una variabile con un elenco di costanti note, una lunga catena if...else diventa caotica. L'istruzione switch mette ordine. Valuta un'espressione una sola volta, quindi la confronta con le etichette case utilizzando l'uguaglianza stretta (===). Questo rende il codice più facile da scansionare quando le opzioni sono discrete e nominate.
Considera l'impostazione degli orari del negozio in base al giorno corrente:
const day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday hours: 10am - 4pm");
break;
case 6:
console.log("Saturday hours: 9am - 6pm");
break;
default:
console.log("Weekday hours: 8am - 8pm");
}
Fai attenzione a break. Se lo ometti, l'esecuzione passa al case successivo e continua a girare. Quel comportamento è occasionalmente utile, ma più spesso causa bug silenziosi. Usato correttamente, switch rende la tua intenzione ovvia a colpo d'occhio e mantiene i rami correlati allineati in un'unica colonna ordinata.
Decisioni compatte: l'operatore ternario
L'operatore ternario — scritto come ? : — è un'espressione, non un'istruzione. Questa distinzione è importante
