Ú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.