Co byste měli vědět o JavaScriptu [3]: variable hoisting

“Minule jsem krátce popsal”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-2-javascript-nema-block-level-scope, že v JavaScriptu jsou lokální proměnné platné vždy na úrovni celé funkce, nikoli v bloku. S tím silně souvisí vlastnost, která je v angličtině označována *variable hoisting*. Rozumný český překlad mě nenapadá (a žádný oficiální neznám), ale sousloví by se dalo kostrbatě přeložit jako “zdvihání proměnných”.

Zdvihám, zdviháš, zdviháme
******************
Princip je jednoduchý: interpret javascriptu při zpracování těla funkce nalezne všechny identifikátory “lokálních proměnných deklarovaných pomocí klíčového slova `var`”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-1-promenna-a-globalni-obor-platnosti/, a “vyzdvihne” je na začátek těla funkce (před jakýkoliv příkaz).

Takže následující kód:
/—html

function tulipan() {
    if (test()) {
        var promenna = 10;
        fanfan();
    }
    var hodnota = "malá";
    return "vysledek";
    var cislo = 1;
}

\—
Je interpretován jako:
/—html

function tulipan() {
    var promenna, hodnota, cislo;
    if (test()) {
        promenna = 10;
        fanfan();
    }
    hodnota = "malá";
    return "vysledek";
    cislo = 1;
}

\—

Proč je to důležité?
******************
Nuže podívejme se na několik ukázek kódu, kde neznalost tohoto principu způsobí vývojaří přinejmenším zmatení.

Přístup ke globální proměnné (či proměnné z nadřazených oborů platnosti):
/—html

var hodnota = 20; 
function delej() {
    console.log(hodnota);  
    var hodnota = 6;
    console.log(hodnota);
}
delej();

\—
“Můžete si vyzkoušet”:http://www.jsfiddle.net/pepiino/rPsbh/, že první volání `console.log` vypíše `undefined` a ne `20`, jak by mohl očekávat neznalec.

Podobně v následující ukázce bude hodnota proměnné `baf` uvnitr funcke `tulipan` vždy vyhodnocena jako “vychozi”.
/—html

var baf = 'fanfan';

function tulipan() {
  var baf = baf || 'vychozi'; 
  console.log(baf);
};

tulipan();

\—
“Vyzkoušejte si.”:http://www.jsfiddle.net/pepiino/QENXC/

Doporučení na závěr
******************
Běžným doporučením, na které můžete ohledně psaní kódu v JavaScriptu narazit, je právě používání jediného klíčového slova `var` hned na začátku funkce, kde uvedete všechny lokální proměnné. Pokud k JavaScriptu přijdete z jiného jazyka (jako třeba já z Javy), může to být zarážející. Důvodem je ale právě *variable hoisting*. Dodržování této rady vám může ušetřit pár nepříjemných záseků.

Příště navážu opět souvisejícím tématem, povíme si něco o deklaracích funkcí.