Úvod do úlohy

V této závěrečné části se naučíte refaktorovat existující větvení tak, aby bylo čitelné, udržovatelné a bez skrytých chyb. Někdy je dlouhý řetězec else if přehlednější převést na switch, jindy je naopak lepší složitý switch nahradit několika logickými výrazy v if–else. Cílem je umět si položit správné otázky: „Rozhoduji podle jedné hodnoty (hodí se switch) nebo kombinuji více podmínek (hodí se if–else)?“, „Je zápis konzistentní a doplněný komentáři?“, „Nemám zbytečné propadávání mezi větvemi?“.

Teorie a principy

• Kdy zvolit switch: Rozhodujete podle jednoho výrazu (např. kód stavu, typ akce, název dne) a každá větev je nezávislá. switch porovnává hodnoty striktně (jako ===), a je tím pádem přesný.

• Kdy zvolit if–else: Potřebujete kombinovat více logických testů (např. rozsahy čísel, vícenásobné podmínky s && a ||). if–else je pružnější a čitelnější.

• Konzistence a komentáře: Každou větev krátce popište – co přesně řeší. Usnadní to čtení i budoucí změny.

• Bezpečné ukončování větví: U switch používejte break na konci každého case, pokud záměrně nechcete propadávat.

• Jedno místo pravdy: Společné kroky provádějte ideálně jednou mimo větvení (např. přiřazení textu do DOM až po výběru výsledku).

• Datové typy: U switch si hlídejte typy (příchod z formuláře bývá řetězec).

• Styl v tomto kurzu: Bez var, pouze let a const. V podmínkách explicitně porovnáváme: if (podminka == true), pro negaci if (podminka == false) (ekvivalent !podminka lze uvést v komentáři). Nepoužíváme ternární operátor.

Praktické příklady kódu

1) Dlouhé else if → přehledný switch

Původní kód: volba zprávy podle kódu. Mnoho else if začíná být nepřehledných.

Refaktor na switch – rozhodujeme podle jedné hodnoty kod, větve jsou nezávislé:

2) Zbytečně složitý switch → jasné if–else s logikou

Původní switch se snaží řešit rozsahy bodů. To je nepraktické, protože switch testuje na konkrétní hodnoty.

Refaktor na if–else: pro rozsahy je to přirozenější a čitelné.

3) Jednotné místo pro výstup (HTML/JS) + komentáře větví

4) Kontrolní seznam pro refaktoring větvení (mini checklist)

1. Rozhoduji podle jedné hodnoty? → zvažte switch.

2. Kombinuji více výrazů (rozsahy, &&, ||)? → zvažte if–else.

3. Je kód bez duplicit? Společné kroky proveďte jednou mimo větvení.

4. Jsou všude komentáře k větvím? Stručně vysvětlete záměr každé větve.

5. U switch je všude break? Vyhněte se nechtěnému propadávání.

6. Je zachována typová shoda? switch porovnává jako ===.

7. Je pořadí testů správné? Od nejpřesnějších k obecným.

Typické chyby / záludnosti

• switch(true) hack: Svádí k psaní rozsahů v switch, ale zhoršuje čitelnost. Pro rozsahy použijte if–else.

• Chybějící break: Neplánované propadávání mezi větvemi.

• Míchání typů: Vstupy z formuláře jsou řetězce; switch pak nemusí najít shodu s číslem.

• Duplicitní kód ve větvích: Sloučit do jednoho společného kroku mimo větvení.

• Nekonzistentní styl: V kurzu nepoužíváme var, ternární operátor ani zkrácené formy negace; v if explicitně porovnáváme (== true, == false).

Shrnutí

• Refaktoring vybírejte podle povahy rozhodování: jedna hodnota → switch, více logických podmínek → if–else.

• Udržujte konzistentní styl, přidávejte stručné komentáře k větvím.

• Ve switch vždy kontrolujte break a uvažte default jako záchytnou větev.

• Společné kroky provádějte jednou mimo větvení (lepší čitelnost, méně chyb).

• Hlídáte si typovou shodu (u switch jako ===) a vyvarujte se duplicit i nechtěných průběhů.

Úloha

Zadání (kontext úlohy):

Tvůj e-shop zobrazuje zákazníkovi informaci podle aktuálního stavu objednávky. Stav je vždy uložený v proměnné stav jako řetězec ("nova", "zabalena", "odeslana", "dorucena", "zrusena"). Tvým úkolem je kód refaktorovat:

• Nejprve je ukázána nepřehledná verze s if / else if.

• Tvým úkolem je přepsat ji na přehledný switch, doplnit break a default, a přesunout společný krok mimo větvení.

Cíl úlohy

Procvičit rozhodování mezi switch a if–else, správné použití break a default, a princip „jedno místo pravdy“.

Vstupní podmínky:

• Student pracuje pouze s nově vytvořeným souborem script.js.

• Používej pouze let nebo const.

• V podmínkách explicitně porovnávej (===, == true, == false).

Požadovaný výstup:

• Pokud stav === "nova" → zprava = "Objednávka přijata"

• Pokud stav === "zabalena" → zprava = "Objednávka je zabalena"

• Pokud stav === "odeslana" → zprava = "Objednávka je na cestě"

• Pokud stav === "dorucena" → zprava = "Objednávka byla doručena"

• Pokud stav === "zrusena" → zprava = "Objednávka byla zrušena"

• Jinak → zprava = "Neznámý stav"

Společný krok: výsledek zobrazit jen jednou pomocí alert(zprava).

Doplňující pokyny:

• Uvědom si, proč je zde switch vhodnější než dlouhý řetězec else if: rozhodujeme jen podle jedné hodnoty (stav).

• Vyzkoušej změnit hodnotu stav na různé varianty.

• Dbej na správné umístění break, aby nedocházelo k propadávání.

Řešení úlohy

Co je zde splněno

• Použita proměnná stav jako řetězec.

• Rozhodování provedeno pomocí switch místo dlouhého řetězce if – else if.

• Každý case je zakončen break, takže nedochází k propadávání.

• Přidán default pro neznámé stavy.

• Společný krok (alert(zprava)) je mimo větvení → přehlednější kód.

Poznámky

• switch je zde vhodnější než if – else, protože se vždy rozhoduje jen podle jediné proměnné.

• Pokud se později přidá nový stav, stačí doplnit další case.