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