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.

Deze les introduceert een manier om een ontwikkelingsomgeving op te zetten. We gebruiken Visual Studio Code van MS als IDE en ViteJS als Dev-Server.

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.

Het werken met strings is een basisvaardigheid van elke programmeur. Gelukkig biedt ES6 enkele nieuwe en zeer nuttige stringfuncties die veel schrijfwerk besparen.

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.

Al met al ES5 zijn enkele zeer handige array-functies die een meer functionele benadering volgen. ES6 heeft er nog wat andere toegevoegd die het werken met arrays nog aangenamer maken. Sommige van de "oude" functies die al in ES5 aanwezig waren, worden hier echter ook geëerd.

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.

Asynchrone processen kunnen worden afgehandeld met terugroepfuncties, maar er bestaat het risico dat de nestingsdiepte te groot wordt en de code dan onoverzichtelijk wordt (de zogenaamde callback-hel). Promises lossen dit probleem op door diepe nestingen te vermijden en het mogelijk te maken om asynchrone processen op een niveau te koppelen.

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

In Node.js worden modules vanaf het begin gebruikt, maar aanvankelijk werd uitsluitend het CommonJS-moduleformaat met require. Gebruikt. Sinds ES6 is er een moduledefinitie in de standaard en daarmee de nieuwe sleutelwoorden import/export. Ondertussen wordt dit formaat ondersteund door bijna alle (nieuwe) JS-bibliotheken, en Node.js kan er ook mee werken in de nieuwste versies.

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.

Het klassieke objectgeoriënteerde programmeren met klassen en overerving was tot ES6 alleen mogelijk via een prototype in een constructorfunctie. Dat was omslachtig, leek weinig compact en was daarom ook foutgevoelig. Het nieuwe trefwoord class maakt nu in ES6 de definitie in een compacte vorm mogelijk, zoals men dat kent van andere programmeertalen zoals Java, C# en C++. Intern blijft het echter een fundamenteel op prototypen gebaseerd systeem, maar met een mooiere syntax.

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 de declaratie van leden of velden is mogelijk gemaakt met de nieuwere standaarden. Hierdoor kunnen ook statische velden gedeclareerd en geïnitialiseerd worden.

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.