Moderní JavaScript s ES6–ES13 (JS tutoriál)

Čeká tě to v tomto kurzu JavaScript ES6.

JavaScript ve webových prohlížečích existuje již mnoho let. Téměř každá webová stránka obsahuje více či méně kódu JS. I když první verze byly velmi neohrabané, s dosavadním standardem ES5 se dal slušně pracovat, alespoň pokud jste dokázali obratně obejít pasti a nejistoty. Proč tedy učit něco nového a nezůstat u osvědčeného? V této lekci ukážu výhody nového standardu ES6 a důvody, proč byste se vlastně neměli bez něj obejít.

Od ES5 až do ES6 bylo klíčové slovo var jediným způsobem, jak deklarovat proměnné, a díky svým vlastnostem často způsobovalo nechtěné chování nebo dokonce chyby. ES6 přichází se dvěma novými klíčovými slovy let a const, které nápravu některých nedostatků var.

For loop zná každý webový vývojář. Často se používá k procházení polí. S ES6 existuje varianta For loop, která toto umožňuje mnohem kratší a kompaktnější.

Funkce jsou v JS zásadní a dosud byly deklarovány a definovány pouze pomocí klíčového slova funkce. ES6 představuje velmi elegantní a krátký zápis, který nejen činí kód čitelnější, ale také nabízí řešení pro otravný problém s this.

Volitelné parametry lze v ES5 trochu neohrabaně realizovat a na volajícího funkce se nezobrazí. V ES6 lze volitelné parametry s jejich výchozími hodnotami přímo napsat do signatury funkce.

Destrukturalizace umožňuje cílené extrahování prvků z objektů a polí. Při bližším pohledu se objevuje mnoho možností použití, které dělají kód v JS elegantnější a kompaktnější.

Ovládání proměnné arguments bylo do verze ES6 nutné k umožnění proměnného počtu parametrů u funkcí. V ES6 lze toto mnohem snadněji provést pomocí tzv. rest parametrů.

Nejen při definici funkcí je operátor …- používán pro zbytečné parametry, ale lze ho také použít při destrukturizaci pole k zachycení "zbytku" prvků a poskytnutí jako pole k dispozici.

Nejen u polí lze použít operátor zbytek, ale může být použit i u objektů k zachycení zbývajících vlastností a poskytnutí je jako objekt k dispozici.

Naopak od operátoru Rest je operátor Spread. Vypadá stejně (…), ale je umístěn na opačné straně přiřazení a rozepíše pole na jednotlivé části.

„Trik“ s operátorem Spread funguje také velmi dobře při objektech. S tím lze objekty "promíchat" do jiných objektů. Nicméně zde existuje také velmi dobrá alternativa pomocí Object.assign().

Funkce v objektových literálech jsou psané velmi nepřehledně s klíčovým slovem function-. S ES6 je však můžete psát mnohem kratší a srozumitelnější.

Nedá se to říci jinak: Víceřádkové řetězce s integrovanými hodnotami proměnných byly před ES6 velkým trápením a bylo jich taky velmi nepříjemné číst. Naopak nové šablonové literály ES6 jsou syntaktická požita.

Objekty vždy mohly být zneužity jako key-value úložiště nebo slovník, ale s několika nevýhodami. Nová datová struktura Map se těchto nevýhod zbavuje a poskytuje solidní funkcionalitu slovníku, jak je známo z jiných programovacích jazyků.

Po použití Promises může být callback hell vyhnuta, ale konstrukce async/await přidává další úroveň syntaktické nadílky. Staví na Promises a umožňuje programovat asynchronní operace téměř jako synchronní. Kdo už jednou programoval s async/await, od té doby se vyhýbá přímému použití metody then- u Promises (a především používání callbacků).

Kromě statického importování modulů pomocí klíčového slova import podporuje ES6 také dynamické importování pomocí funkce import. Jelikož to celé funguje asynchronně, je vrácen slib, na jehož vyřešení lze skvěle počkat pomocí await. Díky tomu není nic překážkou pro načítání modulů během běhu programu v libovolný okamžik.

Dědičnost stále funguje na základě prototypů, ale v ES6 se zapisuje s klíčovým slovem extends, což je výrazně jednodušší a přehlednější. Při použití tohoto zápisu je důležité volat konstruktor základní třídy ve správný čas pomocí klíčového slova super. Jak na to, bude samozřejmě vysvětleno v této lekci.

Teď je možné deklarovat i soukromá pole a je zaručeno, že k nim nemůžete přistupovat zvenčí. Trochu nezvyklé je jejich deklarování, které se značně liší od jiných programovacích jazyků.

S novým klíčovým slovem class a souvisejícími funkcemi jako dědičnost a zapouzdření (soukromá pole) by měli být všichni OOP programátoři spokojení, že? V této lekci chci představit alternativu k vytváření objektů, která se obejde bez tříd, prototypů a this a místo toho umožňuje flexibilnější způsob "dědičnosti" nebo spíše "kompozice".

Nejdůležitější funkce verze ES6 a novější by měly být nyní zvládnuté. Nicméně stále přibývají novinky. Některé méně často používané funkce ještě nebyly zmíněny. V této lekci bude vysvětleno, co lze očekávat v budoucnosti a které funkce by mohly být stále zajímavé v konkrétních případech.