Úloha 4 – Refaktor: push, unshift, splice, slice, concat, join

Úvod do úlohy

Jakmile studenti zvládnou základy polí, jejich vlastnosti a běžné metody, je čas posunout se k reflexi a optimalizaci kódu. V reálných programech se často setkáme s kódem, který zbytečně opakuje stejné kroky – například manuální přidávání prvků přes indexy nebo složité smyčky pro mazání položek. Moderní JavaScript ale nabízí metody, které dokážou tyto postupy nahradit jediným příkazem. Kromě toho můžeme metody řetězit (tzv. method chaining), což zajišťuje, že výsledný kód je nejen kratší, ale i čitelnější a snadněji udržovatelný.

Teorie a principy

• Refaktoring: přepsání existujícího kódu tak, aby byl čistší a efektivnější, aniž bychom změnili jeho funkčnost.

• Řetězení metod (method chaining): pokud metoda vrací nové pole nebo jiný objekt, můžeme hned volat další metodu – bez nutnosti ukládat mezivýsledek do proměnné.

  • Například: pole.slice(1).join(" - ").

• Konzistence kódu: využíváme vestavěné metody (push, pop, splice, slice, concat, join atd.), místo abychom psali složité manuální postupy.

• Efektivita a čitelnost: kratší kód srozumitelně ukazuje záměr – je hned jasné, co se děje, místo aby se čtenář probíral smyčkami a podmínkami.

Praktické příklady kódu

1. Ruční úprava pole vs. použití metody

2. Mazání prvků – nevhodně vs. správně

3. Řetězení metod (method chaining)

4. Refaktoring reálného příkladu

Typické chyby / záludnosti

• Používání indexů místo metod: studenti někdy ručně manipulují s indexy, i když existuje metoda, která udělá totéž.

• Nejasnost u řetězení: příliš dlouhý řetězec metod může být nepřehledný – lepší je někdy rozdělit na několik kroků.

• Záměna metod měnících původní pole (splice, push) s metodami vracejícími nové (slice, concat) – může dojít ke ztrátě dat nebo nečekanému chování.

• Nedodržení konzistence: kombinace ručních zásahů a metod dělá kód chaotickým.

Shrnutí

• Refaktoring znamená zjednodušit a zpřehlednit stávající kód bez změny jeho výsledku.

• Řetězení metod (method chaining) umožňuje provádět více operací v jednom kroku.

• Upřednostňuj vestavěné metody před ruční manipulací s indexy.

• Rozlišuj metody, které mění původní pole, a ty, které vrací nové.

• Cílem je konzistentní, efektivní a snadno udržovatelný kód.

Úloha

Zadání (kontext úlohy):

Máš skript, který „ručně“ přidává položky do seznamu kurzů přes indexy a skládá text pomocí smyčky. Tvým úkolem je kód zjednodušit a zpřehlednit: použij vhodné metody polí a ukázkové řetězení metod.

Cíl úlohy:

Procvičit refaktoring kódu s poli: nahradit ruční manipulaci metodami (push, unshift, splice, slice, concat, join) a použít jednoduché method chaining.

Vstupní podmínky:

Student pracuje pouze s nově vytvořeným souborem script.js.
Používej jen let nebo const (nikdy var).

Požadovaný výstup:

1. Vytvoř pole kurzy se 4 názvy kurzů.

2. Refaktoruj přidání na konec: místo kurzy[kurzy.length] = "..." použij push.

3. Refaktoruj přidání na začátek: přidej jeden kurz pomocí unshift.

4. Refaktoruj text bez smyčky: vytvoř proměnnou seznamText s obsahem všech kurzů oddělených ", " pomocí join(", ") a vypiš ji do konzole.

5. Vlož doprostřed nový kurz pomocí splice (např. na index 2) a vypiš aktuální pole.

6. Řetězení metod: vytvoř ukazka tak, aby obsahovala kurzy od indexu 1 dál, k nim připoj ještě jeden kurz (např. "UX"), a vše spoj do jednoho řetězce s oddělovačem " - " v jednom výrazu:

   • příklad tvaru: kurzy.slice(...).concat([...]).join(" - ")
     Výsledek ulož do ukazka a vypiš do konzole.

7. Vypiš původní kurzy, aby bylo vidět, které kroky je měnily (např. push, unshift, splice) a které vracely nová data (slice, concat, join).

Doplňující pokyny:

• push, unshift, splice mění původní pole.

• slice, concat, join vracejí novou hodnotu (pole nebo řetězec), původní pole nemění.

• Při řetězení si hlídej typy: po join už máš řetězec, nelze na něj volat další polní metodu.

Řešení úlohy

Co je zde splněno

• Vytvořeno pole kurzy se 4 názvy kurzů.

• Refaktor přidání na konec pomocí push() (místo přiřazování přes kurzy.length).

• Přidán kurz na začátek pomocí unshift().

• Vytvořen řetězec seznamText přes join(", ") a vypsán do konzole.

• Doprostřed vložen nový kurz na index 2 přes splice() a vypsán stav pole.

• Ukázáno řetězení metod: slice(...).concat([...]).join(" - ") do proměnné ukazka.

• Na konci vypsáno aktuální pole kurzy, aby bylo vidět, že push/unshift/splice mění pole, zatímco slice/concat/join vrací nová data a původní pole nemění.

Poznámky

• splice mění původní pole (mutace). slice, concat, join vrací novou hodnotu (pole nebo řetězec).

• Po join() už pracuješ s řetězcem – nelze na něj volat další „polní“ metody (např. slice/concat na řetězci z polí nefungují).