Modern JavaScript ES6-tól ES13-ig (JS útmutató)

Ezt várhatod ebből a JavaScript ES6 kurzusból.

A JavaScript már évek óta létezik a böngészőkben. Szinte minden weboldal valamennyi vagy akár több JS-kódot tartalmaz. Bár az első verziók még nagyon ügyetlenek voltak, az eddigi ES5 szabvánnyal viszonylag jól lehetett dolgozni, legalábbis akkor, ha az esetleges buktatókat ügyesen kikerülték. Akkor miért tanuljunk valami újat, és ne maradjunk az eddig beváltnál? Ebben a leckében bemutatom az új ES6 szabvány előnyeit és azt, hogy valójában miért nem lehetünk nélkülözhetetlenek nélküle.

Az ES5-ig a var kulcsszó volt az egyetlen lehetőség a változók deklarálására, és sajátosságaival gyakran nem kívánt viselkedést vagy akár hibákat okozott. Az ES6 két új kulcsszót, let és const, indít a versenybe, amelyek kijavítják a var-nak néhány hiányosságát.

Az összes webfejlesztő ismeri a For-ciklust. Gyakran használják tömbök bejárására. Az ES6-tól kezdve létezik egy verziója a For-ciklusnak, amely lehetővé teszi ezt jóval rövidebben és tömörebben.

Funkciók a JS-ben lényegesek és eddig csak a function kulcsszóval lettek deklarálva és definiálva. Az ES6 egy nagyon elegáns és rövid megoldást vezet be, amely nemcsak olvashatóbbá teszi a kódot, hanem egy megoldást is kínál this nehézségére.

Az opcionális paramétereket az ES5-ben kicsit bonyolult módon lehet megvalósítani, és nem tárulnak fel a függvény hívójának. Az ES6-tal opcionális paramétereket a saját alapértékeikkel közvetlenül a függvény aláírásába lehet írni.

A destrukturálás lehetővé teszi az elemek célzott kinyerését objektumokból és tömbökből. Ha alaposan megvizsgáljuk, sok alkalmazási lehetőség adódik, amelyek elegánsabbá és kompaktabbá teszik a JS-kódot.

Az arguments változó kezelése szükséges volt az ES6 előtt, hogy lehetővé tegye a változó számú paramétereket a függvényekben. Az ES6-ban sokkal egyszerűbb ez a ún. maradék paraméterek segítségével.

Nemcsak a funkciódefinícióknál használható a …- operátor a rest paraméterek esetén, hanaps a tömb destruktúrációkor is alkalmazható arra, hogy éppen az "elmaradó" elemeket befogja és tömbként rendelkezésre állítja.

Nem csak tömböknél használható a maradék operátor, han használható objektumoknál is az esetleges maradék tulajdonságok elkapására és objektummá alakítására.

A maradék operátor ellentéte a terjesztő operátor. Ugyanúgy néz ki (…), csak éppen a másik oldalon áll egy hozzárendelésben, és az tömbből az egyes elemekre terjed ki.

A „trükk“ a Spread operátorral nagyon jól működik objektumok esetében is. Így más objektumok „belehelyezhetők” egy objektumba. Az Object.assign() hasonlóan jó alternatíva erre.

Objekt szószerinti tartalmazó paranccsorozatokban nagyon nehézkesek a függvények írása a function-kulcsszóval. Az ES6 segítségével azonban jóval rövidebben és hatásosabban is megírhatóak.

Nem lehet másképp mondani: Az integrált változóértékekkel rendelkező többsoros string literálok az ES6-ig kínszenvedést okoztak és nagyon kellemetlenek voltak olvasni. Az új ES6 sablon literálok viszont szintaktikai gyönyör.

Objektumokat mindig is kihasználhatták Key-Value-Store-ként vagy szótárként, azonban néhány hátránnyal járt. Az új térképadatstruktúra megszabadul ezekről a hátrányokról és masszív szótár-funkcionalitást kínál, ahogyan azt más programozási nyelvekből is ismerjük.

Az ígéretek segítségével elkerülhető a visszahívástól való menekülés, az async/await szerkezet pedig egy újabb réteget ad a szintaktikus cukrozáshoz. Az ígéretekre épít, és lehetővé teszi, hogy az aszinkron műveleteket szinte szinkron módon lehessen programozni. Aki már egyszer programozott async/await segítségével, az ezután kerüli a Promises then-metódusának közvetlen használatát (és különösen a visszahívások használatát).

Az ES6 nem csak modulok statikus importálását támogatja a import kulcsszóval, hanem dinamikus importálást is az import() függvénnyel. Mivel az egész aszinkron módon működik, egy Promise objektumot ad vissza, aminek feloldására tökéletesen használhatjuk az await kulcsszót. Így a modulok dinamikus betöltésének semmi sem áll a útjában a futás közben bármikor.

Az öröklődés továbbra is prototípusokon alapul, az ES6-ban azonban az extends kulcsszóval sokkal egyszerűbb és átláthatóbb. Ha ezt használjuk, akkor a bázisosztály konstruktorát a megfelelő időpontban a super kulcsszóval kell meghívnunk. Hogyan kell ezt csinálni, természetesen ebben a leckében is el lesz magyarázva.

Mostantól privát mezőket is deklarálhatunk, és garantáltan nem lehet hozzájuk kívülről hozzáférni. A deklaráció kissé szokatlan, és jelentősen különbözik más programozási nyelvektől.

Az új class kulcsszóval és a hozzátartozó funkciókkal, mint például öröklés és adatkapszulázás (privát mezők), minden OO programozónak elégedettnek kellene lennie, nem igaz? Ebben a leckében szeretnék bemutatni egy alternatívát az objektumok létrehozására, ami teljesen lemond az osztályokról, prototípusokról és a this kulcsszóról, viszont egy rugalmasabb "öröklődési" vagy inkább "kompozíciós" módot tesz lehetővé.

Az ES6 és újabb verziójának legfontosabb funkcióit már le kellene kezelni. Azonban folyamatosan érkeznek újítások. Néhány ritkábban használt funkcióról még nem esett szó. Ebben a leckében elmagyarázzuk, hogy mi várható a jövőben, és mely funkciók lehetnek még érdekesek speciális esetekben.