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

Introduzione

In JavaScript, gli operatori aritmetici, logici e di confronto non servono solo a fare calcoli o verifiche “da manuale”: sono strumenti fondamentali per costruire logiche applicative affidabili, leggibili e facili da mantenere. Un uso corretto di questi operatori ti permette di validare dati, decidere cosa mostrare all’utente, calcolare prezzi e sconti, gestire stati dell’applicazione e prevenire bug sottili legati ai tipi di dato.

In questo tutorial scegliamo un sotto-argomento molto pratico: come combinare operatori aritmetici, logici e di confronto per gestire una promozione in un e-commerce. È un caso d’uso realistico, utile per capire come questi operatori lavorano insieme nel codice quotidiano.

L’obiettivo non è solo conoscere la sintassi, ma imparare a leggere una logica di business e tradurla in JavaScript in modo pulito. Vedremo anche alcune insidie tipiche, come la differenza tra == e ===, il comportamento di && e ||, e l’uso corretto degli operatori aritmetici quando si calcolano importi e sconti.

Codice completo

// Simuliamo un carrello e una regola promozionale.
// La promozione è valida se:
// - il cliente è registrato
// - il carrello supera una soglia minima
// - il cliente non ha già usato il coupon
// Se la promozione è valida, applichiamo uno sconto percentuale.

const customer = {
  name: "Giulia",
  isRegistered: true,
  hasUsedCoupon: false
};

const cart = {
  subtotal: 89.90,
  shipping: 4.99,
  discountCode: "SAVE10"
};

const MINIMUM_ORDER = 50;
const DISCOUNT_PERCENT = 10;
const FREE_SHIPPING_THRESHOLD = 70;

// Controlli logici e di confronto
const isEligibleForDiscount =
  customer.isRegistered &&
  cart.subtotal >= MINIMUM_ORDER &&
  customer.hasUsedCoupon === false &&
  cart.discountCode === "SAVE10";

// Calcolo dello sconto con operatore aritmetico
const discountAmount = isEligibleForDiscount
  ? (cart.subtotal * DISCOUNT_PERCENT) / 100
  : 0;

// Calcolo del totale finale
const subtotalAfterDiscount = cart.subtotal - discountAmount;

// Spedizione gratuita sopra una certa soglia
const shippingCost = cart.subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : cart.shipping;

// Totale complessivo
const total = subtotalAfterDiscount + shippingCost;

// Output leggibile
console.log("Cliente:", customer.name);
console.log("Subtotale:", cart.subtotal.toFixed(2), "€");
console.log("Sconto applicato:", discountAmount.toFixed(2), "€");
console.log("Spedizione:", shippingCost.toFixed(2), "€");
console.log("Totale finale:", total.toFixed(2), "€");

// Esempio di confronto tra valori e tipi
console.log("Confronto stretto 1 === ´1´:", 1 === "1"); // false
console.log("Confronto non stretto 1 == ´1´:", 1 == "1"); // true

// Esempio di operatori logici con fallback
const promoMessage = isEligibleForDiscount || "Promozione non disponibile";
console.log("Stato promo:", promoMessage);

Spiegazione

Partiamo dalla struttura del codice. Abbiamo due oggetti: customer e cart. Il primo contiene informazioni sul cliente, mentre il secondo rappresenta il carrello. Questa separazione è utile perché rende il codice più leggibile e più vicino al dominio reale dell’applicazione.

1. Operatori di confronto

Gli operatori di confronto servono a verificare relazioni tra valori:

• >, <, >=, <= per confronti numerici;
• === e !== per confronti tra valore e tipo;
• == e != per confronti con conversione automatica, da usare con cautela.

Nel nostro esempio, cart.subtotal >= MINIMUM_ORDER verifica che il carrello abbia raggiunto la soglia minima per attivare la promozione. Questo è un confronto numerico tipico in contesti reali come sconti, bonus o accessi condizionati.

La condizione cart.discountCode === "SAVE10" usa il confronto stretto. È una buona pratica perché evita ambiguità: in JavaScript, === controlla sia il valore sia il tipo. Questo riduce errori difficili da individuare, soprattutto quando i dati arrivano da form, API o database.

2. Operatori logici

L’operatore && restituisce vero solo se tutte le condizioni sono vere. Nel nostro caso, la promozione è valida solo se:

• il cliente è registrato;
• il carrello supera la soglia minima;
• il coupon non è già stato usato;
• il codice sconto è corretto.

Questa combinazione è molto comune nelle regole di business. In pratica, && ti permette di costruire una “porta logica” che si apre solo quando tutte le verifiche passano.

L’operatore || invece è utile per gestire alternative o fallback. Nell’esempio finale:

const promoMessage = isEligibleForDiscount || "Promozione non disponibile";

se isEligibleForDiscount è vero, il valore risultante sarà quel booleano; altrimenti verrà restituita la stringa. Questo mostra una caratteristica importante di JavaScript: || non restituisce sempre un booleano, ma il primo valore “truthy” o l’ultimo “falsy”.

3. Operatori aritmetici

Gli operatori aritmetici servono per calcolare importi e trasformazioni numeriche. Nel tutorial abbiamo usato:

• * per calcolare lo sconto percentuale;
• / per trasformare la percentuale in valore monetario;
• - per sottrarre lo sconto dal subtotale;
• + per sommare spedizione e totale finale.

La formula dello sconto è:

(cart.subtotal * DISCOUNT_PERCENT) / 100

Questa è una formula semplice ma molto frequente. L’uso delle parentesi rende chiaro l’ordine delle operazioni e migliora la leggibilità. In JavaScript, come in matematica, è importante non affidarsi troppo alla memoria: esplicitare il calcolo aiuta chi legge il codice, incluso il tuo io del futuro.

4. Operatore ternario come sintesi pratica

Anche se non è richiesto in modo esplicito, nel codice abbiamo usato l’operatore ternario per compattare una condizione:

const discountAmount = isEligibleForDiscount
  ? (cart.subtotal * DISCOUNT_PERCENT) / 100
  : 0;

È utile quando devi scegliere tra due valori in modo conciso. Tuttavia, va usato con moderazione: se la logica diventa troppo complessa, meglio un if esplicito per non sacrificare la leggibilità.

5. Attenzione ai tipi di dato

Uno degli errori più comuni in JavaScript riguarda i confronti tra tipi diversi. Ad esempio:

1 === "1" // false
1 == "1"  // true

Il primo confronto è corretto e prevedibile. Il secondo funziona perché JavaScript converte automaticamente il tipo stringa in numero. Questa conversione implicita può sembrare comoda, ma spesso introduce bug. In codice professionale, nella maggior parte dei casi, è preferibile usare === e !==.

Best practice

• Usa sempre === e !== quando vuoi evitare conversioni automatiche non desiderate.
• Rendi esplicite le condizioni: una variabile come isEligibleForDiscount è più chiara di un’espressione lunga sparsa nel codice.
• Separa i calcoli dalle condizioni: prima verifichi se una regola è valida, poi calcoli il risultato.
• Usa le parentesi per chiarire l’ordine delle operazioni aritmetiche, soprattutto nei calcoli economici.
• Evita espressioni troppo compatte se rendono difficile capire il flusso logico.
• Controlla i valori falsy: 0, "", null, undefined, NaN e false possono influenzare il comportamento di && e ||.
• Formatta i numeri quando lavori con importi economici, ad esempio usando toFixed(2) per l’output.

Una buona regola pratica è questa: se una condizione rappresenta una regola di business, scrivila in modo che sia leggibile anche da chi non conosce in dettaglio il tuo progetto. Il codice chiaro riduce i bug e facilita la manutenzione.

Riepilogo

In questo tutorial abbiamo visto come gli operatori aritmetici, logici e di confronto collaborano in uno scenario concreto: la gestione di una promozione e-commerce. Gli operatori di confronto verificano soglie e uguaglianze, quelli logici combinano più condizioni, mentre gli operatori aritmetici calcolano sconti e totali.

Il punto chiave è che questi operatori non vanno studiati separatamente in astratto, ma come strumenti che lavorano insieme per risolvere problemi reali. Quando scrivi codice JavaScript, pensa sempre a tre domande:

• Quali valori devo confrontare?
• Quali condizioni devono essere vere insieme?
• Quali calcoli devo eseguire sui numeri?

Se riesci a rispondere chiaramente a queste domande, il tuo codice sarà più robusto, più leggibile e più facile da estendere.

Approfondisci con risorse ufficiali

• MDN Web Docs - JavaScript Operators: documentazione completa sugli operatori in JavaScript.
• MDN Web Docs - Equality comparisons and sameness: guida fondamentale per capire ==, === e i confronti tra valori.
• MDN Web Docs - Logical operators: approfondimento su &&, || e !.
• ECMAScript Language Specification: riferimento ufficiale per chi vuole andare oltre la pratica quotidiana.

Se vuoi, nel prossimo passo posso scrivere anche un tutorial dedicato a precedenza degli operatori e ordine di valutazione in JavaScript, con esempi pratici e casi di bug reali.