Projekt: Trinkgeldrechner und FizzBuzz

Eine Rechnung von 84 mit 20 Prozent Trinkgeld, auf vier Personen aufgeteilt, ergibt 25.20 pro Person. Diese Einheit baut diesen Rechner und danach die klassische Übung FizzBuzz aus den Bausteinen der früheren Einheiten.

Vom Problem zum Programm

Ein Programm zu schreiben, beginnt vor dem ersten Code. Sag zuerst in einfachen Worten, was hineingeht, was herauskommt und was dazwischen passiert. Bei einem Trinkgeldrechner sind die Eingaben die Rechnung, der Trinkgeldsatz und die Zahl der Personen. Die Ausgaben sind das Trinkgeld, die Gesamtsumme und der Anteil jeder Person. Dazwischen liegen drei kleine Rechnungen. Wenn du das aufschreibst, wird aus einer vagen Aufgabe eine Reihe kleiner, und jede davon kannst du schon.

Schritt 1: die Rechnung

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

Prüf die Zahlen von Hand, bevor du dem Code vertraust: 20 Prozent von 84 sind 16.8, die Summe ist 100.8, und 100.8 geteilt durch 4 ist 25.2. Mit Werten zu testen, deren Ergebnis du schon kennst, ist die Art, Fehler zu finden, etwa einen Satz, der als 20 statt 0.2 eingetippt wurde und das Trinkgeld zu 1680 machen würde.

Schritt 2: Geld richtig anzeigen

Geld zeigt man normalerweise mit zwei Nachkommastellen, und 25.2 sieht unfertig aus. Die Zahlenmethode toFixed(2) gibt einen String mit genau zwei Nachkommastellen zurück, also ergibt each.toFixed(2) "25.20". Denk an die Einheit über Zahlen: Dezimalzahlen können winzige binäre Rundungsfehler tragen. toFixed versteckt auch diese, ein weiterer Grund, es zur Anzeige zu verwenden. Rechne mit Zahlen als Zahlen und ruf toFixed erst ganz am Ende auf, beim Ausgeben.

Schritt 3: in eine Funktion packen

Eine Rechnung, die du vielleicht mit anderen Zahlen wieder ausführst, gehört in eine Funktion. Die Funktion unten gibt ein Objekt zurück, so kann ein einziger Aufruf alle drei Ergebnisse mit klaren Namen liefern. Standardparameter machen den üblichen Fall kurz.

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

Die Zeile return { tip, total, each: total / people }; verwendet eine Kurzschreibweise: tip allein in einem Objekt bedeutet tip: tip, eine Eigenschaft, deren Schlüssel und Variable denselben Namen haben.

FizzBuzz

FizzBuzz ist ein Zählspiel, das zur Programmierübung geworden ist. Zähl von 1 bis 15. Bei Vielfachen von 3 sag Fizz, bei Vielfachen von 5 sag Buzz, bei Vielfachen von beiden sag FizzBuzz und sonst die Zahl. Die Übung braucht eine Schleife, den Restoperator und eine if-Kette, und sie hat eine Falle. Die Zahl 15 ist ein Vielfaches von 3. Prüfst du also zuerst auf 3, gibt 15 Fizz aus und erreicht den FizzBuzz-Zweig nie. Die Lösung ist die Regel aus der if-Einheit: die engste Bedingung zuerst.

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

i % 15 === 0 zu prüfen, funktioniert, weil eine Zahl, die durch 3 und durch 5 teilbar ist, durch 15 teilbar ist. i % 3 === 0 && i % 5 === 0 sagt dasselbe direkter, und beides ist in Ordnung. Wenn deine Version läuft, vergleich ihre Ausgabe Zeile für Zeile mit der erwarteten Liste: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Was du als Nächstes bauen kannst

Du hast jetzt den Kern der Sprache: Werte, Variablen, Operatoren, Entscheidungen, Schleifen, Arrays, Funktionen und Objekte. Fast jedes Programm besteht aus diesen Bausteinen. Gute nächste Schritte: FizzBuzz als Funktion schreiben, die die Obergrenze übernimmt, den Trinkgeldrechner jeden Anteil mit Math.ceil auf ganze Währungseinheiten aufrunden lassen oder eine Liste von Ausgaben in einem Array von Objekten führen und eine Summe pro Kategorie ausgeben. Der JavaScript-Leitfaden von MDN, dem dieser Kurs folgt, macht mit Themen wie Collections, Klassen und der Arbeit mit Webseiten weiter.