Introduzione
Quando si impara JavaScript, gli operatori aritmetici, logici e di confronto sembrano argomenti separati. In realtà, nel codice reale vengono quasi sempre usati insieme per prendere decisioni, calcolare valori e validare dati. Il vero salto di qualità arriva quando impari a combinarli in modo leggibile e sicuro.
In questo tutorial vedremo un sotto-argomento molto pratico: come usare insieme operatori aritmetici, logici e di confronto per gestire una semplice logica di checkout. È un caso d’uso utile perché tocca scenari comuni come sconti, disponibilità di credito, controllo di quantità e validazione di input.
L’obiettivo non è solo capire cosa fanno gli operatori, ma anche come costruire condizioni chiare, evitando errori tipici come confronti ambigui, precedenze poco leggibili e controlli incompleti.
Codice completo
// Simuliamo un piccolo carrello acquisti
const prodotto = "Cuffie wireless";
const prezzoUnitario = 79.99;
const quantita = 2;
const couponValido = true;
const saldoDisponibile = 180;
const clientePremium = false;
// Calcolo del totale base
const totaleBase = prezzoUnitario * quantita;
// Regole promozionali:
// - sconto del 10% se il cliente è premium
// - sconto aggiuntivo del 5% se il coupon è valido
// - spedizione gratuita solo se il totale supera 100 euro
const scontoPremium = clientePremium ? totaleBase * 0.10 : 0;
const scontoCoupon = couponValido ? totaleBase * 0.05 : 0;
const totaleScontato = totaleBase - scontoPremium - scontoCoupon;
// Verifica se il cliente può pagare
const puoAcquistare = totaleScontato <= saldoDisponibile;
// Spedizione
const spedizioneGratuita = totaleScontato > 100;
// Messaggio finale
let messaggio = "";
if (quantita > 0 && prezzoUnitario > 0) {
if (puoAcquistare) {
messaggio = `Acquisto possibile per ${prodotto}. Totale: €${totaleScontato.toFixed(2)}`;
if (spedizioneGratuita) {
messaggio += " con spedizione gratuita.";
} else {
messaggio += " con spedizione a pagamento.";
}
} else {
messaggio = `Saldo insufficiente per ${prodotto}. Servono €${(totaleScontato - saldoDisponibile).toFixed(2)} in più.`;
}
} else {
messaggio = "Dati del prodotto non validi.";
}
console.log({
prodotto,
totaleBase,
scontoPremium,
scontoCoupon,
totaleScontato,
puoAcquistare,
spedizioneGratuita,
messaggio
}); Spiegazione
Questo esempio mette insieme i tre gruppi di operatori in un flusso realistico.
1. Operatori aritmetici: calcoli concreti
Gli operatori aritmetici servono a ottenere valori numerici:
- * moltiplica prezzo e quantità per calcolare il totale base;
- - sottrae gli sconti dal totale;
- + viene usato nella costruzione del messaggio finale e nei calcoli di differenza.
Nel nostro esempio:
const totaleBase = prezzoUnitario * quantita; Questo è il punto di partenza per tutte le altre decisioni. Prima calcoli, poi confronti, poi verifichi le condizioni.
2. Operatori logici: combinare più condizioni
Il controllo più importante è questo:
if (quantita > 0 && prezzoUnitario > 0) Qui usiamo && per dire: “procedi solo se entrambe le condizioni sono vere”. È una pratica fondamentale quando devi validare dati minimi. Se la quantità è zero o il prezzo è negativo, il prodotto non ha senso nel contesto del checkout.
Gli operatori logici sono utili anche per rendere le regole più compatte. Ad esempio, potresti controllare se un utente è autorizzato con una combinazione di condizioni:
if (utenteAttivo && haPermesso) Nel tutorial abbiamo scelto un caso semplice, ma il principio è lo stesso in qualunque applicazione web.
3. Operatori di confronto: decisioni basate sui valori
Gli operatori di confronto servono a confrontare numeri o stringhe e ottenere un valore booleano:
- > controlla se il totale supera 100 euro;
- <= verifica se il saldo è sufficiente;
- > 0 assicura che quantità e prezzo siano validi.
Per esempio:
const spedizioneGratuita = totaleScontato > 100; Qui il confronto genera un risultato booleano che potrai riutilizzare in altre condizioni o nel rendering dell’interfaccia.
4. Operatore ternario: utile per assegnazioni rapide
Anche se non è il focus principale, nel codice compare un uso pratico del ternario:
const scontoPremium = clientePremium ? totaleBase * 0.10 : 0; È una scelta compatta quando devi assegnare un valore diverso in base a una condizione semplice. In contesti più complessi, però, meglio preferire if espliciti per mantenere leggibilità.
5. Flusso logico completo
La sequenza del codice è importante:
- prima calcoli il totale base;
- poi applichi eventuali sconti;
- quindi confronti il totale con il saldo disponibile;
- infine costruisci il messaggio finale in base alle condizioni.
Questo approccio è molto più chiaro rispetto a mettere tutto in un’unica espressione lunga e difficile da leggere.
Best practice
Quando usi operatori aritmetici, logici e di confronto insieme, segui alcune regole pratiche per evitare bug e rendere il codice più manutenibile.
- Valida i dati prima dei calcoli: controlla quantità, prezzi e input utente prima di fare moltiplicazioni o sottrazioni.
- Usa nomi di variabili descrittivi:
totaleScontatoè molto più chiaro dit. - Evita condizioni troppo lunghe: se una
ifcontiene troppi operatori, spezzala in variabili intermedie. - Preferisci
===e!==quando confronti valori: riducono sorprese dovute alla conversione implicita di tipo. - Rendi esplicita la logica commerciale: se uno sconto dipende da più regole, separa i calcoli in passaggi chiari.
- Controlla la precedenza degli operatori: quando mescoli
&&,||e confronti, usa le parentesi per evitare ambiguità.
Un esempio di condizione poco leggibile:
if (saldoDisponibile >= totaleScontato && couponValido || clientePremium) Meglio scriverla così:
const haCreditoSufficiente = saldoDisponibile >= totaleScontato;
const haPrioritaAcquisto = couponValido || clientePremium;
if (haCreditoSufficiente && haPrioritaAcquisto) {
// ...
} Separare le condizioni migliora manutenzione, test e debug.
Riepilogo
Gli operatori aritmetici, logici e di confronto non vanno studiati come strumenti isolati. Nel codice reale lavorano insieme per:
- calcolare valori come totali e sconti;
- verificare condizioni di validità con operatori logici;
- prendere decisioni con confronti numerici o test booleani.
Nel nostro esempio di checkout abbiamo visto come costruire una logica completa, leggibile e facilmente estendibile. Questo è il tipo di approccio che ti aiuta a scrivere JavaScript più pulito e affidabile.
Se vuoi migliorare davvero, esercitati a trasformare condizioni complesse in passaggi piccoli e nominati bene: è una delle abitudini più utili nello sviluppo professionale.
Approfondisci con risorse ufficiali
- MDN Web Docs - Operatori JavaScript: documentazione completa e affidabile sugli operatori.
- MDN Web Docs - Operatori di confronto: dettagli su
===,!==,>,<e altri confronti. - MDN Web Docs - Operatori logici: guida pratica su
&&,||e!. - JavaScript.info: ottimo per approfondire precedenza, coercizione e logica delle espressioni.
