Project: fooiencalculator en FizzBuzz

Een rekening van 84 met 20 procent fooi, verdeeld over vier personen, komt uit op 25.20 per persoon. In dit hoofdstuk bouw je die calculator en daarna de klassieke FizzBuzz-oefening met onderdelen uit eerdere hoofdstukken.

Van een probleem naar een programma

Een programma schrijven begint vóór de code. Zeg eerst in gewone woorden wat erin gaat, wat eruit komt en wat ertussen gebeurt. Voor een fooiencalculator zijn de invoeren de rekening, het fooipercentage en het aantal personen. De uitvoeren zijn de fooi, het totaal en ieders aandeel. Daartussen zitten drie kleine berekeningen. Door dit op te schrijven maak je van één vage taak meerdere kleine taken die je elk al kunt uitvoeren.

Stap 1: de berekening

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

Controleer de getallen met de hand voordat je de code vertrouwt: 20 procent van 84 is 16.8, het totaal is 100.8 en 100.8 gedeeld door 4 is 25.2. Testen met waarden waarvan je het antwoord al kent helpt fouten te vinden zoals een tarief van 20 in plaats van 0.2 intypen, wat de fooi 1680 zou maken.

Stap 2: geld correct tonen

Geld wordt normaal met twee decimalen weergegeven en 25.2 afdrukken oogt onaf. De getalmethode toFixed(2) geeft een string met precies twee decimalen terug, dus each.toFixed(2) geeft "25.20". Denk eraan dat kommagetallen kleine binaire afrondingsfouten kunnen bevatten; toFixed verbergt die ook, nog een reden om het voor weergave te gebruiken. Houd de getallen tijdens het rekenen als getallen en roep toFixed pas helemaal aan het einde aan, bij het afdrukken.

Stap 3: verpak het in een functie

Een berekening die je misschien met andere getallen herhaalt, hoort in een functie. De functie hieronder geeft een object terug, zodat één aanroep alle drie resultaten met duidelijke namen teruggeeft. Standaardparameters houden het gebruikelijke geval kort om te schrijven.

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

De regel return { tip, total, each: total / people }; gebruikt een verkorte vorm: alleen tip binnen een object schrijven betekent tip: tip, een eigenschap waarvan de sleutel en variabele dezelfde naam hebben.

FizzBuzz

FizzBuzz is een telspel dat een programmeeroefening is geworden. Tel van 1 tot 15. Zeg Fizz bij veelvouden van 3, Buzz bij veelvouden van 5, FizzBuzz bij veelvouden van beide en anders het getal. Je gebruikt een lus, de restoperator en een if-keten, en er is één valkuil. Het getal 15 is een veelvoud van 3, dus als je eerst op 3 test, drukt 15 Fizz af en bereikt nooit de FizzBuzz-tak. De oplossing is de regel van het if-hoofdstuk: zet de nauwste voorwaarde eerst.

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);
  }
}

Testen op i % 15 === 0 werkt omdat een getal dat door zowel 3 als 5 deelbaar is, ook door 15 deelbaar is. i % 3 === 0 && i % 5 === 0 zegt hetzelfde directer en beide zijn prima. Als je versie werkt, vergelijk de uitvoer dan regel voor regel met de verwachte lijst: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Wat je hierna kunt bouwen

Je kent nu de kern van de taal: waarden, variabelen, operatoren, beslissingen, lussen, arrays, functies en objecten. Bijna elk programma bestaat uit deze onderdelen. Goede vervolgstappen zijn FizzBuzz herschrijven als functie met een bovengrens, de fooiencalculator elk aandeel met Math.ceil naar boven laten afronden op hele munteenheden, of een uitgavenlijst in een array van objecten bijhouden en een totaal per categorie afdrukken. De MDN JavaScript Guide, die je in deze cursus volgt, gaat verder met onderwerpen zoals verzamelingen, classes en werken met webpagina's.