Introduzione
Le strutture condizionali in JavaScript, come if, else e switch, sono fondamentali quando un’app deve prendere decisioni in base a dati, stati o input dell’utente. Un caso molto pratico, spesso presente in applicazioni reali, è la gestione del flusso di checkout in un e-commerce o in un sistema di prenotazione.
In questa guida vedremo come usare le strutture condizionali per controllare un percorso di acquisto semplice ma realistico: verificare se il carrello è vuoto, controllare la disponibilità di un metodo di pagamento, applicare eventuali sconti e mostrare messaggi diversi in base allo stato del processo.
L’obiettivo non è solo capire la sintassi, ma imparare quando usare if, when usare else if e quando switch è più leggibile. Questo approccio ti aiuterà a scrivere codice più chiaro, facile da mantenere e più vicino a casi d’uso reali.
Codice completo
// Simuliamo i dati di un checkout
const cart = [
{ name: "Mouse wireless", price: 25 },
{ name: "Tastiera meccanica", price: 80 }
];
const user = {
isLoggedIn: true,
membership: "premium" // standard, premium, vip
};
const paymentMethod = "card"; // card, paypal, bank_transfer
const couponCode = "SAVE10"; // SAVE10, FREESHIP, nessun codice
// 1. Controllo iniziale: il carrello non deve essere vuoto
if (cart.length === 0) {
console.log("Il carrello è vuoto. Aggiungi almeno un prodotto per continuare.");
} else {
// 2. Calcolo totale
let total = cart.reduce((sum, item) => sum + item.price, 0);
// 3. Verifica login utente
if (!user.isLoggedIn) {
console.log("Devi effettuare il login prima di completare l´acquisto.");
} else {
// 4. Applichiamo un possibile sconto in base al codice coupon
switch (couponCode) {
case "SAVE10":
total = total * 0.9; // 10% di sconto
console.log("Coupon applicato: sconto del 10%.");
break;
case "FREESHIP":
console.log("Coupon applicato: spedizione gratuita.");
break;
default:
console.log("Nessun coupon valido applicato.");
}
// 5. Sconto aggiuntivo per membri premium o vip
if (user.membership === "premium") {
total = total * 0.95; // ulteriore 5% di sconto
console.log("Sconto membership premium applicato.");
} else if (user.membership === "vip") {
total = total * 0.9; // ulteriore 10% di sconto
console.log("Sconto membership VIP applicato.");
} else {
console.log("Nessuno sconto membership applicato.");
}
// 6. Gestione metodo di pagamento
switch (paymentMethod) {
case "card":
console.log("Pagamento con carta selezionato.");
break;
case "paypal":
console.log("Pagamento con PayPal selezionato.");
break;
case "bank_transfer":
console.log("Pagamento con bonifico selezionato.");
break;
default:
console.log("Metodo di pagamento non supportato.");
}
// 7. Risultato finale
total = total.toFixed(2);
console.log(`Checkout completato. Totale da pagare: €${total}`);
}
}Spiegazione
Questo esempio mostra un flusso di checkout completo e realistico. Vediamo il ruolo di ogni struttura condizionale.
1. Controllo del carrello con if
La prima decisione è semplice: se il carrello è vuoto, non ha senso andare avanti. Qui usiamo if perché c’è una sola condizione principale da verificare.
Se invece il carrello contiene prodotti, il codice entra nel blocco else e continua il processo.
2. Verifica login con if e else
In molti e-commerce l’utente deve essere autenticato prima di finalizzare l’ordine. La condizione if (!user.isLoggedIn) controlla proprio questo.
Notare l’uso del punto esclamativo: significa “non è loggato”. È una forma molto comune e leggibile quando si vuole bloccare un flusso in caso di mancata autenticazione.
3. Gestione dei coupon con switch
Il codice coupon è un ottimo caso d’uso per switch, perché abbiamo più valori possibili da confrontare: SAVE10, FREESHIP e il caso di default.
Rispetto a una lunga serie di if else if, lo switch rende il codice più ordinato e immediato quando si confronta una singola variabile con più valori discreti.
4. Sconti per membership con if else if
Per la membership abbiamo tre stati: premium, vip e standard. Qui if else if è perfetto, perché stiamo confrontando la stessa variabile con condizioni diverse e vogliamo eseguire un solo ramo alla volta.
Questo è uno dei punti chiave: if else if è molto utile quando le condizioni sono collegate tra loro e la scelta dipende da livelli o priorità.
5. Metodo di pagamento con switch
Anche il metodo di pagamento si presta bene a switch, perché i valori sono finiti e ben definiti. Ogni caso rappresenta un’opzione distinta dell’interfaccia o del backend.
Il blocco default è importante perché gestisce eventuali valori inattesi, evitando comportamenti ambigui.
Best practice
- Usa if per condizioni booleane semplici: ad esempio controlli come “carrello vuoto” o “utente loggato”.
- Usa else if per catene di priorità: quando vuoi verificare più livelli della stessa variabile, come ruoli, stati o fasce di prezzo.
- Usa switch per confronti su valori discreti: ideale per codici, tipi di pagamento, stati di una richiesta o opzioni selezionate.
- Inserisci sempre un default nello switch: ti aiuta a gestire input non previsti e rende il codice più robusto.
- Evita condizioni troppo annidate: se il flusso diventa complesso, valuta di separare la logica in funzioni più piccole.
- Rendi i messaggi chiari: in un checkout, ogni messaggio deve aiutare l’utente o il team tecnico a capire cosa sta succedendo.
- Non ripetere calcoli inutili: calcola il totale una sola volta e aggiorna il valore solo quando serve.
Riepilogo
Le strutture condizionali sono strumenti essenziali per controllare il comportamento di un programma JavaScript. In un flusso di checkout puoi usarle per:
- bloccare l’accesso se il carrello è vuoto;
- verificare se l’utente è autenticato;
- applicare sconti in base a coupon o membership;
- gestire diversi metodi di pagamento;
- mostrare messaggi diversi in base allo stato finale.
In sintesi: if è perfetto per decisioni semplici, else if per alternative ordinate e switch per gestire più valori di una stessa variabile in modo pulito. Saper scegliere la struttura giusta migliora la leggibilità e rende il codice più facile da mantenere nel tempo.
Approfondisci con risorse ufficiali
- MDN Web Docs - if...else: documentazione chiara e completa sulle condizioni in JavaScript.
- MDN Web Docs - switch: guida ufficiale per usare correttamente lo switch statement.
- MDN Web Docs - Operatori logici: utile per combinare condizioni complesse in modo leggibile.
- JavaScript.info - Conditional branching: ottimo per consolidare la logica dei rami condizionali con esempi pratici.