Úloha 2 – Rozdíly mezi var, let a const

Úvod k úloze

V JavaScriptu existuje více způsobů, jak vytvořit proměnnou – historické var, a moderní let a const, které přinesla specifikace ES6 (2015). Na první pohled se mohou chovat podobně, ale rozdíly mezi nimi jsou zásadní. Porozumění těmto rozdílům je klíčové pro psaní bezpečného, čitelného a předvídatelného kódu. Studenti si tak uvědomí, kdy lze hodnotu proměnné měnit, kdy nikoli, a proč je dnes doporučeno používat let a const místo staršího var.

Teorie a principy

1. var (historické)

   • Proměnná deklarovaná pomocí var má funkční nebo globální rozsah (function scope, global scope).

   • Nezná blokový rozsah – proměnná „přežije“ i mimo blok { ... }.

   • Umožňuje redeklaraci (znovu vyhlášení té samé proměnné).

   • To může vést k neočekávaným chybám, proto se dnes var nedoporučuje.

2. let (moderní, ES6)

   • Má blokový rozsah (block scope) – platí jen uvnitř { ... }, kde byla deklarována.

   • Hodnotu proměnné lze měnit, ale není možné ji znovu deklarovat v tom samém rozsahu.

   • Používá se pro proměnné, jejichž hodnota se v čase mění.

3. const (moderní, ES6)

   • Také má blokový rozsah.

   • Hodnotu je nutné při deklaraci rovnou inicializovat a už ji nelze znovu přiřadit.

   • Vhodné pro hodnoty, které se nikdy nemění (např. matematické konstanty, konfigurace).

   • POZOR: u objektů a polí const chrání pouze samotný odkaz, nikoli vnitřní obsah.

Praktické příklady kódu

Rozdíl mezi var a let

const jako neměnná hodnota

const s objektem

Typické chyby / záludnosti

• Použití var v moderním kódu – vede k neočekávanému „úniku“ proměnných mimo blok.

• Záměna const za „neměnný objekt“ – const nemění obsah objektu, pouze odkaz.

• Zapomenutá inicializace u const – nutné při vyhlášení:

• Redeclarace proměnné s let nebo const – není povolená ve stejném rozsahu.

Shrnutí

• var: starší, funkční rozsah, nezná block scope, dnes se nedoporučuje.

• let: moderní, blokový rozsah, hodnota je měnitelná.

• const: moderní, blokový rozsah, hodnota je neměnná (nutná inicializace).

• Doporučená praxe: používat const ve výchozím případě, a let tam, kde se hodnota mění.

Úloha

Zadání (kontext úlohy)

Vytvoř tři proměnné:

• pomocí var nastav cislo1 = 10,

• pomocí let nastav cislo2 = 20,

• pomocí const nastav cislo3 = 30.

Poté zkus změnit jejich hodnoty a sleduj, co se stane.

Cíl úlohy

• Ověříš si rozdíly mezi var, let a const.

• Uvidíš, které proměnné lze měnit a které ne.

Vstupní podmínky

• Máš k dispozici HTML dokument se základní strukturou.

• Tento HTML dokument je propojený s prázdným souborem script.js.

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

Požadovaný výstup

• U proměnných deklarovaných pomocí var a let se hodnota po změně skutečně přepíše.

• U proměnné deklarované pomocí const se při pokusu o změnu objeví chyba v konzoli.

Doplňující pokyny

• const je bezpečnější, protože zaručuje, že hodnota proměnné zůstane neměnná.

• let se používá pro proměnné, jejichž hodnota se může měnit.

• var je starší způsob deklarace – má odlišné chování v rámci tzv. „hoistingu“ a dnes se používá jen výjimečně.

Soubor

Odkaz na js soubor

Odkaz na html soubor

Řešení úlohy

Co je zde splněno

• Vytvořeny tři proměnné pomocí var, let a const.

• U cislo1 a cislo2 se hodnota změnila bez problémů.

• U cislo3 vyvolal pokus o změnu chybu (TypeError: Assignment to constant variable).

• Ukázáno praktické použití a rozdíly.

Poznámky

• const zaručuje, že proměnná nebude omylem přepsána.

• var se dnes považuje za zastaralý a používá se jen z historických důvodů.

• Nejčastější praxe: používat const tam, kde se hodnota nemění, a let tam, kde je potřeba proměnnou přepsat.