03.12 Životní Cyklus Proměnných

Výuka

Proč životní cyklus proměnných?

Podívej se na tento kód. Co se stane?

console.log(name);  // Co vypíše?
var name = "Alice";

Možná si řekneš: "Vypíše chybu - používáš name před deklarací!" Ale výsledek je:

// → undefined (žádná chyba!)

A co tenhle kód?

console.log(age);  // Co vypíše?
let age = 25;

// → ReferenceError: Cannot access 'age' before initialization

Proč se var a let chovají různě? Protože JavaScript zpracovává deklarace ve dvou fázích:

1. Kompilace - JavaScript "vidí" všechny deklarace a připraví prostor
2. Spuštění - JavaScript vykoná kód řádek po řádku

Hoisting (česky "vytažení nahoru") popisuje, jak se deklarace chovají, jako by byly přesunuté na začátek scope. Ale var, let, const mají různé chování!

Proč je to užitečné?

• Pochopíš chyby - proč někdy dostaneš undefined, jindy ReferenceError
• Pochopíš function hoisting - proč můžeš volat funkci před deklarací
• Napíšeš bezpečnější kód - vyhneš se pastím hoistingu

Představ si to jako: Plánování akce. Nejdřív si napíšeš, co všechno potřebuješ (deklarace), pak to postupně shromážďuješ (inicializace). Ale některé věci můžeš připravit dopředu (var), jiné musíš mít až v pravý čas (let/const).

Jak to funguje?

Hoisting = deklarace se "zpracují" před spuštěním kódu:

1. JavaScript nejdřív projde kód a najde všechny deklarace (var, let, const, function)
2. Vytvoří pro ně prostor v paměti
3. var: inicializuje na undefined
4. let/const: NEINICIALIZUJE - vytvoří "Temporal Dead Zone" (TDZ)
5. function: plně dostupná
6. Teprve pak spustí kód řádek po řádku

Důležité:

• Hoistuje se DEKLARACE, ne přiřazení
• var x se hoistuje, ale x = 5 ne
• let/const mají TDZ - nelze použít před deklarací
• function deklarace jsou plně hoistované

Klíčové koncepty

• Hoisting - deklarace se zpracují před spuštěním kódu
• Temporal Dead Zone (TDZ) - oblast, kde let/const nelze použít (od začátku scope do deklarace)
• var hoisting - var je inicializovaný na undefined
• function hoisting - celá funkce je dostupná
• let/const hoisting - deklarace hoistuje, ale nelze použít (TDZ)

JavaScript

Příklad 1: var hoisting - inicializace na undefined

console.log(name);  // Co vypíše?
var name = "Alice";
console.log(name);

Výsledek:

undefined
Alice

Co se stalo? JavaScript to "vidí" jako:

var name;  // Deklarace hoistována nahoru, inicializováno na undefined
console.log(name);  // → undefined
name = "Alice";     // Přiřazení zůstává na místě
console.log(name);  // → Alice

• Deklarace var name se hoistuje nahoru
• Inicializace na undefined proběhne automaticky
• Přiřazení = "Alice" zůstává na původním místě

Příklad 2: let/const - Temporal Dead Zone (TDZ)

console.log(age);  // ❌ ReferenceError!
let age = 25;

// ReferenceError: Cannot access 'age' before initialization

Co se stalo?

// -- TDZ začíná zde pro 'age' --
console.log(age);  // ❌ age je v TDZ!
let age = 25;      // -- TDZ končí zde --
console.log(age);  // ✅ Teď už je OK

• Deklarace let age se hoistuje, ALE není inicializovaná
• Od začátku scope do řádku s let age je TDZ
• Pokus o přístup v TDZ = ReferenceError
• const se chová stejně jako let

Příklad 3: Porovnání var vs let/const

// ✅ var - funguje (ale vrací undefined)
console.log(x);  // → undefined
var x = 10;

// ❌ let - Error (TDZ)
console.log(y);  // → ReferenceError
let y = 20;

// ❌ const - Error (TDZ)
console.log(z);  // → ReferenceError
const z = 30;

Co se stalo?

• var je hoistovaný a inicializovaný na undefined → žádná chyba
• let a const jsou v TDZ před deklarací → ReferenceError
• Proto používej let/const - brání použití před deklarací!

Příklad 4: Function hoisting - plně dostupné

// ✅ Funguje! Funkce je plně hoistovaná
greet("Alice");  // → "Hello, Alice!"

function greet(name) {
  console.log("Hello, " + name + "!");
}

Co se stalo?

• Function deklarace jsou plně hoistované
• Celá funkce (deklarace + tělo) je dostupná od začátku scope
• Můžeš volat funkci před jejím napsáním v kódu!

Ale function expression ne:

// ❌ Nefunguje - function expression není hoistovaný
greet("Bob");  // → ReferenceError (let) nebo TypeError (var)

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

Příklad 5: Proč TDZ existuje

// ❌ var umožňuje použít proměnnou před deklarací
function badExample() {
  console.log(count);  // → undefined (matoucí!)
  // ... 50 řádků kódu ...
  var count = 0;
}

// ✅ let odhalí chybu hned
function goodExample() {
  console.log(count);  // → ReferenceError (jasná chyba!)
  // ... 50 řádků kódu ...
  let count = 0;
}

Co se stalo?

• var vrací undefined - můžeš si myslet, že je vše OK
• let vyhodí chybu - okamžitě víš, že něco není v pořádku
• TDZ tě chrání před používáním proměnné před inicializací!

Příklad 6: Hoisting ve scope

function outer() {
  console.log(x);  // → undefined (var hoisting uvnitř funkce)

  if (true) {
    var x = 10;    // var se hoistuje na začátek FUNKCE
    let y = 20;    // let je jen v bloku
  }

  console.log(x);  // → 10 (var viditelný v celé funkci)
  console.log(y);  // → ReferenceError (let jen v bloku)
}

outer();

Co se stalo?

• var x se hoistuje na začátek funkce (function scope)
• let y je jen v bloku (block scope)
• Hoisting respektuje typ scope!

TypeScript

TypeScript má stejný hoisting jako JavaScript - je to runtime chování!

// ❌ TypeScript ti neporadí, že var je hoistovaný
console.log(name);  // TypeScript error: Variable 'name' is used before being assigned.
var name: string = "Alice";

// ❌ TypeScript odhalí TDZ problém
console.log(age);  // TypeScript error: Block-scoped variable 'age' used before its declaration.
let age: number = 25;

TypeScript přidává:

• ✅ Varování před použitím - upozorní, pokud použiješ proměnnou před deklarací
• ✅ Lepší chybové hlášky - jasně řekne, co je špatně
• ✅ Kontrola při psaní - nemusíš čekat na runtime

Rozdíl JS vs TS

JavaScript:

// Runtime chování - odhalíš až při spuštění

console.log(x);  // → undefined (překvapení!)
var x = 10;

console.log(y);  // → ReferenceError (až při spuštění)
let y = 20;

TypeScript:

// Compile-time varování - odhalíš při psaní

console.log(x);  // ⚠️ Variable 'x' is used before being assigned
var x: number = 10;

console.log(y);  // ❌ Block-scoped variable 'y' used before its declaration
let y: number = 20;

Rozdíl:

• JavaScript odhalí problém až při spuštění (runtime)
• TypeScript upozorní při psaní (compile-time)
• Ale hoisting samotný funguje stejně v obou!

Tip

💡 Vždy deklaruj proměnné na začátku scope:

// ❌ Špatně - matoucí
function bad() {
  console.log(count);  // → undefined
  // ... 50 řádků ...
  var count = 0;
}

// ✅ Dobře - jasné
function good() {
  let count = 0;  // Hned na začátku
  console.log(count);  // → 0
  // ... 50 řádků ...
}

💡 Používej let/const místo var:

// ❌ var - hoisting může zmást
var x = 1;

if (true) {
  var x = 2;  // Přepíše vnější x!
}

console.log(x);  // → 2 (překvapení!)

// ✅ let - block scope, TDZ ochrana
let y = 1;

if (true) {
  let y = 2;  // Nový y jen v bloku
}

console.log(y);  // → 1 (jak očekáváš)

💡 Function deklarace vs expression:

// ✅ Function deklarace - plně hoistovaná
sayHello();  // Funguje!

function sayHello() {
  console.log("Hello!");
}

// ❌ Function expression - ne hoistovaná
sayGoodbye();  // ReferenceError!

const sayGoodbye = () => {
  console.log("Goodbye!");
};

// Použij expression, pokud CHCEŠ zabránit hoistingu