Úvod do úlohy

Refaktoring podmínek je jeden z nejrychlejších způsobů, jak zlepšit čitelnost a spolehlivost kódu. V praxi se často hromadí dlouhé řetězce if větví, opakované testy a drobné nesrovnalosti, které znesnadňují údržbu a vedou k chybám. Cílem tohoto bloku je naučit se rozpoznat problematické podmínky, rozsekat je na menší srozumitelné části, odstranit duplicity a sjednotit styl tak, aby se kód dal snadno číst a rozšiřovat. U velmi jednoduchých rozhodnutí si také ukážeme, kdy by šlo uvažovat o zkráceném zápisu (ternární operátor) – v našich ukázkách pro začátečníky jej nepoužijeme a vždy ukážeme ekvivalentní, přehledný if–else.

Teorie a principy

• Rozdělení složité logiky: Dlouhý logický výraz rozdělte do pojmenovaných mezikroků (pomocných proměnných), které jasně sdělí „co testujete“.

• Eliminace duplicit: Opakující se části (stejné výpočty, stejné porovnání) vytáhněte nad podmínky do jedné proměnné a znovu použijte.

• Pořadí testů: Testujte od nejčastějších a nejlevnějších kontrol k nejvzácnějším a nejnákladnějším.

• Záchytná větev: else (nebo poslední else if) použijte jako jasnou výchozí (fallback) variantu.

• Jedno místo pravdy: Pokud více větví dělá tentýž krok, zkuste ho provést až po rozhodnutí (nebo naopak před ním), aby nebyl ve více kopiích.

• Jednoduché rozhodnutí ≠ dlouhý blok: Když větev jen „vybere text“ či „přepne CSS třídu“, stačí krátký if–else. (Ternární operátor by se sem hodil, ale v tomto kurzu pro začátečníky zůstáváme u standardního if–else.)

Poznámka k syntaxi v našem kurzu:

• V podmínkách vždy porovnáváme explicitně, např. if (isValid == true) a pro negaci if (isValid == false).

• Pro rovnost typu i hodnoty preferujeme === a pro nerovnost !==.

• Nepoužíváme šipkové funkce ani ternární operátor; v komentáři občas uvedeme jejich ekvivalent pro představu.

Praktické příklady kódu

1) Refaktoring dlouhého výrazu do pojmenovaných kroků (JS)

Původní kód je těžko čitelný – mnoho podmínek v jedné řádce a duplicity:

Refaktorujeme do menších kroků s názvy, které čtenáři napoví záměr:

Komentář: Logika je stejná, ale nyní je jasně čitelná. Když se požadavky změní (např. věková hranice), upravíme jediný výraz.

2) Odstranění duplicitních větví (JS)

Původní kód opakuje stejný „post-processing“ ve více větvích:

Refaktor: rozhodneme jen text a zobrazení provedeme jednou:

3) Přehlednější řazení podmínek a „záchytná“ větev (JS + HTML/CSS)

Původně: nepraktické pořadí a dvojí nastavení třídy.

Refaktor: jednou přiřadíme text i třídu až po rozhodnutí (méně duplicit):

4) Kdy by šel použít zkrácený zápis (ale u nás zůstaneme u if–else)

Někdy jen volíme jeden z krátkých textů. V základním kurzu zůstaneme u if–else:

Typické chyby / záludnosti

• Přílišné zanoření: Místo if uvnitř else často stačí else if.

• Dlouhé nepopsané výrazy: Bez pojmenovaných mezikroků je záměr nejasný. Pomozte si proměnnými jako jePlnolety.

• Duplicity po větvích: Stejnou operaci (např. alert, změna třídy) dělat jednou mimo větvení.

• Nesprávné pořadí testů: První splněná podmínka zastaví vyhodnocování; seřaďte větve od nejpřesnějších k obecnějším.

• Skryté vedlejší efekty: V podmínce pouze testujte; nepřepisujte proměnné, které pak ovlivní další větve.

• Záměna = a ===: = přiřazuje, === porovnává typ i hodnotu.

• Nedodržení explicitní negace: V tomto kurzu pište if (podminka == false) (ekvivalent if (!podminka) uvádějte nejvýše do komentáře).

Shrnutí

• Rozdělte složité výrazy do pojmenovaných pomocných proměnných.

• Odstraňte duplicity – společné kroky provádějte jednou.

• Řaďte podmínky od přesných k obecným, dbejte na záchytnou větev else.

• Vždy provádějte explicitní porovnání (===, !==, == true, == false).

• Krátké volby lze zapsat stručně; v tomto kurzu však kvůli čitelnosti zůstáváme u if–else.

Úloha

Zadání (kontext úlohy):

Máš kód, který rozhoduje zprávu o dopravě podle hodnoty objednávky, členství VIP a volby osobního odběru. Kód je zbytečně zanořený a opakuje stejné akce. Tvým úkolem je kód přepsat (refaktorovat) tak, aby byl čitelný a bez duplicit.

Cíl úlohy:

Rozdělit složitou podmínku do pojmenovaných mezikroků, odstranit duplicity a mít jedno místo pravdy pro zobrazení výsledku (jedno volání alert).

Vstupní podmínky:

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

• Nepřidávej knihovny ani další soubory.

Požadovaný výstup:

1. Vytvoř pomocné proměnné (např.):

   • maNarokNaDopravuZdarma – platí, když celkem >= 1000 nebo jeVIP == true.

   • osobniOdber – kopie hodnoty chceOsobniOdber (pro čitelný název).

2. Rozhodnutí napiš pomocí if – else if – else bez vnořování.

3. V každé větvi pouze nastav text do proměnné zprava (např. "Doprava zdarma").

4. alert(zprava) zavolej právě jednou až po rozhodnutí.

5. V podmínkách používej explicitní porovnání (== true, == false) a pro čísla/řetězce === / !==.

6. Chování programu:

   • Pokud osobniOdber == true → zprava = "Osobní odběr zdarma"

   • Jinak pokud maNarokNaDopravuZdarma == true → zprava = "Doprava zdarma"

   • Jinak → zprava = "Doprava 99 Kč"

Řešení úlohy

Co je zde splněno

• Rozděleny podmínky do pojmenovaných mezikroků (maNarokNaDopravuZdarma, osobniOdber).

• Žádné zanořené podmínky – struktura if – else if – else je přehledná.

• Každá větev pouze nastavuje text do proměnné zprava.

• Volání alert() je jen jednou po vyhodnocení.

• Použito explicitní porovnání == true dle zadání.

Poznámky

• celkem >= 1000 musí být vyhodnocováno pomocí >=, nikoliv >, aby přesně odpovídalo zadání.

• Při použití hodnoty chceOsobniOdber jako kopie do osobniOdber se zlepšuje srozumitelnost kódu.