Modern JavaScript met ES6-ES13 (JS-handleiding)

Dit staat je te wachten in deze JavaScript ES6-cursus.

JavaScript bestaat al vele jaren in browsers. Bijna elke website bevat meer of minder JS-code. Hoewel de eerste versies nogal hobbelig waren, was het tot nu toe redelijk werken met de standaard ES5, althans als je de valkuilen en onzekerheden handig kon omzeilen. Waarom zou je dan iets nieuws leren en niet bij het bewezen blijven? In deze les laat ik de voordelen van de nieuwe standaard ES6 zien en de redenen waarom je eigenlijk niet zonder kunt.

tot en met ES5 was het trefwoord var de enige manier om variabelen te declareren, en veroorzaakte met zijn eigenaardigheden vaak ongewenst gedrag of zelfs fouten. ES6 introduceert de twee nieuwe trefwoorden let en const, die sommige tekortkomingen van var verhelpen.

Elke webontwikkelaar kent de For-lus. Het wordt ook vaak gebruikt voor het doorlopen van arrays. Met ES6 is er een variant van de For-lus die dit aanzienlijk korter en compacter mogelijk maakt.

Functies zijn essentieel in JS en zijn tot nu toe alleen gedeclareerd en gedefinieerd met het trefwoord function. ES6 introduceert een zeer elegante en korte schrijfwijze die de code niet alleen leesbaarder maakt, maar ook een oplossing biedt voor een vervelend probleem met this.

Optionele parameters kunnen op een wat omslachtige manier in ES5 worden gerealiseerd en worden niet onthuld aan de oproeper van een functie. Met ES6 kunnen optionele parameters met hun standaardwaarden direct in de functiehandtekening worden geschreven.

Het destructureren maakt het mogelijk om specifieke elementen uit objecten en arrays te extraheren. Bij nadere beschouwing zijn er veel toepassingsmogelijkheden die JS-code eleganter en compacter maken.

Het gebruik van de arguments-Variabele was nodig tot ES6 om een variabel aantal parameters toe te staan in functies. Dit is veel eenvoudiger in ES6 met de zogenaamde restparameters.

Niet alleen bij functiedefinities wordt de ...-operator gebruikt bij restparameters, ook bij array-destructurering kan hij worden gebruikt om juist de "rest" van de elementen op te vangen en beschikbaar te stellen als array.

Niet alleen bij arrays kan de rest-operator worden gebruikt, ook bij objecten kan hij de overgebleven eigenschappen opvangen en beschikbaar stellen als een object.

Het tegenovergestelde van de Rest-operator is de Spread-operator. Hij ziet er hetzelfde uit (…), maar staat aan de andere kant van een toewijzing en spreidt de array uit in afzonderlijke elementen.

De "truc" met de spread-operator werkt ook heel goed bij objecten. Hiermee kunnen objecten in andere objecten worden "gemengd". Met Object.assign() is er echter ook een zeer goed alternatief hiervoor.

Functies in object literals zijn erg omslachtig om te schrijven met het function- trefwoord. Met ES6 kunnen ze echter veel korter en doeltreffender worden geschreven.

Je kan het niet anders zeggen: Meerdere-regel string literals met geïntegreerde variabele waarden waren tot ES6 een kwelling en ook erg onaangenaam om te lezen. De nieuwe template literals van ES6 daarentegen zijn een syntactische verademing.

Objecten konden altijd al worden misbruikt als een Key-Value-Store of Dictionary, zij het met enkele nadelen. De nieuwe Map-datastructuur ontdoet zich van deze nadelen en biedt solide woordenboekfunctionaliteit, zoals men het kent van andere programmeertalen.

Nadat je met promises de callback-hel kunt vermijden, voegt de async/await-constructie nog een laagje syntactische suiker toe. Het bouwt voort op promises en maakt het mogelijk om asynchrone taken bijna synchroon te programmeren. Wie eenmaal met async/await heeft geprogrammeerd, vermijdt voortaan het rechtstreeks gebruik van de then-methode van promises (en al helemaal het gebruik van callbacks).

Naast het statisch importeren van modules met het trefwoord import, ondersteunt ES6 ook het dynamisch importeren met de import-functie. Omdat dit asynchroon werkt, wordt een Promise teruggegeven waarop men kan wachten met behulp van await. Zo staat niets het laden van modules tijdens runtime op willekeurige momenten meer in de weg.

Ook vererving blijft gebaseerd op prototypen, maar met ES6 is het gebruik van het trefwoord extends aanzienlijk eenvoudiger en overzichtelijker. Wanneer het wordt toegepast, moet het basisklasse constructor op het juiste moment worden aangeroepen met super. Hoe dat moet, wordt natuurlijk ook uitgelegd in deze les.

Ook privévelden kunnen nu worden gedeclareerd, en die kunnen zeker niet van buitenaf worden benaderd. De declaratie is een beetje ongebruikelijk, en verschilt merkbaar van andere programmeertalen.

Met het nieuwe trefwoord class en bijbehorende functies zoals overerving en gegevenskapseling (private velden) zouden alle OO-programmeurs eigenlijk tevreden moeten zijn, toch? Ik wil in deze les een alternatief presenteren voor het maken van objecten, zonder klassen, prototypen en this te gebruiken, maar in plaats daarvan een flexibelere vorm van "overerving" of beter gezegd "compositie" mogelijk te maken.

De belangrijkste kenmerken van versie ES6 en nieuwer zouden nu behandeld moeten zijn. Er komen echter steeds nieuwe ontwikkelingen bij. Enkele minder vaak gebruikte functies zijn nog niet genoemd. In deze les wordt uitgelegd wat er nog te verwachten is in de toekomst en welke functies nog interessant zouden kunnen zijn in specifieke gevallen.