Lezione 6: Gestire il Flusso con if, else e Operatori Logici in JavaScript

Introduzione al Controllo di Flusso

Benvenuti alla sesta lezione del nostro corso "Impara JavaScript in 50 lezioni". Fino a questo momento, abbiamo imparato a dichiarare variabili, a manipolare i tipi di dato e a creare funzioni. Tuttavia, se scrivessimo codice che viene eseguito sempre nello stesso ordine, dall'alto verso il basso, senza mai cambiare direzione, i nostri programmi sarebbero estremamente limitati. Immaginate un sito web che mostra lo stesso messaggio a tutti gli utenti, indipendentemente dal fatto che siano loggati o meno, oppure un carrello della spesa che non controlla se l'utente ha inserito un coupon valido.

Il controllo di flusso è ciò che permette a un programma di "prendere decisioni". In JavaScript, questo avviene principalmente attraverso le istruzioni condizionali if, else if e else. Queste strutture permettono al codice di eseguire determinati blocchi di istruzioni solo se una specifica condizione risulta vera (true) o falsa (false). In questa lezione esploreremo in profondità come funzionano queste strutture e come combinarle con gli operatori logici per creare logiche complesse e robuste.

L'Istruzione if: Il Fondamento delle Decisioni

L'istruzione if (che in inglese significa "se") è la struttura di controllo più semplice e comune. La sua sintassi prevede una parola chiave if seguita da una condizione racchiusa tra parentesi tonde (). Se la condizione all'interno delle parentesi viene valutata come true, il blocco di codice racchiuso tra le parentesi graffe {} verrà eseguito.

Come funziona la valutazione booleana

È fondamentale capire che JavaScript non cerca solo il valore letterale true o false. Esiste il concetto di truthy e falsy. Un valore è falsy se, quando convertito in booleano, diventa false. I valori falsy in JavaScript sono:

• false
• 0 (zero)
• "" (stringa vuota)
• null
• undefined
• NaN (Not a Number)

Tutti gli altri valori sono considerati truthy. Questo significa che se passiate una stringa non vuota o un numero diverso da zero all'interno di un if, JavaScript lo interpreterà come true.

Ecco un esempio semplice di utilizzo dell'istruzione if:

// Definiamo una variabile per l'età dell'utente
let eta = 20;

// Verifichiamo se l'utente è maggiorenne
if (eta >= 18) {
    console.log("Benvenuto! Puoi accedere ai contenuti per adulti.");
    // Questo blocco viene eseguito perché 20 >= 18 è true
}

In questo esempio, l'operatore >= (maggiore o uguale) confronta il valore della variabile eta con il numero 18. Poiché l'espressione è vera, il messaggio viene stampato in console.

Gestire Alternative con else e else if

Spesso non ci basta sapere cosa fare se una condizione è vera; dobbiamo anche definire cosa accade se la condizione è falsa. Qui entrano in gioco else e else if.

L'istruzione else

L'istruzione else (che significa "altrimenti") non accetta una condizione propria. Viene eseguita automaticamente se l'istruzione if precedente (o la catena di else if) risulta falsa. È essenzialmente il "piano B" del tuo programma.

L'istruzione else if

Quando abbiamo più di due possibilità, l'istruzione else non è sufficiente. Possiamo inserire uno o più blocchi else if tra l' if iniziale e l' else finale. JavaScript controllerà le condizioni in ordine: non appena ne troverà una vera, eseguirà il relativo blocco e ignorerà tutto il resto della catena.

Vediamo un esempio pratico che simula la valutazione di un voto scolastico:

let voto = 27;
let valutazione = "";

if (voto >= 90) {
    valutazione = "Eccellente (A)";
} else if (voto >= 80) {
    valutazione = "Molto Buono (B)";
} else if (voto >= 70) {
    valutazione = "Buono (C)";
} else if (voto >= 60) {
    valutazione = "Sufficiente (D)";
} else {
    valutazione = "Insufficiente (F)";
}

console.log("Il tuo risultato è: " + valutazione);
// In questo caso, dato che 27 è minore di 60, verrà eseguito il blocco else.

Perché usare else if invece di tanti if separati? Se usassimo solo if separati, JavaScript dovrebbe controllare ogni singola condizione, anche se la prima fosse già vera. Usando else if, ottimizziamo le performance e evitiamo che vengano eseguiti più blocchi di codice quando ne basta uno solo.

Operatori di Confronto e Logici

Per creare condizioni efficaci, dobbiamo saper confrontare i dati. Gli operatori di confronto restituiscono sempre un valore booleano (true o false).

Operatori di Confronto

• == (Uguaglianza semplice): Confronta i valori, ma converte i tipi se sono diversi (es. 5 == "5" è true). Sconsigliato.
• === (Uguaglianza stretta): Confronta sia il valore che il tipo (es. 5 === "5" è false). Raccomandato.
• != e !== (Diversità): L'opposto dell'uguaglianza.
• >, <, >=, <= (Maggiore, Minore, Maggiore o uguale, Minore o uguale).

Operatori Logici

Gli operatori logici ci permettono di combinare più condizioni in un'unica espressione. I tre principali sono:

1. AND (&&): Restituisce true solo se tutte le condizioni sono vere. Se anche una sola è falsa, l'intero risultato è false.
2. OR (||): Restituisce true se almeno una delle condizioni è vera. È falso solo se tutte le condizioni sono false.
3. NOT (!): Inverte il valore booleano. Trasforma true in false e viceversa.

Analizziamo un esempio complesso che combina questi operatori:

let haBiglietto = true;
let eta = 15;
let eAccompagnato = true;

// L'accesso è permesso se l'utente ha il biglietto
// E (se ha meno di 18 anni, deve essere accompagnato)
if (haBiglietto && (eta >= 18 || eAccompagnato)) {
    console.log("Accesso consentito al cinema!");
} else {
    console.log("Accesso negato.");
}

In questo codice, abbiamo usato le parentesi per definire la priorità delle operazioni. Prima viene valutata l'espressione (eta >= 18 || eAccompagnato). Se l'utente ha 15 anni ma è accompagnato, questa parte diventa true. Poi, l'operatore && controlla se anche haBiglietto è vero. Se entrambi sono veri, l'accesso è concesso.

Esempi Pratici e Casi d'Uso Reali

Per consolidare questi concetti, vediamo come implementare logiche comuni nello sviluppo web.

Caso 1: Validazione di un Form di Login

Immaginiamo di dover controllare se un utente ha inserito correttamente email e password prima di inviare i dati al server.

let emailInput = "utente@esempio.com";
let passwordInput = "123456";

if (emailInput === "" || passwordInput === "") {
    console.error("Errore: Tutti i campi sono obbligatori.");
} else if (passwordInput.length < 6) {
    console.error("Errore: La password deve contenere almeno 6 caratteri.");
} else {
    console.log("Validazione completata. Invio dei dati...");
}

Caso 2: Gestione di un Sistema di Sconti

Un e-commerce potrebbe offrire sconti basati sull'importo della spesa e sull'appartenenza a un programma fedeltà.

let totaleCarrello = 120;
let eClienteFedele = true;
let sconto = 0;

if (totaleCarrello > 100 && eClienteFedele) {
    sconto = 20; // 20% di sconto per clienti fedeli che spendono molto
} else if (totaleCarrello > 100) {
    sconto = 10; // 10% di sconto per chi spende molto ma non è fedele
} else if (eClienteFedele) {
    sconto = 5;  // 5% di sconto per clienti fedeli
} else {
    sconto = 0;  // Nessun sconto
}

console.log(`Lo sconto applicato è del ${sconto}%`);

Errori Comuni e FAQ

Anche i programmatori esperti possono cadere in alcune trappole comuni quando usano le condizionali.

1. Confondere l'operatore di assegnazione (=) con quello di confronto (===)

Questo è l'errore più frequente per i principianti. Scrivere if (x = 10) non controlla se x è uguale a 10, ma assegna il valore 10 a x. Poiché 10 è un valore truthy, la condizione risulterà sempre vera. Corretto: if (x === 10).

2. Dimenticare le parentesi graffe {}

In JavaScript, se ometti le parentesi graffe dopo un if, solo la prima riga successiva verrà considerata parte del blocco condizionale.

// ERRORE
if (true)
    console.log("Prima riga");
    console.log("Seconda riga"); // Questa verrà eseguita SEMPRE, a prescindere dall'if!

3. Usare == invece di ===

L'operatore == esegue la coercizione del tipo. Ad esempio, "" == 0 è true. Questo può portare a bug imprevedibili. Usa sempre === per garantire che sia il tipo che il valore siano identici.

Prossimi Passi e Approfondimenti

Ora che hai padroneggiato le basi di if, else e gli operatori logici, sei in grado di creare programmi che reagiscono dinamicamente ai dati. Ma il controllo di flusso non finisce qui. Per rendere il tuo codice ancora più pulito e professionale, ti suggeriamo di approfondire i seguenti argomenti:

1. L'operatore Ternario: Un modo sintetico per scrivere un if...else in una sola riga. Sintassi: condizione ? valoreSeVero : valoreSeFalso.
2. Lo switch statement: Ideale quando devi confrontare una singola variabile con molti valori diversi (es. un menu di navigazione).
3. Short-circuit evaluation: Imparare come && e || possono essere usati per assegnare valori di default in modo rapido.

Esercitati creando un piccolo programma che simuli un bancomat: chiedi il PIN, verifica se è corretto, controlla se il saldo è sufficiente per un prelievo e stampa il risultato finale. La pratica è l'unico modo per rendere questi concetti naturali!