FizzBuzz v JavaScriptu

Dobře, možná si říkáte, že mi trošku přeskočilo a že co je vlastně ten FizzBuzz a proč o tom píšu v souvislosti s JavaScriptem. Věc se má tak, že pokud jste se už někdy učili programovat, tak jste možná na internetu v různých tutoriálech narazili právě na FizzBuzz. Ať už FizzBuzz v JavaScriptu nebo v jiném programovacím jazyce. Jde o to, že FizzBuzz je taková milá, jednoduchá matematická hra, úloha, kterou programátoři mají za úkol naprogramovat třeba při pohovoru. Nazvala bych to jako ze série základních dovedností a jak si programátor poradí, když dostane nějaký úkol. Stejně jako jsme spolu řešili třeba palindrom nebo jak otočit string v JavaScriptu.

Co je FizzBuzz?

Je to hra, kdy hráči začínají ve skupince počítat čísla od 1 do 100 (nejčastěji) a čísla, která jsou dělitelná 3 nahrazují slovem “Fizz” a čísla, která jsou dělitelná 5 nahrazují slovem “Buzz”. Jakmile je číslo dělitelné jak 3 tak i 5, tak se vypisuje celé spojení “FizzBuzz”.

Prvních několik čísel v této hře vypadá takto:

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, atd.

Jak FizzBuzz v JavaScriptu naprogramovat?

FizzBuzz, jak jsem se ho naučila já, tak je o procvičení cyklu for a také používání if/else/else if podmínek. Je třeba si uvědomit, že na pořadí vypsání podmínek záleží (to mi při prvním zkoušení tohoto malého prográmku nedošlo a já se divila, proč mi to furt nejde hehe).

Cyklus for

Víme, že budeme potřebovat čísla od 1 do 100, takže je budeme chtít vypsat pomocí cyklu. Konkrétně pomocí cyklu for. Základní syntaxe cyklu for je následující:

for (initialization; condition; increment) {
  // náš blok kódu
}

Zápis cyklu se skládá ze tří částí:

1. initialization – tato část je provedena pouze jednou, na začátku cyklu. Obvykle se zde inicializují proměnné, které budou používány v cyklu.
2. condition – tato část je testována před každou iterací cyklu. Pokud podmínka platí, cyklus pokračuje. Pokud neplatí, cyklus končí.
3. increment – tato část se provádí na konci každé iterace a slouží k inkrementaci nebo dekrementaci hodnoty proměnné, která se používá v podmínce cyklu.

Uvnitř bloku for může být umístěn kód, který se má vykonat v každé iteraci cyklu. Ten se většinou nachází mezi složenými závorkami {}. Jak to bude v případě FizzBuzz programu?

for (let number = 1; number <= 100; number++) {
  // náš blok kódu
}

Inicializovali jsme proměnnou number na hodnotu 1. Přidali jsme podmínku, která dokud platí, tak se cyklus opakuje. V našem případě je podmínkou to, že proměnná number je menší nebo rovna hodnotě 100. A v poslední části pomocí zápisu number++ přidáváme při každém cyklu k proměnné number 1. Tedy přičítáme.

Začínáme tedy na hodnotě 1. Proběhne cyklus. Jedna je menší nebo rovna 100, tím pádem se k 1 přičte 1 a máme 2. Jede další cyklus. Číslo 2 je menší nebo rovno 100, podmínka tedy stále platí. Hodnota se navýší o jednu… a tak pokračuje kód. Podmínka platí, dokud nedojedeme do čísla 100.

Podmínky FizzBuzz

Hra FizzBuzz staví na určitých podmínkách. Proto v bloku kódu uvnitř cyklu for použijeme blok s podmínkami.

V každém kroku cyklu se testují podmínky, které určují, co se má vypsat. Podmínka number % 3 === 0 && number % 5 === 0 znamená, že pokud je number dělitelné třemi a pěti, vypíše se “FizzBuzz”.

Podmínky number % 3 === 0 a number % 5 === 0 znamenají, že pokud je number dělitelné třemi nebo pěti, vypíše se “Fizz” nebo “Buzz” odpovídající podle toho, kterou podmínku splňuje.

Pokud číslo není dělitelné ani třemi ani pěti, vypíše se samotné číslo pomocí příkazu console.log(number).

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

Shrnutí a závěr

Na základě tohoto kódu se člověk naučí používat cyklus for, podmínky if a aritmetické (modulo) a logické (&&) operátory v JavaScriptu. FizzBuzz úloha slouží jako jednoduchý příklad problému, který se řeší pomocí těchto základních stavebních kamenů. Tento kód ukazuje, jak vypsat čísla od 1 do 100 a nahradit některá čísla náhradními řetězci podle pravidel FizzBuzz hry. Kód je dobrým výchozím bodem pro začátečníky, kteří se chtějí naučit základy JavaScriptu a programování obecně.

Tip pro pokročilé

Kód jako takový můžeme i zjednodušit pomocí ternárního operátoru a vypadal by pak třeba takto:

for (let number = 1; number <= 100; number++) {
    const isFizz = number % 3 === 0;
    const isBuzz = number % 5 === 0;

    console.log(isFizz && isBuzz ? "FizzBuzz" : isFizz ? "Fizz" : isBuzz ? "Buzz" : number);
}

Tady se používají proměnné isFizz a isBuzz k uložení podmínek, které byly dříve v podmínkách if. Ternární operátor se použije k výběru správného řetězce pro každé číslo, a to pomocí logických operátorů && a ? :. Kód je tím pádem kratší a pro někoho může být i přehlednější.

Další možností je vynechání proměnné a zapsání do jednoho console.log s použitím více ternárních operátorů:

for (let number = 1; number <= 100; number++) {
    console.log(number % 3 === 0 && number % 5 === 0 ? "FizzBuzz" : number % 3 === 0 ? "Fizz" : number % 5 === 0 ? "Buzz" : number);
  }

Doufám, že po přečtení tohoto článku už víte, jak naprogramovat FizzBuzz v JavaScriptu :).