Co byste měli vědět o JavaScriptu [5]: with je zlý čaroděj

Vítejte u dalšího dílu série článku “Co byste měli vědět o JavaScriptu”. K pátemu dílu jsem seriálu “nadělil vlastní štítek”:http://zapisnik.pepiino.cz/tagy/co-byste-meli-vedet-o-javascriptu/ a také “vlastní RSS”:http://zapisnik.pepiino.cz/tagy/co-byste-meli-vedet-o-javascriptu/feed/.

Dnes si povíme o konstrukci `with` a rovnou prozradím, že učiníte lépe, nebudete-li ji používat.

Konstrukce with
******************
Konstrukce `with` je určena ke zkrácení zápisu přístupu k vlastnostem objektů.
/—html

var osoba = {
    jmeno: "franta",
    prijmeni: "frantiskovec",
    velikostBot: 42
};

//v rámci bloku with mohu pracovat s vlastnostmi
//objektu 'osoba' podobně jako s lokálními proměnnými
with (osoba) {
   //vypíše "franta"
   console.log(jmeno); 
   //vypíše "frantiskovec"
   console.log(prijmeni); 
   //vypíše odpověď na základní otázku života, vesmíru a vůbec
   console.log(velikostBot); 
}

\—
“Zkuste si”:http://jsfiddle.net/pepiino/7g6QV/. Vypadá to užitečně, že? Ale třpyt neimplikuje zlato, jak již zajisté víme.

With nepřehledný a zrádný
******************

Představte si, že při čtení JavaScriptového kódu narazíte na následující pasáž:
/—html

with (neco) {
    olala = bubu;
}

\—
Poznáte, co uvedený kód dělá? Stát se mohou 4 různé věci, v závislosti na tom, zda jsou `olala` a `bubu` vlastnostmi objektu `neco`.
/—html

//olala je vlastností neco, bubu nikoli
neco.olala = bubu;
//bubu je vlastností neco, olala nikoli
olala = neco.bubu;
//bubu i olala jsou vlastnostmi neco
neco.olala = neco.bubu;
//bubu i olala nejsou vlastnostmi neco
olala = bubu;

\—

Vzhledem k dynamické povaze JavaScriptu nemůžete nijak snadno zaručit, že objekt bude mít vámi předpokládané vlastnosti. A pokud je nemá, může “zapsaná hodnota snadno skončit v globálním oboru platnosti”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-1-promenna-a-globalni-obor-platnosti/, což lehce způsobí obtížně odladitelné chyby. Také pokud čtete cízí (nebo vlastní, ale starý) kód a předpoklad existence vlastností není vyjádřen jinak (třeba v komentáři), budete mít nejspíš problém pochopit autorův záměr.

Žijte bez with
**************
`With` do JavaScriptu bezpochyby nepatří, proto byl ve striktním módu ECMAScriptu 5 vyřazen. “Ačkoliv lze dlouze diskutovat o zajímavých použitích této konstrukce”:http://stackoverflow.com/questions/61552/are-there-legitimate-uses-for-javascripts-with-statement, usnadníte si život, pokud se bez něj obejdete i vy.

Co byste měli vědět o JavaScriptu [4]: deklarace funkce a funkce jako výraz

Vítejte u dalšího dílu mého “seriálu o méně známých zákoutích JavaScriptu”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-0-uvod/. Pravidelný čtenář si zajisté všiml, že první tři díly měly něco společného. Všechny se nějak dotýkaly platnosti proměnných v JavaScriptu. Dnešní článek nebude výjimkou a bude trochu delší i náročnější, takže doporučuji lehce si osvěžit paměť prolétnutím předcházejících témat.

V prvním díle jsem psal o “deklaraci lokálních proměnných, klíčovém slovu `var` a globálním ‘scope'”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-1-promenna-a-globalni-obor-platnosti/, navázal jsem krátkou zmínkou o tom, “že v JavaScriptu jsou lokální proměnné platné vždy v rámci celé funkce”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-2-javascript-nema-block-level-scope/ a nakonec jsem se minulý týden rozepsal o méně známé vlastnosti: “variable hoisting”:http://zapisnik.pepiino.cz/co-byste-meli-vedet-o-javascriptu-3-variable-hoisting/.

Continue reading

Další porce zajímavostí kolem JavaScriptu a webu

[* 2010/10/calendar180.jpg .(Ilustrace) <] "JavaScript Weekly":http://javascriptweekly.com/ aneb novinky ze světa Javascriptu každý týden do vašeho emailu. Stojí za odběr, opravdu pěkné odkazy. "Essential JavaScript And jQuery Design Patterns":http://addyosmani.com/blog/essentialjsdesignpatterns/ e-book o návrhových vzorech v JS zdarma ke stažení. Rozhodně doporučuji alespoň prolistovat. "Pragmatic Guide to JavaScript":http://www.pragprog.com/titles/pg_js/pragmatic-guide-to-javascript nadějně vypadající kniha o Javascriptu (zaznamenal jsem dobré reference). E-book za 13 dolarů a tento pátek ji "lze koupit se 40% slevou":http://media.pragprog.com/newsletters/2010-11-24.html (sleva by se měla vztahovat na celý sortiment http://pragprog.com) "HTML5 Canvas na serveru? Ale jistě!":http://www.learnboost.com/introducing-node-canvas-server-side-html5-canvas-api/ "Snippet":http://steamdev.com/snippet/ jQuery plugin pro obarvení zdrojových kódů. Interně používá "SHJS":http://shjs.sourceforge.net/. Vypadá velice hezky. "Dust.js":http://akdubya.github.com/dustjs/ je sympatický šablonovací engine pro JavaScript (lze použít v prohlížeči, ale třeba i na serveru). "Mathjax":http://www.mathjax.org/ je moc hezké knihovna pro zobrazení matematických výrazů (Latex, MathML) na webu. Nic originálního, ale řešení působí lépe než podobné nástroje, se kterými jsem se v minulosti potkal.

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í.

Cheš být lepším programátorem? Neboj se vynalézat kolo znova a znova!

[* 2010/11/wheels240.jpg <] *"Nesnaž se znova vynalézat kolo, použij hotové řešení."* Jestli se alespoň trochu motáte kolem vývoje softwaru, určitě jste již tuto mantru slyšeli nespočetněkrát. Většina problémů, na které při vývoji aplikace narazíme, je již dávno vyřešena a hotovou knihovnu (zabalenou v pěkné černé krabičce), stačí většinou jen vybrat a použít. Nemohu popřít že to má většinou smysl, obzvlášť jde-li o obchod. Díky hotovým řešením můžeme vyrobit a dodat produkt rychleji, levněji, což bezpochyby není špatně. V extrémním případě se ale z programátora stává cvičená opička. Jeho denním chlebem je pak výběr, studium a lepení již hotových frameworků, knihoven a dalších udělátek. Programujete-li ve svém volném čase, nebojte se dělat věci, které již udělali jiní. I když je uděláte hůř (či úplně špatně), máte alespoň příležitost poučit se z vlastních chyb. Z opravdových programátorských chyb, které učiníte při řešení jiných úloh, než je výběr jednoho z *n* frameworků. A pokud ve svém volném čase neprogramujete, měli byste začít. ("obrázek":http://www.flickr.com/photos/chrisjfry/309701186/ pochází od "chrisjfry":http://www.flickr.com/photos/chrisjfry/, licence "cac by-nc-nd":http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en) .{font-size:80%;}