Oblast platnosti proměnné, uzávěr

JavaScript je značně funkcionálně orientovaný jazyk. Dává nám velké množství svobody. Funkci můžeme kdykoli vytvořit, předat ji jako argument jiné funkci a později ji volat z úplně jiného místa kódu.

Víme již, že funkce může přistupovat k proměnným, které leží mimo ni (k „vnějším“ proměnným).

Co se však stane, když se po vytvoření funkce vnější proměnné změní? Dostanou se do funkce jejich nové, nebo staré hodnoty?

A co když je funkce předána jako argument a pak je volána z jiného místa kódu? Bude mít na novém místě přístup k vnějším proměnným?

Rozšiřme si znalosti, abychom porozuměli těmto i složitějším scénářům.

Kódové bloky

Jestliže je promÄ›nná deklarována uvnitÅ™ kódového bloku {...}, je viditelná jedinÄ› uvnitÅ™ tohoto bloku.

Příklad:

{
  // provedeme nějakou práci s lokálními proměnnými, které nemají být vidět zvenčí

  let zpráva = "Ahoj"; // je viditelná jen v tomto bloku

  alert(zpráva); // Ahoj
}

alert(zpráva); // Chyba: zpráva není definována

Díky tomu můžeme izolovat část kódu, která odvede svou vlastní práci, s proměnnými, které budou patřit pouze jí:

{
  // zobrazí zprávu
  let zpráva = "Ahoj";
  alert(zpráva);
}

{
  // zobrazí jinou zprávu
  let zpráva = "Na shledanou";
  alert(zpráva);
}

// zobrazí zprávu
let zpráva = "Ahoj";
alert(zpráva);

// zobrazí jinou zprávu
let zpráva = "Na shledanou"; // Chyba: proměnná je již deklarována
alert(zpráva);

Také pro if, for, while a podobné jsou promÄ›nné deklarované v {...} viditelné jedinÄ› uvnitÅ™:

if (true) {
  let věta = "Ahoj!";

  alert(věta); // Ahoj!
}

alert(věta); // Chyba, taková proměnná neexistuje!

Zde po skončení if funkce alert pod ním neuvidí promÄ›nnou věta, takže nastane chyba.

To je skvÄ›lé, protože nám to umožňuje vytvářet blokovÄ› lokální promÄ›nné, specifické pro vÄ›tev if.

PodobnÄ› to platí pro cykly for a while:

for (let i = 0; i < 3; i++) {
  // proměnná i je viditelná jen uvnitř tohoto cyklu for
  alert(i); // 0, pak 1, pak 2
}

alert(i); // Chyba, taková proměnná neexistuje

VizuálnÄ› je let i mimo {...}, avÅ¡ak konstrukt for je v tomto ohledu speciální: promÄ›nná, která je deklarována uvnitÅ™ nÄ›j, se považuje za součást bloku.

Vnořené funkce

Funkce se nazývá „vnořená“, když je vytvořena uvnitř jiné funkce.

V JavaScriptu je to snadno možné.

Můžeme to využít k organizaci našeho kódu, například takto:

function řekniAhojNashle(křestníJméno, příjmení) {

  // pomocná vnořená funkce, kterou použijeme níže
  function vraťCeléJméno() {
    return křestníJméno + " " + příjmení;
  }

  alert( "Ahoj, " + vraťCeléJméno() );
  alert( "Nashle, " + vraťCeléJméno() );

}

Zde je vnoÅ™ená funkce vraťCeléJméno() vytvoÅ™ena pro naÅ¡e pohodlí. Může pÅ™istupovat k vnÄ›jším promÄ›nným, a tak může vrátit celé jméno. VnoÅ™ené funkce jsou v JavaScriptu pomÄ›rnÄ› běžné.

Ještě zajímavější je, že vnořenou funkci můžeme vrátit: buď jako vlastnost nového objektu, nebo jako samotný výsledek funkce. Pak ji můžeme použít někde jinde. Ať to bude kdekoli, stále bude mít přístup ke stejným vnějším proměnným.

V následujícím příkladu vytvořČítač vytvoří funkci „čítače“, která pÅ™i každém zavolání vrátí další číslo:

function vytvořČítač() {
  let počet = 0;

  return function() {
    return počet++;
  };
}

let čítač = vytvořČítač();

alert( čítač() ); // 0
alert( čítač() ); // 1
alert( čítač() ); // 2

Mírně upravené varianty tohoto kódu, třebaže jsou jednoduché, mají praktické využití, například jako generátor pseudonáhodných čísel, který generuje náhodné hodnoty pro automatizované testy.

Jak to funguje? Když vytvoříme více čítačů, budou nezávislé? Co se bude dít se zdejšími proměnnými?

Porozumět takovým věcem je skvělé pro všeobecnou znalost JavaScriptu a vyplatí se při složitějších scénářích. Pojďme tedy trochu do hloubky.

Lexikální prostředí

Aby to bylo jasnější, rozdělíme vysvětlení na několik kroků.

Krok 1. Proměnné

V JavaScriptu je ke každé spuÅ¡tÄ›né funkci, kódovému bloku {...} i celému skriptu pÅ™ipojen interní (skrytý) objekt, nazývaný lexikální prostÅ™edí.

Objekt lexikálního prostředí se skládá ze dvou částí:

1. Záznam prostÅ™edí – objekt, v nÄ›mž jsou uloženy vÅ¡echny lokální promÄ›nné jako jeho vlastnosti (a nÄ›které další informace, napÅ™. hodnota this).
2. Odkaz na vnější lexikální prostředí, tedy to, které je spojeno s vnějším kódem.

„PromÄ›nná“ je jen vlastnost speciálního interního objektu, záznamu prostředí. „Načíst nebo zmÄ›nit promÄ›nnou“ znamená „načíst nebo zmÄ›nit vlastnost tohoto objektu“.

V tomto jednoduchém kódu bez funkcí existuje pouze jedno lexikální prostředí:

To je tzv. globální lexikální prostředí, připojené k celému skriptu.

Obdélník v uvedeném obrázku znamená záznam prostÅ™edí (skladiÅ¡tÄ› promÄ›nných) a Å¡ipka znamená odkaz na vnÄ›jší prostÅ™edí. Globální lexikální prostÅ™edí nemá žádný odkaz na vnÄ›jší prostÅ™edí, proto Å¡ipka ukazuje na null.

Když se kód začne provádět, lexikální prostředí se s jeho během mění.

Zde je trochu delší kód:

Obdélníky napravo ukazují, jak se globální lexikální prostředí mění během provádění kódu:

1. Když se skript spustí, lexikální prostředí se obsadí všemi deklarovanými proměnnými.
   • Na začátku jsou ve stavu „neinicializováno“. To je speciální vnitÅ™ní stav, který znamená, že motor ví o promÄ›nné, ale nelze se na ni odkazovat, dokud nebude deklarována pomocí let. Je to skoro totéž, jako by promÄ›nná neexistovala.
2. Pak se objeví definice let věta. Zatím zde není žádné pÅ™iÅ™azení, takže hodnota promÄ›nné je undefined. Od této chvíle můžeme tuto promÄ›nnou používat.
3. Do promÄ›nné věta je pÅ™iÅ™azena hodnota.
4. Hodnota promÄ›nné věta se zmÄ›ní.

Prozatím to všechno vypadá jednoduše, že?

• PromÄ›nná je vlastností speciálního interního objektu, pÅ™ipojeného k právÄ› vykonávanému bloku/funkci/skriptu.
• Práce s promÄ›nnými je ve skutečnosti práce s vlastnostmi tohoto objektu.

Krok 2. Deklarace funkcí

Funkce je také hodnota, stejně jako proměnná.

Rozdíl je v tom, že při deklaraci je funkce okamžitě plně inicializována.

Když je vytvoÅ™eno lexikální prostÅ™edí, deklarace funkce okamžitÄ› vytvoří funkci pÅ™ipravenou k použití (na rozdíl od promÄ›nné v let, která je pÅ™ed deklarací nepoužitelná).

Z tohoto důvodu můžeme používat funkci, deklarovanou deklarací funkce, ještě před samotnou deklarací.

Například zde je úvodní stav globálního lexikálního prostředí, když přidáme funkci:

PochopitelnÄ› toto chování platí jen pro deklarace funkcí, ne pro funkční výrazy, v nichž pÅ™iÅ™azujeme funkci do promÄ›nné, například let řekni = function(jméno)....

Krok 3. Vnitřní a vnější lexikální prostředí

Když se spustí funkce, na začátku jejího volání je automaticky vytvořeno nové lexikální prostředí, do něhož se ukládají lokální proměnné a parametry volání.

Například pro řekni("Jan") vypadá takto (bÄ›h je na řádku označeném Å¡ipkou):

Během volání funkce máme dvě lexikální prostředí: vnitřní (pro volání funkce) a vnější (globální):

• VnitÅ™ní lexikální prostÅ™edí odpovídá aktuálnímu bÄ›hu funkce řekni. Má jedinou vlastnost: jméno, argument funkce. Voláme ji řekni("Jan"), takže hodnota vlastnosti jméno je "Jan".
• VnÄ›jší lexikální prostÅ™edí je globální lexikální prostÅ™edí. Má promÄ›nnou věta a samotnou funkci.

VnitÅ™ní lexikální prostÅ™edí obsahuje odkaz outer na vnÄ›jší.

Když kód chce přistupovat k proměnné – nejprve se prohledá vnitřní lexikální prostředí, pak vnější, pak ještě vnější a tak dále, až ke globálnímu.

Není-li promÄ›nná nikde nalezena, ve striktním režimu nastane chyba (bez use strict pÅ™iÅ™azení do neexistující promÄ›nné vytvoří novou globální promÄ›nnou, aby byla zachována kompatibilita se starým kódem).

V tomto příkladu hledání postupuje následovně:

• Co se týče promÄ›nné jméno, alert uvnitÅ™ řekni ji najde okamžitÄ› ve vnitÅ™ním lexikálním prostÅ™edí.
• Když chce pÅ™istupovat k promÄ›nné věta, pak lokálnÄ› žádnou promÄ›nnou věta nenajde, takže pokračuje odkazem na vnÄ›jší lexikální prostÅ™edí a najde ji v nÄ›m.

Krok 4. Vrácení funkce

VraÅ¥me se k příkladu vytvořČítač.

function vytvořČítač() {
  let počet = 0;

  return function() {
    return počet++;
  };
}

let čítač = vytvořČítač();

Na začátku každého volání vytvořČítač() se vytvoří nový objekt lexikálního prostÅ™edí, do nÄ›hož se uloží promÄ›nné pro tento bÄ›h funkce vytvořČítač.

Máme tedy dvě vnořená lexikální prostředí, podobně jako ve výše uvedeném příkladu:

Rozdíl spočívá v tom, že bÄ›hem provádÄ›ní funkce vytvořČítač() se vytvoří drobná vnoÅ™ená funkce tvoÅ™ená jediným řádkem: return počet++. Tuto funkci zatím nevoláme, jenom ji vytvoříme.

VÅ¡echny funkce si pamatují lexikální prostÅ™edí, v nÄ›mž byly vytvoÅ™eny. Technicky v tom není nic magického: vÅ¡echny funkce mají skrytou vlastnost jménem [[Environment]], která si udržuje odkaz na lexikální prostÅ™edí, v nÄ›mž byla funkce vytvoÅ™ena:

Takže čítač.[[Environment]] má odkaz na lexikální prostÅ™edí {počet: 0}. Tímto způsobem si funkce pamatuje, kde byla vytvoÅ™ena, bez ohledu na to, kde je volána. Odkaz [[Environment]] se pÅ™i vytvoÅ™ení funkce nastaví jednou provždy.

Když je čítač() pozdÄ›ji volán, vytvoří se pro toto volání nové lexikální prostÅ™edí a odkaz na jeho vnÄ›jší lexikální prostÅ™edí se pÅ™evezme z čítač.[[Environment]]:

Když nyní kód uvnitÅ™ funkce čítač() hledá promÄ›nnou počet, nejprve prohledá své vlastní lexikální prostÅ™edí (prázdné, jelikož tady nejsou žádné lokální promÄ›nné), pak lexikální prostÅ™edí vnÄ›jšího volání vytvořČítač(), kde ji najde a zmÄ›ní.

Proměnná je změněna v lexikálním prostředí, v němž přebývá.

Zde je stav po provedení funkce:

Jestliže voláme čítač() vícekrát, promÄ›nná počet se zvýší na 2, 3 a tak dále, a to na stejném místÄ›.

Sběr odpadků

Lexikální prostředí funkce je zpravidla odstraněno z paměti i se všemi proměnnými poté, co volání funkce skončí. Je to proto, že pak už na ně neexistují žádné odkazy. Stejně jako všechny objekty v JavaScriptu je udržováno v paměti, jen dokud je dosažitelné.

Jestliže vÅ¡ak existuje vnoÅ™ená funkce, která je po skončení funkce stále dosažitelná, pak tato funkce má vlastnost [[Environment]], která se na toto lexikální prostÅ™edí odkazuje.

V takovém případě je lexikální prostředí stále dostupné i po skončení funkce, takže bude nadále existovat.

Například:

function f() {
  let hodnota = 123;

  return function() {
    alert(hodnota);
  }
}

let g = f(); // g.[[Environment]] si uloží odkaz na lexikální prostředí
             // příslušného volání f()

Prosíme vÅ¡imnÄ›te si, že je-li f() volána mnohokrát a výsledné funkce jsou nÄ›kam uloženy, pak zůstanou v pamÄ›ti i vÅ¡echny přísluÅ¡né objekty lexikálních prostÅ™edí. V následujícím kódu to budou vÅ¡echny tÅ™i:

function f() {
  let hodnota = Math.random();

  return function() { alert(hodnota); };
}

// 3 funkce v poli, každá z nich se odkazuje na lexikální prostředí
// z příslušného spuštění f()
let pole = [f(), f(), f()];

Objekt lexikálního prostředí je zničen, když se stane nedosažitelným (stejně jako každý jiný objekt). Jinými slovy, bude existovat, jen dokud bude existovat nejméně jedna vnořená funkce, která se na něj odkazuje.

V následujícím kódu je po odstranÄ›ní vnoÅ™ené funkce její uzavírající lexikální prostÅ™edí (a tedy i hodnota) vymazáno z pamÄ›ti:

function f() {
  let hodnota = 123;

  return function() {
    alert(hodnota);
  }
}

let g = f(); // dokud existuje funkce g, hodnota zůstane v paměti

g = null; // ...a nyní bude paměť pročištěna

Optimalizace v reálném životě

Jak jsme viděli, teoreticky dokud funkce existuje, jsou udržovány i všechny vnější proměnné.

V praxi se však JavaScriptové motory snaží o optimalizaci. Analyzují používání proměnných, a je-li z kódu zřejmé, že vnější proměnná není nikde použita, bude odstraněna.

Důležitý vedlejší efekt ve V8 (Chrome, Edge, Opera) je, že taková proměnná přestane být dostupná při ladění.

Zkuste si spustit níže uvedený příklad v Chrome s otevřenými vývojářskými nástroji.

Když se zastaví, v konzoli zadejte alert(hodnota).

function f() {
  let hodnota = Math.random();

  function g() {
    debugger; // v konzoli zadejte: alert(hodnota); taková proměnná neexistuje!
  }

  return g;
}

let g = f();
g();

Jak vidíme – taková proměnná neexistuje! Teoreticky by měla být dostupná, ale motor ji vyřadil při optimalizaci.

To může vést k zábavným (kdyby nezabíraly tolik času) problémům při ladění. Jeden z nich – můžeme vidět vnější proměnnou se stejným názvem namísto očekávané:

let hodnota = "Překvapení!";

function f() {
  let hodnota = "nejbližší hodnota";

  function g() {
    debugger; // v konzoli zadejte: alert(hodnota); Překvapení!
  }

  return g;
}

let g = f();
g();

Tuto vlastnost V8 je dobré znát. Jestliže ladíte v Chrome, Edge nebo Opeře, dříve nebo později se s ní setkáte.

Není to chyba ladicího nástroje, ale spíše speciální vlastnost V8. Možná bude časem změněna. Vždy si ji můžete ověřit spuštěním příkladů na této stránce.