Calcolare e validare dati in JavaScript con gli operatori

Introduzione

Gli operatori aritmetici, logici e di confronto sono fondamentali per trasformare dati grezzi in decisioni utili. Non servono soltanto per sommare numeri o verificare se due valori sono uguali: combinati correttamente, permettono di costruire funzionalità reali come il calcolo del totale di un carrello, l’applicazione di uno sconto e la verifica dei requisiti per la spedizione gratuita.

In questo tutorial realizzeremo un piccolo esempio di checkout. Il programma calcolerà il subtotale, applicherà uno sconto quando il cliente rispetta determinate condizioni e stabilirà il costo della spedizione. L’obiettivo è comprendere anche alcuni aspetti pratici spesso sottovalutati:

la differenza tra uguaglianza stretta e uguaglianza non stretta;
l’importanza delle parentesi nelle espressioni complesse;
l’uso del cortocircuito con gli operatori logici;
la gestione dei valori mancanti con l’operatore nullish coalescing;
la validazione dei dati prima di eseguire i calcoli.

Codice completo

const prodotto = {
  nome: "Tastiera meccanica",
  prezzo: 89.99,
  quantita: 2
};

const cliente = {
  autenticato: true,
  haCodiceSconto: true,
  codiceSconto: "WELCOME10",
  credito: 15,
  regione: "Italia"
};

const sogliaSpedizioneGratuita = 150;
const costoSpedizioneStandard = 6.90;

// Operatori di confronto e logici per validare i dati
const prodottoValido =
  typeof prodotto.prezzo === "number" &&
  prodotto.prezzo > 0 &&
  Number.isInteger(prodotto.quantita) &&
  prodotto.quantita > 0;

// Se il prodotto non è valido, interrompiamo l´esecuzione.
if (!prodottoValido) {
  throw new Error("I dati del prodotto non sono validi.");
}

// Operatore aritmetico: moltiplicazione
const subtotale = prodotto.prezzo * prodotto.quantita;

// Operatore logico AND:
// lo sconto è disponibile solo se il cliente è autenticato
// e possiede un codice valido.
const codiceValido =
  cliente.autenticato === true &&
  cliente.haCodiceSconto === true &&
  cliente.codiceSconto === "WELCOME10";

// Operatore ternario: sceglie una delle due percentuali.
const percentualeSconto = codiceValido ? 10 : 0;

// Calcoliamo il valore dello sconto.
const valoreSconto = subtotale * (percentualeSconto / 100);

// Operatori aritmetici: sottrazione e addizione
const totaleDopoSconto = subtotale - valoreSconto;

// L´operatore ?? usa il valore a destra solo se quello a sinistra
// è null oppure undefined.
const creditoDisponibile = cliente.credito ?? 0;

// Il credito non può ridurre il totale sotto zero.
const creditoUtilizzato = Math.min(creditoDisponibile, totaleDopoSconto);
const totaleDopoCredito = totaleDopoSconto - creditoUtilizzato;

// La spedizione è gratuita se il totale raggiunge la soglia
// oppure se il cliente si trova in una regione specifica.
const spedizioneGratuita =
  totaleDopoCredito >= sogliaSpedizioneGratuita ||
  cliente.regione === "San Marino";

const costoSpedizione = spedizioneGratuita
  ? 0
  : costoSpedizioneStandard;

const totaleFinale = totaleDopoCredito + costoSpedizione;

console.log(`Prodotto: ${prodotto.nome}`);
console.log(`Subtotale: €${subtotale.toFixed(2)}`);
console.log(`Sconto applicato: €${valoreSconto.toFixed(2)}`);
console.log(`Credito utilizzato: €${creditoUtilizzato.toFixed(2)}`);
console.log(`Spedizione: €${costoSpedizione.toFixed(2)}`);
console.log(`Totale finale: €${totaleFinale.toFixed(2)}`);

Spiegazione

Operatori aritmetici per i calcoli

Gli operatori aritmetici eseguono operazioni matematiche. Nel codice abbiamo usato * per calcolare il subtotale, / per trasformare una percentuale in un valore decimale, - per sottrarre sconto e credito e + per aggiungere il costo della spedizione.

La parentesi nell’espressione subtotale * (percentualeSconto / 100) è importante. Senza parentesi, JavaScript seguirebbe le regole di precedenza degli operatori e l’espressione potrebbe essere interpretata in modo diverso da quello desiderato. Anche quando la precedenza è nota, usare parentesi esplicite rende il codice più leggibile e riduce gli errori.

Confronti sicuri con ===

Gli operatori >, >= e === confrontano i valori. L’operatore === è preferibile a == nella maggior parte dei casi perché controlla sia il valore sia il tipo.

10 === 10;   // true
10 === "10";  // false

10 == "10";   // true: JavaScript converte il tipo

Nel nostro esempio, cliente.autenticato === true comunica chiaramente che il valore deve essere esattamente un booleano. Per controllare una condizione booleana è però spesso sufficiente anche scrivere cliente.autenticato, purché il dato sia affidabile.

Operatori logici e valutazione a cortocircuito

L’operatore && restituisce un risultato utile quando tutte le condizioni devono essere vere. Il codice verifica che il cliente sia autenticato, che abbia un codice sconto e che il codice corrisponda a quello previsto.

L’operatore ||, invece, è utile quando basta che almeno una condizione sia vera. La spedizione gratuita viene applicata se il totale supera la soglia oppure se il cliente si trova in una regione speciale.

Entrambi gli operatori usano la valutazione a cortocircuito. Con A && B, JavaScript non valuta B se A è già falso. Con A || B, JavaScript non valuta B se A è già vero. Questa caratteristica può evitare operazioni inutili e prevenire errori:

const utente = null;

// La seconda parte non viene valutata se utente è null.
const nome = utente && utente.nome;

console.log(nome); // null

Valori mancanti e operatore ??

L’operatore ??, chiamato nullish coalescing, restituisce il valore alternativo soltanto quando il valore iniziale è null o undefined. È diverso da ||, che considera falsy anche valori validi come 0, una stringa vuota o false.

const creditoA = 0;

console.log(creditoA || 10); // 10: lo 0 è falsy
console.log(creditoA ?? 10); // 0: lo 0 è un valore presente

Per un credito, un prezzo o una quantità, lo zero può essere significativo. Per questo ?? è spesso la scelta più corretta quando si vuole fornire un valore predefinito soltanto in assenza del dato.

Il ruolo dell’operatore ternario

L’operatore ternario ha la forma condizione ? valoreSeVero : valoreSeFalso. È adatto a decisioni brevi, come scegliere una percentuale di sconto o determinare il costo della spedizione. Non dovrebbe però sostituire un blocco if...else quando la logica contiene molte istruzioni o condizioni annidate.

Best practice

Usa === e !==: evitano conversioni di tipo implicite e rendono i confronti più prevedibili.
Raggruppa le condizioni: assegna espressioni complesse a variabili come prodottoValido o codiceValido.
Inserisci parentesi nelle formule: anche quando non sono obbligatorie, chiariscono l’ordine delle operazioni.
Valida prima di calcolare: verifica tipo, intervallo e formato dei dati ricevuti da moduli o API.
Preferisci ?? a || per i valori numerici: in questo modo non perdi valori validi come zero.
Non confondere && e ||: il primo richiede che tutte le condizioni siano vere, il secondo che almeno una lo sia.
Evita confronti diretti tra numeri decimali: a causa della rappresentazione binaria, operazioni come 0.1 + 0.2 possono produrre un risultato leggermente diverso da 0.3.
Formatta solo in fase di visualizzazione: mantieni i valori come numeri durante i calcoli e usa toFixed() soltanto per mostrarli.

Riepilogo

Gli operatori aritmetici trasformano i dati numerici, quelli di confronto producono decisioni booleane e quelli logici combinano più condizioni. In un’applicazione reale, questi strumenti lavorano insieme: prima si validano i dati, poi si eseguono i calcoli e infine si applicano le regole di business.

Ricorda soprattutto di usare === per confronti affidabili, le parentesi per rendere esplicita la precedenza, && e || per condizioni multiple e ?? quando un valore predefinito deve essere usato solo in caso di dato assente.

Approfondisci con risorse ufficiali

Add as preferred source on Google