Starý příkaz „var“

V úplně první kapitole o proměnných jsme zmínili tři způsoby deklarace proměnných:

1. let
2. const
3. var

Deklarace var je podobná let. Ve vÄ›tÅ¡inÄ› případů můžeme nahradit let za var nebo naopak a očekávat, že vÅ¡e bude fungovat:

var zpráva = "Ahoj";
alert(zpráva); // Ahoj

VnitÅ™nÄ› je vÅ¡ak var velmi odliÅ¡ná potvůrka, která pochází z dřívÄ›jších časů. V moderních skriptech se obvykle nepoužívá, ale ve starých stále číhá.

Pokud neplánujete se s takovými skripty setkat, můžete tuto kapitolu přeskočit nebo odložit na později.

Naproti tomu, když pÅ™evádíte staré skripty z var na let, je důležité porozumÄ›t rozdílům, abyste se vyhnuli podivným chybám.

„var“ nemá blokovou platnost

PromÄ›nné deklarované pomocí var mají rozsah platnosti buď funkční, nebo globální. Jsou viditelné i skrz bloky.

Například:

if (true) {
  var test = true; // použijeme „var“ namísto „let“
}

alert(test); // true, proměnná existuje i za if

Protože var ignoruje kódové bloky, vytvoÅ™ili jsme globální promÄ›nnou test.

Kdybychom použili let test namísto var test, pak by tato promÄ›nná byla viditelná jen uvnitÅ™ if:

if (true) {
  let test = true; // použijeme „let“
}

alert(test); // ReferenceError: test není definován

Totéž platí pro cykly: var nemůže být lokální v bloku nebo ve smyčce:

for (var i = 0; i < 10; i++) {
  var jedna = 1;
  // ...
}

alert(i);   // 10, „i“ je viditelná i za cyklem, je to globální proměnná
alert(jedna); // 1, „jedna“ je viditelná i za cyklem, je to globální proměnná

Nachází-li se kódový blok uvnitÅ™ funkce, pak var deklaruje promÄ›nnou na úrovni funkce:

function řekniAhoj() {
  if (true) {
    var věta = "Ahoj";
  }

  alert(věta); // funguje
}

řekniAhoj();
alert(věta); // ReferenceError: věta není definována

Jak vidíme, var se probije skrz if, for a jiné kódové bloky. Je to proto, že pÅ™ed dlouhou dobou bloky v JavaScriptu nemÄ›ly lexikální prostÅ™edí a var je toho pozůstatkem.

„var“ toleruje opakované deklarace

Jestliže deklarujeme stejnou promÄ›nnou pomocí let ve stejné oblasti dvakrát, nastane chyba:

let uživatel;
let uživatel; // SyntaxError: 'uživatel' již byl deklarován

Pomocí var můžeme znovu deklarovat promÄ›nnou, kolikrát chceme. Použijeme-li var s již deklarovanou promÄ›nnou, bude ignorováno:

var uživatel = "Petr";

var uživatel = "Jan"; // tento „var“ neudělá nic (proměnná je již deklarována)
// ...nevyvolá chybu

alert(uživatel); // Jan

Pomocí „var“ můžeme proměnné deklarovat až po jejich použití

Deklarace var se zpracovávají, když se funkce spustí (nebo když se spustí skript, jsou-li globální).

Jinými slovy, promÄ›nné deklarované pomocí var jsou definovány od začátku funkce bez ohledu na to, kde se jejich definice nachází (za pÅ™edpokladu, že definice není uvnitÅ™ vnoÅ™ené funkce).

Takže tento kód:

function řekniAhoj() {
  věta = "Ahoj";

  alert(věta);

  var věta;
}
řekniAhoj();

…je technicky stejný jako tento (pÅ™esuneme var věta nahoru):

function řekniAhoj() {
  var věta;

  věta = "Ahoj";

  alert(věta);
}
řekniAhoj();

…Nebo i jako tento (pamatujte, že kódové bloky jsou ignorovány):

function řekniAhoj() {
  věta = "Ahoj"; // (*)

  if (false) {
    var věta;
  }

  alert(věta);
}
řekniAhoj();

Takovému chování se nÄ›kdy říká „stoupání“ (anglicky „hoisting“ nebo „raising“), jelikož každý var „vystoupá“ („hoist“, „raise“) až k vrcholu funkce.

V uvedeném příkladu se vÄ›tev if (false) nikdy nespustí, ale na tom nezáleží. Příkaz var uvnitÅ™ se zpracuje na začátku funkce, takže v okamžiku provedení řádku (*) promÄ›nná existuje.

Deklarace stoupají, ale přiřazení ne.

Nejlépe to uvidíme na příkladu:

function řekniAhoj() {
  alert(věta);

  var věta = "Ahoj";
}

řekniAhoj();

Řádek var věta = "Ahoj" má v sobÄ› dvÄ› akce:

1. Deklaraci promÄ›nné var.
2. PÅ™iÅ™azení promÄ›nné =.

Deklarace se vykonává na začátku spuštění funkce („stoupání“), ale přiřazení se provede vždy na místě, na němž se objevilo. Kód tedy funguje v zásadě následovně:

function řekniAhoj() {
  var věta; // deklarace se provede na začátku...

  alert(věta); // undefined

  věta = "Ahoj"; // ...přiřazení - když se běh dostane k němu.
}

řekniAhoj();

Protože vÅ¡echny deklarace var se zpracovávají na začátku funkce, můžeme je uvádÄ›t kdekoli. Ale promÄ›nné jsou až do pÅ™iÅ™azení nedefinované.

V obou uvedených příkladech se alert spustí bez chyby, protože promÄ›nná věta existuje. Ale jeÅ¡tÄ› jí není pÅ™iÅ™azena hodnota, takže se zobrazí undefined.

IIFE

V minulosti, kdy bylo jenom var a neexistovala viditelnost na úrovni bloku, programátoÅ™i vymysleli způsob, jak ji emulovat. To, co vynalezli, bylo nazváno „okamžitÄ› volané funkční výrazy“ („immediately-invoked function expressions“), zkrácenÄ› IIFE.

Není to nic, co bychom měli používat v současnosti, ale ve starých skriptech je stále můžete najít.

IIFE vypadá následovně:

(function() {

  var zpráva = "Ahoj";

  alert(zpráva); // Ahoj

})();

Zde se vytvoří a okamžitě zavolá funkční výraz. Kód se tedy okamžitě spustí a má své vlastní soukromé proměnné.

Funkční výraz je uzavÅ™en do závorek (function {...}), protože když motor JavaScriptu narazí v hlavním kódu na „function“, chápe to jako začátek deklarace funkce. AvÅ¡ak deklarace funkce musí obsahovat název, takže tento kód vyvolá chybu:

// Snaží se deklarovat a okamžitě zavolat funkci
function() { // <-- SyntaxError: Deklarace funkce vyžaduje název funkce

  var zpráva = "Ahoj";

  alert(zpráva); // Ahoj

}();

I kdybychom si řekli: „dobře, tak přidáme název“, nebude to fungovat, protože JavaScript neumožňuje, aby byla deklarace funkce okamžitě volána:

// závorky níže způsobí syntaktickou chybu
function jdi() {

}(); // <-- deklaraci funkce nemůžeme okamžitě volat

Závorky kolem funkce jsou tedy trik, jak ukázat JavaScriptu, že funkce je vytvořena v kontextu jiného výrazu, a proto je to funkční výraz: nemusí mít název a může být okamžitě zavolán.

Kromě závorek existují i jiné způsoby, jak oznámit JavaScriptu, že máme na mysli funkční výraz:

// Způsoby vytvoření IIFE

(function() {
  alert("Závorky okolo funkce");
})();

(function() {
  alert("Závorky okolo toho všeho");
}());

!function() {
  alert("Bitový operátor NOT zahajuje výraz");
}();

+function() {
  alert("Unární plus zahajuje výraz");
}();

Ve všech uvedených případech deklarujeme funkční výraz a okamžitě jej zavoláme. Znovu opakujeme, že v dnešní době není důvod takový kód psát.

Shrnutí

Mezi var a let/const existují dva hlavní rozdíly:

1. PromÄ›nné deklarované pomocí var nemají blokovou platnost a oblast jejich viditelnosti je celá aktuální funkce. Jsou-li deklarovány mimo funkci, jsou globální.
2. Deklarace var se zpracovávají na začátku funkce (globální deklarace na začátku skriptu).

Existuje ještě jeden velmi drobný rozdíl vztahující se ke globálnímu objektu, který probereme v příští kapitole.

Kvůli tÄ›mto rozdílům je var ve vÄ›tÅ¡inÄ› případů horší než let. PromÄ›nné na úrovni bloku jsou vynikající vÄ›c. To je důvod, proč bylo do standardu již pÅ™ed dlouhou dobou zavedeno let a nyní je hlavním způsobem (spolu s const), jak deklarovat promÄ›nné.