Úloha 3 – Rozsah platnosti proměnných (scope)

Úvod do úlohy

V předchozí části jsme se seznámili s rozdíly mezi var, let a const. Aby však studenti tyto znalosti skutečně pochopili, je nutné je propojit s klíčovým konceptem jazyka JavaScript – rozsahem platnosti proměnných (scope). Scope určuje, kde je proměnná dostupná a odkud ji lze použít. Pokud tento princip nepochopíme, snadno narazíme na chyby, kdy proměnná „není definovaná“ nebo se naopak neočekávaně přepíše.

Teorie a principy

1. Globální rozsah (global scope)

   • Proměnná je dostupná odkudkoliv v kódu.

   • Vytvoří se, když ji deklarujeme mimo funkci nebo blok.

   • Nadměrné používání globálních proměnných se nedoporučuje – mohou kolidovat s jinými částmi kódu.

2. Funkční rozsah (function scope)

   • Typický pro proměnné deklarované pomocí var uvnitř funkce.

   • Proměnná existuje pouze v těle funkce, mimo něj není dostupná.

3. Blokový rozsah (block scope)

   • Platí pro let a const.

   • Proměnná je dostupná pouze uvnitř bloku { ... }, kde byla deklarována (např. v if, for).

   • Mimo blok není viditelná.

Praktické příklady kódu

Globální rozsah

Funkční rozsah s var

Blokový rozsah s let a const

Rozdíl mezi var a let v bloku

Typické chyby / záludnosti

• Neočekávané přepsání proměnné při použití var – protože ignoruje blokový rozsah.

• Pokus o přístup k proměnné mimo její scope – vede k chybě ReferenceError.

• Zbytečné používání globálních proměnných – hrozí kolize a nejasný tok dat.

• Nesprávné pochopení rozdílu mezi funkcí a blokem – funkční scope (var) vs. blokový scope (let, const).

Shrnutí

• Globální scope: proměnná je dostupná odkudkoli.

• Funkční scope: proměnná je dostupná pouze uvnitř funkce (typicky var).

• Blokový scope: proměnná je dostupná pouze uvnitř bloku { ... } (let, const).

• Dnes se doporučuje používat hlavně let a const, které respektují blokový rozsah a předcházejí neočekávaným chybám.

Úloha

Zadání (kontext úlohy)

Vytvoř funkci testScope(), ve které deklaruješ proměnnou lokalni pomocí let.
Uvnitř funkce ji vypiš do konzole.
Poté se pokus vypsat stejnou proměnnou mimo funkci.

Cíl úlohy

• Prověříš si znalost rozsahů proměnných (scope).

• Uvidíš rozdíl mezi viditelností proměnné uvnitř a vně funkce.

• Zjistíš chování proměnných deklarovaných v blocích (if, for, …).

Vstupní podmínky

• Máš k dispozici HTML dokument propojený s prázdným souborem script.js.

• Úpravy provádíš pouze v souboru script.js.

Požadovaný výstup

• Uvnitř funkce se do konzole správně vypíše hodnota proměnné.

• Při pokusu o výpis mimo funkci se zobrazí chyba: ReferenceError: lokalni is not defined

Doplňující pokyny

• Vyzkoušej také deklaraci proměnné uvnitř bloku if a ověř, zda je dostupná mimo tento blok.

• Pamatuj, že let a const mají blokový scope, zatímco var má funkční scope.

Soubor

Odkaz na js soubor

Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

• Funkce testScope() deklaruje proměnnou lokalni pomocí let.

• Hodnota je správně vypsána uvnitř funkce.

• Při pokusu o výpis mimo funkci vzniká chyba ReferenceError.

• Navíc je ukázáno chování proměnné uvnitř bloku if.

Poznámky

• let a const jsou vázané na blok, což zvyšuje bezpečnost a předvídatelnost kódu.

• var má pouze funkční scope, takže se někdy chová neočekávaně (proměnná je přístupná i mimo blok if).

• Typická chyba studentů: myslí si, že proměnná z if existuje i mimo něj – u let a const to neplatí.