Operatori JavaScript nel codice reale: aritmetici, logici e di confronto

Introduzione

Quando si scrive JavaScript in un progetto reale, gli operatori non servono solo a “fare i conti”. In pratica, sono il motore delle decisioni: calcolano importi, controllano condizioni, validano input, gestiscono stati dell’interfaccia e rendono il codice più compatto e leggibile. Tra i più importanti troviamo gli operatori aritmetici, gli operatori logici e gli operatori di confronto.

In questo tutorial vedremo un sotto-argomento molto utile e concreto: come combinare questi operatori in un piccolo sistema di checkout, simile a quello che potresti trovare in un e-commerce. L’obiettivo è capire non solo cosa fanno gli operatori, ma soprattutto come usarli insieme in modo corretto per evitare bug e scrivere codice più pulito.

Il caso d’uso sarà semplice ma realistico: calcolare il totale di un ordine, applicare uno sconto, verificare se un ordine è valido e decidere se l’utente può completare il pagamento.

Codice completo

// Dati di esempio
const cart = [
  { name: "T-shirt", price: 19.99, quantity: 2 },
  { name: "Jeans", price: 49.9, quantity: 1 },
  { name: "Sneakers", price: 89.5, quantity: 1 }
];

const user = {
  name: "Marco",
  isLoggedIn: true,
  hasValidPaymentMethod: true,
  isPremium: false
};

const coupon = {
  code: "SAVE10",
  isActive: true,
  minOrder: 100,
  discountPercent: 10
};

// 1) Calcolo del subtotale
let subtotal = 0;

for (const item of cart) {
  subtotal += item.price * item.quantity; // aritmetici: moltiplicazione + addizione
}

// 2) Verifica sconto coupon
const couponIsUsable =
  coupon.isActive &&
  subtotal >= coupon.minOrder;

// 3) Calcolo sconto
let discount = 0;

if (couponIsUsable) {
  discount = subtotal * (coupon.discountPercent / 100);
}

// 4) Calcolo totale finale
const total = subtotal - discount;

// 5) Regole di accesso al pagamento
const canCheckout =
  user.isLoggedIn &&
  user.hasValidPaymentMethod &&
  total > 0;

// 6) Messaggio finale
const message = canCheckout
  ? `Ordine pronto. Totale da pagare: €${total.toFixed(2)}`
  : "Non è possibile completare il checkout. Controlla login, pagamento o carrello.";

// Output
console.log("Subtotale:", subtotal.toFixed(2));
console.log("Sconto:", discount.toFixed(2));
console.log("Totale:", total.toFixed(2));
console.log("Checkout abilitato?", canCheckout);
console.log(message);

Spiegazione

Vediamo il codice passo per passo, concentrandoci sugli operatori usati e sul motivo per cui sono utili.

1. Operatori aritmetici: calcolo del subtotale

Nel ciclo for...of sommiamo il prezzo di ogni prodotto moltiplicato per la quantità:

subtotal += item.price * item.quantity;

Qui usiamo due operatori aritmetici:

• * per calcolare il costo della singola riga del carrello
• += per accumulare il subtotale progressivamente

Questo approccio è molto comune nei calcoli di fatture, carrelli e report economici. Invece di scrivere una somma lunga e manuale, il ciclo rende il codice scalabile: funziona con 3 prodotti come con 300.

2. Operatori logici: validare le condizioni

La variabile couponIsUsable usa l’operatore &&:

const couponIsUsable =
  coupon.isActive &&
  subtotal >= coupon.minOrder;

Qui il coupon è valido solo se:

• è attivo
• il subtotale è almeno uguale alla soglia minima

L’operatore logico && restituisce true solo se entrambe le condizioni sono vere. In pratica, è perfetto quando vuoi imporre più requisiti contemporaneamente.

Lo stesso principio viene usato in canCheckout:

const canCheckout =
  user.isLoggedIn &&
  user.hasValidPaymentMethod &&
  total > 0;

Qui il checkout è possibile solo se:

• l’utente ha effettuato l’accesso
• ha un metodo di pagamento valido
• il totale è maggiore di zero

Questo è un esempio tipico di logica di business: non basta che un dato sia presente, deve essere anche coerente con le regole del sistema.

3. Operatori di confronto: verificare soglie e stato

Gli operatori di confronto servono per confrontare valori e ottenere un risultato booleano. Nel nostro esempio troviamo:

• >= per verificare il minimo richiesto dal coupon
• > per controllare che il totale sia positivo

Questi operatori sono fondamentali quando si lavora con limiti, range e controlli di sicurezza. Per esempio:

subtotal >= coupon.minOrder

significa: “il subtotale è sufficiente per usare il coupon?”.

Invece:

total > 0

serve a evitare checkout inutili o errati con importo nullo o negativo.

4. Operatore ternario: una scelta compatta

Nel messaggio finale usiamo il ternario:

const message = canCheckout
  ? `Ordine pronto. Totale da pagare: €${total.toFixed(2)}`
  : "Non è possibile completare il checkout. Controlla login, pagamento o carrello.";

Anche se non è uno degli operatori principali del tutorial, il ternario è un ottimo esempio di combinazione pratica: prende una condizione booleana e restituisce uno dei due valori possibili. È utile quando vuoi evitare un if/else troppo verboso per assegnazioni semplici.

Best practice

Usare bene gli operatori non significa solo conoscere la sintassi, ma anche scegliere la forma più leggibile e sicura. Ecco alcune buone pratiche da seguire.

• Preferisci === e !== quando confronti valori. Evita == e != se non hai un motivo preciso, perché introducono coercizioni implicite.
• Raggruppa le condizioni complesse con parentesi se il controllo diventa difficile da leggere. Anche se l’ordine degli operatori è noto, la chiarezza viene prima.
• Usa variabili intermedie per nomi significativi come couponIsUsable o canCheckout. Il codice diventa più comprensibile rispetto a una singola espressione gigante.
• Controlla sempre i dati numerici prima di fare calcoli. Se un valore può essere undefined o null, il risultato potrebbe diventare NaN.
• Non abusare del ternario. Va bene per assegnazioni brevi, ma se la logica cresce è meglio tornare a un if/else leggibile.
• Usa gli operatori logici per validare regole di business, non per nascondere logica complessa. Se una condizione è troppo lunga, spezzala in più passaggi.

Un errore frequente è confondere la logica di confronto con la logica di assegnazione. Per esempio, scrivere condizioni troppo compatte può rendere difficile capire perché un checkout fallisce. In un progetto reale, la leggibilità vale quasi quanto la correttezza.

Riepilogo

In questo tutorial abbiamo visto come gli operatori JavaScript lavorano insieme in uno scenario concreto:

• gli operatori aritmetici calcolano subtotal, sconti e totali
• gli operatori di confronto verificano soglie, limiti e stati
• gli operatori logici combinano più condizioni per decidere se un’azione è consentita

Il punto chiave è questo: in JavaScript gli operatori non servono solo a scrivere espressioni brevi, ma a modellare regole reali del software. Un carrello, un form di registrazione, un sistema di permessi o una dashboard amministrativa dipendono tutti da confronti, calcoli e condizioni ben costruite.

Se impari a combinarli con attenzione, il tuo codice sarà più affidabile, più facile da testare e molto più semplice da mantenere.

Approfondisci con risorse ufficiali

• MDN Web Docs - Operatori JavaScript: documentazione completa e affidabile sugli operatori.
• MDN Web Docs - Strict equality (===): approfondimento sul confronto rigoroso.
• MDN Web Docs - Logical AND (&&): comportamento dell’operatore logico AND.
• MDN Web Docs - Arithmetic operators: panoramica sugli operatori aritmetici.
• ECMAScript Language Specification: riferimento ufficiale per chi vuole andare oltre la pratica quotidiana.