Costruire un calcolatore di preventivi con gli operatori JavaScript

Introduzione

Gli operatori aritmetici, logici e di confronto diventano particolarmente utili quando devono collaborare all’interno di una funzionalità concreta. In questo tutorial realizzeremo un piccolo calcolatore di preventivi per un negozio online. Il programma calcolerà il subtotale, applicherà uno sconto in base all’importo e verificherà se il cliente ha diritto alla spedizione gratuita.

Questo esempio permette di usare gli operatori in modo realistico:

gli operatori aritmetici calcolano prezzi, quantità, sconti e costi di spedizione;
gli operatori di confronto verificano soglie e condizioni;
gli operatori logici combinano più requisiti;
l’operatore ternario seleziona rapidamente un valore tra due alternative;
l’operatore di resto (%) può essere usato per assegnare un piccolo bonus a intervalli regolari.

Prima di iniziare, è importante ricordare che in JavaScript l’operatore di uguaglianza stretta === è generalmente preferibile a ==, perché confronta sia il valore sia il tipo dei dati senza conversioni implicite.

Codice completo

const prodotto = {
  nome: "Tastiera meccanica",
  prezzo: 89.90,
  quantita: 3
};

const cliente = {
  iscritto: true,
  codicePromozionale: "BENVENUTO10",
  acquistiPrecedenti: 4
};

const sogliaSpedizioneGratuita = 200;
const costoSpedizione = 7.90;

// Operatore moltiplicativo: prezzo per quantità
const subtotale = prodotto.prezzo * prodotto.quantita;

// Sconto base in base al subtotale
let percentualeSconto = 0;

if (subtotale >= 250) {
  percentualeSconto = 20;
} else if (subtotale >= 150) {
  percentualeSconto = 10;
}

// Il codice promozionale aggiunge uno sconto solo
// se il cliente è iscritto e il codice è corretto.
const codiceValido =
  cliente.iscritto === true &&
  cliente.codicePromozionale === "BENVENUTO10";

if (codiceValido) {
  percentualeSconto += 5;
}

// Calcolo dello sconto e del totale dopo lo sconto
const valoreSconto = subtotale * (percentualeSconto / 100);
const totaleScontato = subtotale - valoreSconto;

// Spedizione gratuita se il totale raggiunge la soglia
const spedizioneGratuita = totaleScontato >= sogliaSpedizioneGratuita;

// Operatore ternario: scegli il costo in base alla condizione
const costoFinaleSpedizione = spedizioneGratuita ? 0 : costoSpedizione;

// Bonus fedeltà: un bonus ogni 5 acquisti precedenti
const bonusFedelta =
  cliente.acquistiPrecedenti > 0 &&
  cliente.acquistiPrecedenti % 5 === 0
    ? 5
    : 0;

const totaleFinale =
  totaleScontato + costoFinaleSpedizione - bonusFedelta;

console.log(`Prodotto: ${prodotto.nome}`);
console.log(`Subtotale: ${subtotale.toFixed(2)} €`);
console.log(`Sconto applicato: ${percentualeSconto}%`);
console.log(`Costo spedizione: ${costoFinaleSpedizione.toFixed(2)} €`);
console.log(`Bonus fedeltà: ${bonusFedelta.toFixed(2)} €`);
console.log(`Totale finale: ${totaleFinale.toFixed(2)} €`);

Spiegazione

Calcolo del subtotale

La prima operazione significativa è:

const subtotale = prodotto.prezzo * prodotto.quantita;

L’operatore * moltiplica il prezzo unitario per il numero di pezzi acquistati. Se il prezzo è 89,90 euro e la quantità è 3, il subtotale sarà 269,70 euro.

Confrontare valori con soglie

La percentuale di sconto viene scelta confrontando il subtotale con due soglie:

if (subtotale >= 250) {
  percentualeSconto = 20;
} else if (subtotale >= 150) {
  percentualeSconto = 10;
}

L’operatore >= significa “maggiore o uguale”. L’ordine dei controlli è importante: prima viene verificata la soglia più alta. Se controllassimo prima subtotale >= 150, un valore di 269,70 soddisferebbe già quella condizione e non arriverebbe al 20%.

Combinare condizioni con l’operatore AND

Il codice promozionale è valido soltanto quando entrambe le condizioni sono vere:

const codiceValido =
  cliente.iscritto === true &&
  cliente.codicePromozionale === "BENVENUTO10";

L’operatore logico && restituisce un risultato vero solo se tutte le espressioni collegate sono vere. In questo caso il cliente deve essere iscritto e deve aver inserito il codice corretto.

Il confronto stretto con === evita risultati ambigui. Per esempio, "true" === true restituisce false, perché una stringa e un valore booleano non hanno lo stesso tipo.

Percentuali e sottrazioni

Per calcolare il valore dello sconto trasformiamo la percentuale in un numero decimale:

const valoreSconto = subtotale * (percentualeSconto / 100);
const totaleScontato = subtotale - valoreSconto;

Le parentesi rendono esplicita la precedenza delle operazioni. In generale, moltiplicazioni e divisioni vengono eseguite prima di somme e sottrazioni, ma usare le parentesi rende il codice più leggibile e riduce gli errori.

Operatore ternario e operatore resto

L’espressione ternaria:

const costoFinaleSpedizione =
  spedizioneGratuita ? 0 : costoSpedizione;

può essere letta così: “se spedizioneGratuita è vera, usa zero; altrimenti usa il costo della spedizione”. È adatta a scelte brevi. Per regole più articolate è preferibile un blocco if...else.

L’operatore % restituisce il resto di una divisione. Nell’esempio, acquistiPrecedenti % 5 === 0 verifica se il numero di acquisti è un multiplo di 5. In tal caso viene assegnato un bonus fedeltà.

Best practice

Usa nomi descrittivi: variabili come totaleScontato e costoFinaleSpedizione spiegano l’intenzione del codice.
Preferisci const quando possibile: usa let soltanto per valori che devono cambiare, come percentualeSconto.
Usa === e !==: evitano conversioni automatiche spesso difficili da prevedere.
Raggruppa le condizioni: le parentesi rendono chiaro l’ordine di valutazione, soprattutto quando usi && e || insieme.
Non affidarti direttamente ai decimali per i calcoli finanziari: i numeri in virgola mobile possono produrre piccole imprecisioni. In applicazioni reali puoi lavorare con i centesimi come numeri interi oppure usare una libreria dedicata.
Valida i dati in ingresso: prima dei calcoli controlla che prezzo e quantità siano numeri validi e non negativi.

Riepilogo

Un calcolatore di preventivi mostra come gli operatori JavaScript possano collaborare in una situazione concreta. Gli operatori aritmetici eseguono i calcoli, quelli di confronto verificano le soglie, mentre gli operatori logici combinano requisiti come iscrizione e codice promozionale. L’operatore ternario semplifica le decisioni brevi e l’operatore resto permette di individuare multipli e intervalli.

La qualità del codice non dipende solo dal risultato finale: scegliere operatori appropriati, usare confronti rigorosi e organizzare bene le condizioni rende il programma più affidabile e facile da modificare.

Approfondisci con risorse ufficiali

Add as preferred source on Google