Progetto: calcolatore della mancia e FizzBuzz

Un conto di 84 con una mancia del 20 per cento diviso fra quattro persone fa 25.20 a testa. In questa unità costruisci quel calcolatore, e poi il classico esercizio FizzBuzz, con i pezzi delle unità precedenti.

Da un problema a un programma

Scrivere un programma comincia prima di qualsiasi codice. Prima di' a parole semplici che cosa entra, che cosa esce e che cosa succede in mezzo. Per un calcolatore della mancia, i dati in ingresso sono il conto, la percentuale di mancia e il numero di persone. I risultati sono la mancia, il totale e la quota di ciascuno. In mezzo ci sono tre piccoli calcoli. Metterlo per iscritto trasforma un compito vago in diversi compiti piccoli, che sai già svolgere uno per uno.

Passo 1: il calcolo

const bill = 84;
const rate = 0.2;
const people = 4;

const tip = bill * rate;          // 16.8
const total = bill + tip;         // 100.8
const each = total / people;      // 25.2

Controlla i numeri a mano prima di fidarti del codice: il 20 per cento di 84 è 16.8, il totale è 100.8, e 100.8 diviso 4 fa 25.2. Fare prove con valori di cui conosci già la risposta è il modo per scoprire errori come una percentuale scritta 20 invece di 0.2, che farebbe diventare la mancia 1680.

Passo 2: mostrare bene i soldi

Di solito il denaro si mostra con due cifre decimali, e stampare 25.2 sembra lasciato a metà. Il metodo dei numeri toFixed(2) restituisce una stringa con esattamente due decimali, quindi each.toFixed(2) dà "25.20". Ricorda dall'unità sui numeri che i decimali possono portare piccolissimi errori di arrotondamento binario; toFixed nasconde anche quelli, un motivo in più per usarlo quando mostri i valori. Tieni i numeri come numeri mentre calcoli e chiama toFixed solo alla fine, al momento di stampare.

Passo 3: racchiudere tutto in una funzione

Un calcolo che potresti ripetere con altri numeri va messo in una funzione. La funzione qui sotto restituisce un oggetto, così una sola chiamata può riportare tutti e tre i risultati con nomi chiari. I parametri predefiniti rendono breve da scrivere il caso più comune.

function splitBill(bill, rate = 0.15, people = 1) {
  const tip = bill * rate;
  const total = bill + tip;
  return { tip, total, each: total / people };
}

const r = splitBill(84, 0.2, 4);
console.log(`Tip: ${r.tip.toFixed(2)}`);       // Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // Each: 25.20

La riga return { tip, total, each: total / people }; usa una forma abbreviata: scrivere solo tip dentro un oggetto significa tip: tip, una proprietà la cui chiave ha lo stesso nome della variabile.

FizzBuzz

FizzBuzz è un gioco di conta trasformato in esercizio di programmazione. Conta da 1 a 15. Per i multipli di 3 di' Fizz, per i multipli di 5 di' Buzz, per i multipli di entrambi di' FizzBuzz, e altrimenti di' il numero. Usa un ciclo, l'operatore resto e una catena di if, e ha una trappola. Il numero 15 è un multiplo di 3, quindi se controlli prima il 3, per 15 viene stampato Fizz e il ramo FizzBuzz non viene mai raggiunto. La soluzione è la regola dell'unità sugli if: metti per prima la condizione più stretta.

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Controllare i % 15 === 0 funziona perché un numero divisibile sia per 3 sia per 5 è divisibile per 15. Scrivere i % 3 === 0 && i % 5 === 0 dice la stessa cosa in modo più diretto, e vanno bene entrambi. Quando la tua versione funziona, confronta il suo output riga per riga con l'elenco atteso: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Che cosa costruire dopo

Ora hai il nucleo del linguaggio: valori, variabili, operatori, decisioni, cicli, array, funzioni e oggetti. Quasi ogni programma è costruito con questi pezzi. Buoni passi successivi sono riscrivere FizzBuzz come una funzione che riceve il limite superiore, fare in modo che il calcolatore della mancia arrotondi per eccesso ogni quota a unità intere di valuta con Math.ceil, oppure tenere un elenco di spese in un array di oggetti e stampare un totale per categoria. La MDN JavaScript Guide, che questo corso segue, prosegue con argomenti come le collezioni, le classi e il lavoro con le pagine web.