Proměnné v JavaScriptu jsou zásadní pro ukládání a zpracování dat. Je důležité chápat, kde jsou tyto proměnné platné a na které oblasti vašeho kódu mohou mít přístup. S ohledem na různé typy proměnných – globální a lokální – je pochopení „Scopes“ (oblast viditelnosti) základním kamenem. Pojďme se tedy ponořit a zjistit, co obnáší globální a lokální proměnné.
Nejdůležitější zjištění
- Globální proměnné jsou dostupné kdekoli v kódu, zatímco lokální proměnné jsou viditelné pouze uvnitř své funkce.
- Definování proměnné mimo funkci ji dělá globální, zatímco definování uvnitř funkce ji činí lokální.
- Pro jasnou a udržovatelnou strukturu kódu je výhodné deklarovat globální proměnné na začátku skriptu.
Pokyny krok za krokem
Definice proměnných a jejich viditelnost
V prvním kroku se podíváme na to, jak můžete vytvořit proměnnou a co znamená její viditelnost. Pokud deklarujete proměnnou mimo jakoukoli funkci, jak je uvedeno v následujícím příkladu, je tato proměnná globální.

Zde vytváříme globální proměnnou nazvanou mojeProměnná.
Tvorba funkcí s lokálními proměnnými
Dalším krokem je vytvoření dvou funkcí. Jednu funkci nazveme lokálníFunkce, ve které vytvoříme lokální proměnnou. Tato proměnná je viditelná pouze uvnitř funkce. Pojďme definovat naši funkci.
V lokálníFunkce vytvoříte lokální proměnnou lokálníV s hodnotou 5 a vypíšete ji.
Volání funkcí
Teď chceme zavolat lokálníFunkce, abychom vypsali číslo 5. Po vyvolání funkce v kódu bude výstup vypadat takto:
Testování viditelnosti lokální proměnné
Teď se pokusíme použít lokální proměnnou lokálníV v jiné funkci. Zjistíte, že to nefunguje. Pojďme provést volání jinéFunkce a uvidíme, co se stane.
Dostaneme chybu, protože proměnná lokálníV je viditelná pouze uvnitř lokálníFunkce.
Kontrola chyb v konzoli
Abychom lépe pochopili, proč chyba nastává, prozkoumáme kód v konzoli. Pravým tlačítkem můžete otevřít DOM prohlížeč a konzoli pro analýzu chyby.

Tam bude uvedeno, že lokálníV je undefined. To posiluje předpoklad, že proměnná mimo svou funkci neexistuje.
Definice globální proměnné
Pojďme nyní vytvořit globální proměnnou, kterou můžeme použít v obou funkcích. Tuto proměnnou nazveme globálníProměnná a přiřadíme jí jednoduchou textovou hodnotu.

Tato globální proměnná může nyní být volána v obou funkcích a výstup bude stejný. Otestujme to.

Definice proměnných a pořadí volání
Je důležité poznamenat, že pořadí definic proměnných a funkcí je rozhodující. Pokud vytvoříte globální proměnnou pod jejím použitím, dojde k problému s undefined.
To je způsobeno tím, že funkce, která potřebuje globální proměnnou, ji vyvolává před jejím definováním. Abyste tomu předešli, je doporučeno definovat globální proměnné na vrcholu kódu.
Více o lokálních proměnných a jejich použití
Teď znovu vytvoříme lokální proměnnou v jiné funkci. Zde ji nazveme lokálníProměnná a nastavíme její hodnotu na 12.
Také tuto lokální proměnnou můžeme používat, ale pouze uvnitř její vlastní funkce, ne v jiných. Pokud použijete obě lokální proměnné, může to vyžadovat trpělivost a pořádek ve vašich programech, v závislosti na složitosti.
Souhrn konceptů
Nyní jste porozuměli základním konceptům o viditelnosti a dosahu proměnných v JavaScriptu. Globální proměnné jsou viditelné pro všechny funkce, zatímco lokální proměnné existují pouze uvnitř své funkce. Je doporučeno definovat globální proměnné na centrálním místě v kódu pro zlepšení čitelnosti a údržby.
Souhrn – Viditelnost proměnných v JavaScriptu
V souhrnu jste se naučili, že způsob, jakým definujete proměnné, má přímý vliv na jejich viditelnost a dosah. Vždy dbejte na to, kam umisťujete své proměnné, abyste se vyhnuli chybám.
Často kladené otázky
Co jsou globální proměnné?Globální proměnné jsou proměnné, které jsou deklarovány mimo funkce a jsou tedy dostupné v celém skriptu.
Co jsou lokální proměnné?Lokální proměnné jsou proměnné, které jsou vytvářeny uvnitř funkce a jsou viditelné pouze uvnitř této funkce.
Jak nejlépe využít globální proměnné?Je doporučeno definovat globální proměnné na začátku skriptu, aby byla zajištěna jasná struktura a lepší udržovatelnost.
Mohu používat lokální proměnné mimo jejich funkci?Ne, lokální proměnné jsou viditelné pouze uvnitř funkce, ve které byly definovány.
Jak řešit chyby undefined?Dávejte pozor na pořadí definice proměnných a funkcí, abyste zajistili, že potřebné proměnné jsou definovány před jejich použitím.