Úloha 4 – Formátovaný výstup z dat proměnných

Úvod do úlohy

V reálném kódu se texty skládají neustále: od krátkých hlášek po vícerořádkové šablony e-mailů. Když se ale řetězce lepí „po kouscích“ pomocí + a přimíchají se náhodné mezery, \n a proměnné, kód rychle ztrácí čitelnost. Cílem této sady je naučit se rozpoznat zbytečné konkatenace, nahradit je šablonovými literály (`...${...}...`), a přidat komentáře, které vysvětlí záměr a použitou konstrukci. Výsledkem bude čitelnější, kratší a snáz udržovatelný kód – i u složitějších textových transformací.

Teorie a principy

1. Kdy je konkatenace (+) zbytečná

   • Pokud skládáš 3 a více částí nebo vytváříš vícerořádkové texty, + výrazně zhoršuje čitelnost.

   • Typický zápach kódu: spousta + " " +, + "\n" +, opakované přetypování čísel na text.

2. Proč šablonové literály

   • Zápis pomocí backticků `...` umožňuje interpolaci proměnných ${promenna} a přirozený víceřádkový text bez \n.

   • Často nahradí celou „zeď“ plusů jednou přehlednou šablonou.

3. Komentuj záměr, ne samozřejmost

   • U delších šablon přidej krátké komentáře nad blokem: co se vkládá a proč.

   • U složitějších řetězců rozděl text do logických sekcí (hlavička, tělo, poznámka).

4. Pořadí transformací a method chaining

   • Šablonový literál může vzniknout až po normalizaci vstupů (např. trim(), toLowerCase()).

   • Krátké řetězení metod je v pořádku: vstup.trim().replace(/\s+/g, " ").

5. Testování a ošetření prázdných hodnot

   • Před skládáním šablony ošetři null/undefined.

   • Pro začátečníky: piš podmínky explicitně, např. if (text == undefined) { ... }.

Praktické příklady kódu

1) „Před a po“ – zkrácení a zpřehlednění

2) Refaktoring – úklid zbytečných operací a srozumitelné komentáře

3) Mini aplikace (HTML + CSS + JS) – generování přehledu objednávky

Typické chyby / záludnosti

• „Plusové“ salámy

  • Dlouhé řetězce poslepované + jsou křehké: snadno chybí mezera, \n nebo se připojí špatná proměnná.

• Míchání stylů

  • V jednom bloku nepoužívej napůl + a napůl `...` bez důvodu. Zvol jeden styl a drž se ho.

• Nevysvětlené bloky textu

  • Dlouhé šablony bez komentáře matou. Krátký komentář nad šablonou výrazně pomáhá čtenáři kódu.

• Zbytečné transformace před interpolací

  • Nevolej opakovaně trim() nebo toLowerCase() na stejné hodnotě. Proveď je jednou, ulož do proměnné a pak interpoluj.

• Zapomenuté ošetření undefined/null

  • Před skládáním textu vždy zkontroluj, že data existují. Piš podmínky explicitně: if (hodnota == undefined).

Shrnutí

• Najdi a odstraň zbytečné konkatenace – nahraď je šablonovými literály pro přehlednost a méně chyb.

• Interpolace ${...} zjednodušuje vkládání proměnných a snižuje riziko ztracených mezer či \n.

• Normalizuj vstupy (např. trim(), replace()), až poté sestav finální šablonu.

• Komentuj záměr a strukturu delších textů (sekce, důvod volby konstrukcí).

• Piš explicitní podmínky a ošetři chybějící data dříve, než začneš řetězec skládat.

Úloha

Zadání (kontext úlohy):

Máš poskládat krátké textové potvrzení rezervace do kina z několika proměnných. Původní kód je psaný „na plusy“. Tvým úkolem je nahradit zbytečné konkatenace šablonovým literálem, případně vstupy lehce očistit a přidat stručný komentář vysvětlující, co se skládá a proč.

Cíl úlohy:

Procvičit nahrazení konkatenace (+) šablonovým literálem (`...${...}...`), čitelný víceřádkový výstup a krátký komentář nad blokem s výslednou šablonou.

Vstupní podmínky:

Pracuj s proměnnými jmeno, film, sedadlo, cas. Hodnoty mohou obsahovat zbytečné mezery na okrajích. Pokud některá hodnota chybí (undefined), máš vrátit jednoduché chybové hlášení.

Požadovaný výstup:

1. Zkontroluj vstupy: pokud jmeno == undefined nebo film == undefined nebo sedadlo == undefined nebo cas == undefined, ulož do proměnné vystup text Neúplná rezervace.

2. Jinak (data jsou vyplněna) případně očisti jmeno a film pomocí trim() (a volitelně slouč více mezer na jednu).

3. Sestav víceřádkový text do proměnné vystup výhradně pomocí šablonového literálu (žádné +). Text musí obsahovat:

   • řádek s nadpisem (např. „Potvrzení rezervace“)

   • řádek se jménem a názvem filmu

   • řádek se sedadlem a časem

4. Před šablonou přidej jeden krátký komentář vysvětlující, co se do šablony vkládá.

5. Výsledek vypiš pomocí console.log(vystup).

Doplňující pokyny:

• Používej pouze let nebo const (nikdy var).

• V podmínkách porovnávej explicitně (např. if (jmeno == undefined); ekvivalent je if (!jmeno), ale ten teď nepoužívej).

• Nemíchej + a šablonové literály v jednom výstupu. Zvol literály a drž se jich.

• Komentuj záměr nad blokem se šablonou, ne samozřejmosti uvnitř.

Řešení úlohy

Co je zde splněno

• Ověření všech vstupů (== undefined).

• Očištění hodnot pomocí .trim().

• Využití šablonového literálu pro vícřádkový a přehledný text.

• Výsledek se vypíše do konzole pomocí console.log().

• V kódu je krátký komentář vysvětlující význam šablony.

Vylepšení oproti začátečnické verzi

• Použita ternární podmínka pro kompaktní zápis.

• Odstraněny nadbytečné mezery i uvnitř textu pomocí regulárního výrazu.

• Použití const místo let pro neměnné hodnoty.

• Moderní a stručný styl bez ztráty čitelnosti.

Poznámky

• Použití trim() odstraní mezery pouze na začátku a konci textu.

• Pokud by bylo potřeba odstranit vícenásobné mezery uvnitř, lze přidat:
  jmeno = jmeno.replace(/\s+/g, " ");