Úloha 4 – Hoisting: deklarace vs. výraz funkce

Úvod do úlohy

Jedním z méně zřejmých principů JavaScriptu je hoisting – tedy „zvedání“ deklarací proměnných a funkcí na začátek jejich kontextu (skriptu nebo funkce). To může vést k překvapivým situacím, kdy některé funkce můžeme volat ještě předtím, než je v kódu napíšeme, zatímco jiné způsobí chybu. Porozumění hoistingu je důležité pro psaní předvídatelného kódu a pomůže studentům vyhnout se chybám při strukturování skriptů.

Teorie a principy

• Funkční deklarace (Function Declaration)
  

  
  

  • Celá definice funkce se při načítání kódu „zvedne“ na začátek.

  • Díky tomu lze tuto funkci volat i před řádkem, kde je zapsaná.

• Funkční výraz (Function Expression)
  

  
  

  • Dojde pouze k hoistingu proměnné (const mojeFunkce), ale nikoli přiřazené funkce.

  • Hodnota je přiřazena až v momentě vykonávání tohoto řádku.

  • Pokud funkci zavoláme před definicí, dostaneme chybu.

• Praktický dopad:

  • Pokud víme, že funkci budeme používat napříč celým souborem, je vhodné použít deklaraci.

  • Pokud funkci potřebujeme jen na omezeném místě (např. v rámci nějaké proměnné nebo callbacku), volíme výraz.

Praktické příklady kódu

1. Funkční deklarace – funguje i před definicí

2. Funkční výraz – volání před definicí způsobí chybu

3. Správné použití funkčního výrazu

Typické chyby / záludnosti

• Volání funkce před definicí u funkčního výrazu – studenti si často myslí, že funguje stejně jako deklarace.

• Záměna deklarace a výrazu – špatně rozeznají rozdíl v syntaxi.

• Předpoklad, že všechny proměnné se chovají stejně – u var probíhá hoisting jinak než u let a const.

• Neočekávané undefined – u funkčních výrazů se proměnná sice „zvedne“, ale bez hodnoty.

Shrnutí – hlavní body k zapamatování

• Deklarace funkcí se zvedají celé – lze je volat před definicí.

• Funkční výrazy se hoistují jen jako proměnné (let, const, var), ale funkce je dostupná až po přiřazení.

• Rozdíl v chování je zásadní pro správné uspořádání kódu.

• Pochopení hoistingu pomůže předejít chybám „is not a function“.

Úloha

Zadání (kontext úlohy):

Máš malý skript, kde kombinuješ dvě různé funkce – jednu deklarovanou a druhou jako výraz. Cílem je zjistit, která bude fungovat při volání hned na začátku programu a která ne.

Cíl úlohy:

Student si procvičí praktické pozorování chování hoistingu při více funkcích v jednom souboru.

Vstupní podmínky:

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

Požadovaný výstup:

1. Na začátek souboru napiš volání dvou funkcí: infoDeklarace() a infoVyraz().

2. Dole v souboru definuj:

   • funkci infoDeklarace pomocí funkční deklarace,

   • funkci infoVyraz pomocí funkčního výrazu.

3. Zajisti, aby každá funkce vypsala do konzole jiný text (např. „Jsem deklarace“ / „Jsem výraz“).

4. Sleduj, co se v konzoli stane při spuštění.

Doplňující pokyny:

• Funkce volané nahoře uvidíš v jiné fázi než jsou zapsány – to je přesně princip hoistingu.

• Pokud dostaneš chybu u infoVyraz(), nevadí – je to očekávaný výsledek.

• Po opravě (zavolání výrazu až po definici) ověř, že obě funkce fungují.

Řešení úlohy

Co je zde splněno

• nahoře jsou zavolány dvě funkce,

• infoDeklarace() funguje (funkční deklarace je „hoistovaná“ – prohlížeč si ji načte před spuštěním kódu),

• infoVyraz() vyvolá chybu, protože výraz není hoistovaný stejným způsobem,

• obě funkce mají jiný text výstupu.

Poznámky

• Pokud infoVyraz(); přesuneš až pod definici, obě funkce budou fungovat:

• Tohle je ukázka rozdílu mezi funkční deklarací a funkčním výrazem.