Úloha 3 – Spread operátor v praxi: kopie, spojování, slice

Úvod do úlohy

Spread operátor (...) patří k moderním a velmi praktickým nástrojům jazyka JavaScript. Umožňuje „rozbalit“ obsah pole (nebo jiné iterovatelné struktury) tak, jako bychom jednotlivé prvky vypsali ručně. Díky tomu dokážeme jednoduše vytvářet kopie polí, spojovat je dohromady nebo elegantně měnit jejich části. Kód se tím stává kratším, čitelnějším a zároveň bezpečnějším, protože se vyhneme ručnímu přepisování prvků.

Teorie a principy

• Spread operátor ...:

  • Rozloží pole na jeho prvky.

  • Používá se uvnitř [] pro tvorbu nových polí nebo u funkcí jako argument.

• Kopie pole: const novePole = [...puvodniPole]; vytvoří novou kopii, která není propojena s původním polem (mělká kopie).

• Spojování polí: Místo concat() můžeme přímo napsat [...pole1, ...pole2].

• Kombinace se slice(): Pomocí slice() si vybereme část pole a pak ji rozbalíme do nového pole společně s jinými prvky.

• Omezení – mělká kopie: pokud pole obsahuje objekty nebo vnořená pole, spread zkopíruje pouze odkazy, nikoli celé struktury.

Praktické příklady kódu

1. Kopírování pole

2. Spojování polí

3. Kombinace se slice()

4. Ukázka mělké kopie

Typické chyby / záludnosti

• Záměna se zkratkou: ... funguje jen při vytváření nových polí nebo volání funkcí, samostatně nedává smysl.

• Očekávání hluboké kopie: spread kopíruje jen odkazy na objekty uvnitř pole, takže u složitějších dat není nezávislý.

• Zapomenutí na hranaté závorky: ...pole bez [] nemá význam.

• Příliš složité zápisy: i když lze spread řetězit, někdy je lepší kód rozdělit na více kroků pro čitelnost.

Shrnutí

• Spread operátor ... rozbaluje prvky pole.

• Umožňuje rychlé kopírování a spojování polí.

• Ve spojení se slice() dokáže elegantně vytvořit nové varianty pole.

• Výsledný kód je kratší a přehlednější než ruční manipulace.

• Spread vytváří pouze mělkou kopii – u vnořených struktur to může vést k nečekanému chování.

Úloha

Zadání (kontext úlohy):

Máš seznam programovacích jazyků. Potřebuješ vytvořit jeho kopii, spojit jej s dalším seznamem, vynechat některé prvky a přidat nové. To vše provedeš pomocí spread operátoru ....

Cíl úlohy:

Procvičit použití spread operátoru pro:

• vytvoření kopie pole,

• spojování více polí,

• kombinaci se slice() pro úpravy pole.

Vstupní podmínky:

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

Požadovaný výstup:

1. Vytvoř pole frontend s hodnotami ["HTML", "CSS", "JavaScript"].

2. Pomocí spreadu vytvoř kopii tohoto pole do kopie a přidej do něj nový jazyk "TypeScript". Vypiš obě pole do konzole (aby bylo vidět, že původní se nezměnilo).

3. Vytvoř pole backend s hodnotami ["Node.js", "SQL"] a spoj ho s frontend do nového pole fullstack pomocí spreadu. Vypiš do konzole.

4. Pomocí slice() a spreadu vytvoř nové pole moderni, kde z frontend vynecháš "HTML" a přidáš "React".

5. Vypiš všechna pole do konzole, aby bylo jasné, které se změnilo a které ne.

Doplňující pokyny:

• Spread vždy rozbalujeme do hranatých závorek [...].

• Původní pole zůstává beze změny, pokud používáš slice nebo kopii pomocí spreadu.

• Dávej pozor na rozdíl mezi mělkou a hlubokou kopií – pro tuto úlohu pracujeme jen s jednoduchými řetězci, takže to nevadí.

Řešení úlohy

Co je zde splněno

• Vytvořeno pole frontend se 3 hodnotami.

• Pomocí spreadu vytvořena kopie + přidán jazyk „TypeScript“.

• Spojeno pole frontend a backend do fullstack pomocí spreadu.

• Pomocí slice() a spreadu vytvořeno nové pole moderni bez „HTML“ a s přidaným „React“.

• Vypsána všechna pole → je vidět, že frontend zůstalo beze změny, měnila se jen nová pole.

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

• Použití šablonových řetězců a join(" | ") pro přehlednější výpis.

• Čistší kód, který zvýrazňuje rozdíly mezi poli.

• Ukázka elegantního využití spreadu v různých kombinacích.