Aufgabe auf ../../while-loops.html

FizzBuzz

Geben Sie die Zahlen von 1 bis 100 aus: Dabei sollen alle Vielfachen von 3 zusätzlich Fizz und alle Vielfachen von 5 Buzz ausgeben und am Ende auch noch FizzBuzz bei allen Vielfachen von 3 und 5. Lösen Sie die Aufgabe mit einer for-Schleife und mit einer while-Schleife.

Tipp: Der Modulo-Operator % prüft, ob eine Zahl ein Vielfaches einer Zahl ist.

Für die wirklich ambitionierten Programmierer: Kann die Aufgabe mit einer einzigen Zeile gelöst werden?

Lösung

Den Anfang macht die Lösung mit der for-Schleife.

for (let i=1; i<=100; i++) {
   console.log (i)
}

Ob i durch 3 teilbar ist, prüft der Modulo-Operator mit i % 3 === 0, ob i durch 5 teilbar ist mit i % 5 === 0 noch vor der Konsolen-Ausgabe.

for (let i=1; i<=100; i++) {
   if (i % 3 === 0) console.log (`${i} Fizz`)
   else if (i % 5 === 0) console.log (`${i} Buzz`)
   else console.log (i);
}

Die Abfrage, ob i ein Vielfaches von 3 und 5 ist – also von 15, muss an den Anfang der Abfrage, denn sonst würde Fizz oder Buzz ausgegeben und der Zweig i % 15 würde niemals angesteuert.

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

Lösung mit der while-Schleife

Für die while-Schleife muss die Laufvariable vor dem while definiert werden. Die Bedingung ist dieselbe wie in der for-Schleife.

let i = 1;
while (i <= 100) {
}

Die Anweisungen aus der for-Schleife können direkt kopiert werden, aber ganz wichtig: Nicht vergessen, die Laufvariable bei jedem Durchlauf um 1 zu erhöhen!

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

Ternary

Die Ternary-Lösung beginnt mit einer for-Anweisung, die aber keine Inkrementierung aufführt. Das Semikolon nach i < 100; ist daher zwingend erforderlich.

for (let i = 0; i < 100;)

Der Ternary-Operator kann mit einem Plus-Zeichen gleich zweimal eingesetzt werden. Die Variable i wird im ersten Ternary erhöht.

            Bedingung                Bedingung
                │      true  false       │    true  false
            ┌───┴──┐    │      │       ┌─┴─┐   │      │
            ▼      ▼    ▼      ▼       ▼   ▼   ▼      ▼
console.log((++i % 3 ? '' : 'Fizz') + (i % 5 ? '' : 'Buzz') || i)
                     ▲              ▲        ▲               ▲
                     │              |        |               |
                     if             |        if             oder
                                    |
                              Konkatenation

Der erste Ternary testet, ob ++i%3. Jeder andere Wert, der nicht 0 ist, wird nicht als falsy betrachtet. Dann wird '' zurückgegeben, sonst 'Fizz'. Dieselbe Logik wird auf 5 angewendet. Das Plus-Zeichen fügt die Ergebnisse der beiden Ternaries aneinander, sodass »FizzBuzz« entsteht, wenn beiden Ausdrücke nicht falsy sind. Ansonsten tritt der OR-Operator || am Ende in Kraft und die Zahl wird ausgegeben.

Fingernägel runtergekaut? Knoten im Kopf? Nachvollziehen allein bringt schon die volle Punktzahl.

for (let i = 0; i < 100;) 
   console.log ("Ternary", (++i % 3 ? '' : 'Fizz') + 
                           (i % 5 ? '' : 'Buzz') || i);

Quelle: https://flexiple.com/javascript/fizzbuzz-javascript/