Moderný JavaScript s ES6–ES13 (JS-tutorial)

Čo ťa čaká v tomto kurze JavaScriptu ES6.

JavaScript existuje už mnoho rokov v prehliadačoch. Takmer každá webová stránka obsahuje viac alebo menej JS kód. Hoci prvé verzie boli veľmi neľahké, doteraz sa dalo dosť dobre pracovať so štandardom ES5, aspoň ak ste boli schopní obratne obísť komplikácie a neistoty. Prečo teda učiť sa niečo nové a nezostať pri overenom? V tejto lekcii ukážem výhody nového štandardu ES6 a dôvody, prečo by sa na tento nemalo zabúdať.

Do vrátane ES5 bol kľúčové slovo var jedinou možnosťou na deklaráciu premenných a často spôsobovalo neželané správanie alebo dokonca chyby. ES6 prináša dve nové kľúčové slová let a const, ktoré odstraňujú niektoré nedostatky var.

For-loop pozná každý webový vývojár. Často sa používa na prechádzanie polí. S ES6 existuje variant For-loop, ktorý to umožňuje oveľa kratšie a kompaktnejšie.

Funkcie sú v JS esenciálne a doteraz boli deklarované a definované len cez kľúčové slovo funkcia. ES6 prináša veľmi elegantný a krátky zápis, ktorý robí kód nielen čitateľnejším, ale ponúka aj riešenie pre podráždený problém s týmto.

Voliteľné parametre možno v ES5 pomerne zložito implementovať a neodhalujú sa volajúcemu funkciu. V ES6 sa voliteľné parametre s ich prednastavenými hodnotami môžu priamo zapísať do signatúry funkcie.

Destruktúrovanie umožňuje cielené extrahovanie prvkov z objektov a polí. Po starostlivom preskúmaní sa objavuje veľa možností využitia, ktoré robia JS kód elegantnejším a kompaktnejším.

Manipulovanie s premennou arguments bolo potrebné až do ES6, aby sa umožnilo použitie premenného počtu parametrov vo funkcii. Toto je v ES6 oveľa jednoduchšie s tzv. zvyšnými parametrami.

Nie iba pri definíciách funkcií sa používa operátor …- pri zvyškových parametrech, môže sa použiť aj pri deštrukturalizácii polí na to, aby zachytil „zvyšok“ prvkov a poskytol ich ako pole.

Nie len pri poliach sa dá použiť operátor zvyšku, ale aj pri objektoch môže zachytiť zvyšné vlastnosti a poskytnúť ich ako objekt k dispozícii.

Opačným operátorom od operátora Rest je operátor Rozprestrieť. Vyzerá rovnako (…), je však na opačnej strane priradenia a rozprestiera pole na jednotlivé časti.

"Trick" so spread-operator funguje veľmi dobre aj pri objektoch. Týmto spôsobom je možné objekty "zahrnúť" do iných objektov. S Object.assign() však existuje veľmi dobrá alternatíva.

Funkcie v objektových literáloch sú veľmi nepraktické na písanie s kľúčovým slovom funkcia-. S ES6 sa však dajú písať oveľa kratšie a zrozumiteľnejšie.

Nedá sa povedať inak: Viacrozmerové reťazcové literály s integrovanými hodnotami premenných boli pred ES6 trápnym a veľmi nepríjemným čítaním. Nové šablónové literály v ES6 sú naopak syntaktickým potešením.

Objekty si vždy mohli byť zneužité ako key-value úložisko alebo slovník, ale s niekoľkými nevýhodami. Nová dátová štruktúra Map sa zbavuje týchto nevýhod a poskytuje spoľahlivú funkcionalitu slovníka, ako je to známe z iných programovacích jazykov.

Po tom, ako sľuby pomáhajú vyhnúť sa peklu spätných volaní, async/await-konštrukt ešte pridáva ďalšiu vrstvu na syntaktický cukor. Stavia na sľuboch a umožňuje programovať asynchrónne operácie takmer ako synchronné. Ten, kto už niekedy programoval s async/await, odteraz sa vyhýba priamej použitej metódy then- sľubov (a dokonca ešte viac používaniu spätných volaní).

Vedľa statického importovania modulov s kľúčovým slovom import, ES6 tiež podporuje dynamické importovanie pomocou funkcie import-. Keďže celé funguje asynchrónne, je vrátený objekt Promise, na jeho vyriešenie sa dá čakať pomocou await. Tým je umožnené načítanie modulov počas behu programu v akomkoľvek okamžiku.

Dedičnosť stále funguje na základe prototypov, v ES6 sa však píše s kľúčovým slovom extends, čo je výrazne jednoduchšie a prehľadnejšie. Ak ho používate, musíte volať konštruktor základnej triedy v správnom čase pomocou super. Samozrejme, v tejto lekcii sa vysvetľuje, ako na to.

Teraz je možné deklarovať aj súkromné polia a vonkajšiemu prístupu k nim je rozhodne zabezpečené. Trochu nezvyklá je deklarácia, ktorá sa výrazne líši od iných programovacích jazykov.

S novým kľúčovým slovom class a súvisiacimi funkciami ako dedia, alebo zapúzdrenie údajov (súkromné polia), by mali byť všetci OO programátori spokojní, však? V tejto lekcii chcem predstaviť alternatívu pre vytváranie objektov, ktorá sa bez tried, prototypov a this dokáže obísť, no namiesto toho umožňuje flexibilnejší spôsob "dedičnosti" alebo lepšie povedané "kompozíciu".

Najdôležitejšie funkcie verzie ES6 a novšie by teraz mali byť spracované. Avšak stále pribúdajú novinky. Niektoré menej často používané funkcie ešte neboli spomenuté. V tejto lekcii sa vysvetlí, čo sa ešte očakáva v budúcnosti a ktoré funkcie by mohli byť stále zaujímavé v špeciálnych prípadoch.