Operatori JavaScript: come combinarli in condizioni reali

by Anastasia P.
SHARE
Operatori JavaScript: come combinarli in condizioni reali
© Guida-HTML5.it

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 di t.
  • Evita condizioni troppo lunghe: se una if contiene 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.

SHARE