JavaScript Development

Cursusbeschrijving

JavaScript is vandaag de dag één van de meest populaire talen om in te programmeren. Wat ooit begon als “wat interactiviteit toevoegen aan de browser”, is inmiddels uitgegroeid tot een taal die zowel voor frontend, met webapplicaties en apps, als backend wordt ingezet.

Toch is JavaScript 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

Types

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

### Conversions

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

### Operators

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

### Control structures

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

### Arrays

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

### Objects

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

### Functions

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

### Destructuring

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

### Classes

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

### Modules

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

### Advanced functions

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

### Prototypes

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

### Symbols

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

### Sets and maps

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

### Iterators and generators

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

### Advanced objects

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

### Promises

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

Materiaal

Info Support cursusmateriaal

Voorkennis

Basis programmeervaardigheden