Opleiding: JavaScript Development

Leer degelijk en grondig programmeren in JavaScript

Beschrijving

JavaScript is nog een enigszins onbeminde, onbekende, onbegrepen en onderschatte taal. Qua uiterlijk lijkt het veel op Java, maar schijn bedriegt. JavaScript kent slechts een simpel, dynamisch en flexibel typesysteem. Het heeft niet de classes, inheritance of encapsulatie zoals we dat in traditionele OO-talen gewend zijn. Gecombineerd met invloeden van functionele programmeertalen, vreemde scoping-regels en operatoren die verraderlijk anders werken dan in Java/C#, leidt dit tot een heel andere wereld dan de traditionele objectgeoriënteerde wereld van Java/C#/C++.

Lange tijd was het genoeg om JavaScript net voldoende te kennen om kleine functies te schrijven en een event in de browser af te vangen. Maar met de komst van de moderne 'rich clients' is dat veranderd. Gedegen, professionele kennis van de taal is nodig om de kracht ervan te gebruiken en de valkuilen te ontwijken.

Je leert het typesysteem van JavaScript kennen en leert welke rol de operatoren daarbij spelen. Je ziet welke operatoren en control structures anders werken dan in Java/C#/C++. Je gaat oefenen met lexical scoping en gebruikt de overeenkomsten (en verschillen) tussen functies, arrays en objecten. Je leert ook over veelgebruikte technieken/constructies als destructuren, classes en modules.

Ook geavanceerdere taalfeatures en technieken komen langs. Deze kennis en vaardigheden komen sterk van pas nu steeds meer projecten de kracht van "vanilla JavaScript" maximaal willen benutten. Ook op projecten waar met React, Svelte, TypeScript of testframeworks als Cypress en Playwright wordt gewerkt komen geavanceerde technieken van pas bij het structureren van code. We besteden dan ook aandacht aan het geavanceerd gebruik van functies met arrow functions en closures, het geavanceerd gebruik van objecten met encapsulatie en proxies, wat JavaScript's inheritance-mechanisme voor je kan betekenen, wanneer Symbols van pas komen, wat Sets en Maps voor voordeel bieden, hoe iterators en generators interessante perspectieven bieden voor loops en tenslotte alles over het wrappen van asynchroon werk met Promises.

Wist je dat in JavaScript:

• geldt dat: "1" == true
• ++x niet altijd dezelfde waarde oplevert als x+1
• Er geen public en private access modifiers bestaan, maar wel syntax voor getters en setters
• Objecten, functies en arrays veel op elkaar lijken
• De reflection API min of meer in de taal zit
• Semicolon insertion meestal handig is, maar niet altijd
• Vanaf ECMAScript 2015 zijn veel bestaande design patterns als taalelementen opgenomen. We besteden in deze training daarom ook uitgebreid aandacht aan de nieuwe versies van ECMAScript. Hierbij leer je de nieuwe syntax, patterns en mogelijkheden. Voorbeelden hiervan zijn de block bindings, destructuring, arrow functions, classes en modules

Deze training is een combinatie van twee andere trainingen. De eerste 3 dagen correspondeert met de training JavaScript Development Core. De laatste 2 dagen correspondeert met de JavaScript Development Advanced.

Deze training richt zich op ontwikkelaars met goede kennis van C#, Java, of C++, die JavaScript gaan gebruiken in een professionele omgeving.

Onderwerpen

In deze module leer je JavaScript's typesysteem te begrijpen.

Lessen

• Built-in types
• Primitive types als number, string, null, undefined, etc.
• Reference types en built-in objects als globalThis
• Regular expressions
• Variable-declaratie en hun scope

Na het afronden van deze module kunnen deelnemers:

• Begrijpen hoe JavaScript omgaat met types
• Het verschil tussen var, let en const benoemen

In deze module leer je alles over de conversies die JavaScript doet.

Lessen

• Wanneer conversies plaatsvinden
• JavaScript's voorkeuren met conversies
• Object/Array naar string/number
• number naar string
• string naar number

Na het afronden van deze module kunnen deelnemers:

• Begrijpen wanneer conversies plaatsvinden
• Begrijpen hoe objecten en primitieve waarden worden geconverteerd

In deze module leer je de operators van JavaScript kennen

Lessen

• == vs ===
• typeof, instanceof, delete, etc
• x ? y : z, ..., ||, &&, ??, **, etc
• +, **, ??=, ||=, etc

Lab: types, conversions en operators

Na het afronden van deze module kunnen deelnemers:

• Het verschil tussen &&, || en ?? te benoemen
• Alle operators herkennen en weten waar ze voor dienen

In deze module leer je ...

Lessen

• Standaard control structures als for, if en while
• switch
• for..in en for..of
• Exception handling
• Strict mode
• Semicolon insertion

Na het afronden van deze module kunnen deelnemers:

• Weten wanneer in of of gebruikt moet worden met for-loops
• Het gooien en afhandelen van exceptions
• De voordelen van strict mode benutten
• Bepalen of je voor puntkomma's bent of tegen

In deze module leer je werken met arrays en dat arrays in JavaScript eigenlijk geen arrays zijn

Lessen

• Arrays aanmaken en gebruiken
• Dat JavaScript arrays geen typische arrays zijn
• Array-functies aanspreken
• Spread-operator in combinatie met arrays

Lab: Arrays

Na het afronden van deze module kunnen deelnemers:

• Arrays op een professionele manier inzetten

In deze module leer je objecten aan te maken, te gebruiken en verschillende interacties ermee te hebben

Lessen

• Objecten aanmaken
• Object literals
• De verschillende notaties voor het aanspreken van properties
• De spread operator in combinatie met objecten
• Dubbele properties en de toepassingen ervan
• Het gebruiken van het JSON-object

Lab: Objects

Na het afronden van deze module kunnen deelnemers:

• Op een professionele manier omgaan met objecten
• Factories maken
• Objecten naar JSON converteren en terug

In deze module leer je professioneel om te gaan met functies

Lessen

• Het hoisten van functies
• Functieparameters en default parameters
• Block-level functies
• Arrow functions: () => {}

Lab: Functions

Na het afronden van deze module kunnen deelnemers:

• Professioneel omgaan met functies
• Functieparameters en default parameters op te nemen
• Bepalen wanneer "gewone" functies te gebruiken en wanneer een arrow function

In deze module leer je hoe je objecten en arrays kunt destructuren

Lessen

• Destructuren van objecten
• Destructuren van arrays
• Destructuren van een object/array-combinatie
• Default waarden en aliassen in te stellen
• Rest-operator in combinatie met destructuren
• Praktische toepassingen van destructuren

Lab: Destructuring

Na het afronden van deze module kunnen deelnemers:

• Een complex object of complexe array destructuren
• Herkennen wanneer een praktische gelegenheid zich voordoet om te destructuren

In deze module leer je professioneel om te gaan met classes

Lessen

• Classes definiëren en gebruiken
• Class expressions
• Getters/setters
• static
• Inheritance
• Overriding functions
• Abstract classes

Lab: Classes

In deze module leer je modulair te werken aan de hand van ES Modules

Lessen

• Waarom modules
• Modules in de browser
• import, export en hun variaties
• Bekend raken met module bundlers

Lab: Modules

Na het afronden van deze module kunnen deelnemers:

• Modulair te werken gaan met import/export
• De voordelen inzien van module bundlers

In deze module leer je het geavanceerd gebruik van functies

Lessen

• Function properties
• Constructor functions
• Het mysterie van this uit de doeken
• Arrow functions
• IIFE's
• Closures
• Template literals

Lab: Advanced functions

Na het afronden van deze module kunnen deelnemers:

• Bepalen wanneer een function en wanneer een arrow function te gebruiken
• Beredeneren waar this naar wijst
• Alle voordelen van arrow functions benutten
• Aan de hand van IIFE's en closures begrijpen hoe libraries onder water werken
• IIFE's en closures inzetten wanneer de situatie zich daarvoor leent

In deze module leer je wat prototypes inhouden en het toepassen ervan

Lessen

• Prototypes
• Prototype chain
• Prototype instellen/veranderen
• Inheritance
• super

Lab: Prototypes

Na het afronden van deze module kunnen deelnemers:

• Begrijpen hoe prototypes werken in JavaScript
• Prototypes inzetten voor bijv. inheritance of extension methods
• Begrijpen hoe classes zich verhouden tot prototypes

In deze module leer je over Symbols: een value-type om iets uniek te adresseren

Lessen

• Symbols
• HEt value-type
• Ingebouwde symbols en het symbol registry
• Symbols en properties
• Libraries en symbols

Lab: Symbols

Na het afronden van deze module kunnen deelnemers:

• Symbols schrijven en benutten
• Met Symbol.toPrimitive() invloed uitoefenen op JavaScript-conversies

In deze module leer je over de ingebouwde types Set en Map

Lessen

• Set en Map
• Hun zwakkere tegenhangers, WeakSet en WeakMap

Lab: Sets en Maps

Na het afronden van deze module kunnen deelnemers:

• Sets en Maps gebruiken wanneer de situatie zich daarvoor leent

In deze module leer je over itereren aan de hand van iterators en generators

Lessen

• Iterators, Symbol.iterator() en het Iterator pattern
• Generators en yield

Lab: Iterators and generators

Na het afronden van deze module kunnen deelnemers:

• Iterators en generators gebruiken
• Het iterator pattern implementeren
• Een generator schrijven

In deze module leer je het geavanceerd gebruik van objecten

Lessen

• Static functions op objecten: Object.is(), Object.assign(), Object.keys() en meer
• Proxy
• Reflect
• Encapsulatie
• Garbage collection

Lab: Advanced objects

Na het afronden van deze module kunnen deelnemers:

• Bepaalde static functies gebruiken als de situatie zich daarvoor leent
• Proxy gebruiken om interacties te trappen
• Reflect gebruiken voor reflection-achtige zaken
• Functies/properties op verschillende manieren afschermen van andere stukken code
• Inhaken op wanneer een object wordt opgeruimd door de JavaScript-engine

In deze module leer je over asynchroon werk doen middels promises

Lessen

• Promises maken en gebruiken
• Promise chaining
• Errorhandling
• Waarden retourneren
• Static functies als Promise.all(), Promise.allSettled() en meer
• Handige technieken
• async/await

Lab: Asynchronously read the contents of multiple files

Na het afronden van deze module kunnen deelnemers:

• Promises aanmaken en gebruiken
• Errorhandling en chaining implementeren
• Omgaan met parallelle promises
• async/await gebruiken voor betere leesbaarheid