2. Arrow functions, Arrays & Sets

In dit hoofdstuk bespreken we hoe we arrow functies kunnen gebruiken in JavaScript. Daarnaast bespreken we arrays en sets, datasctructuren die het mogelijk maken om meerdere waarden op te slaan in één variabele.

Arrow functions

Veel functies hebben een andere functie nodig als parameter. Het is natuurlijk mogelijk om hiervoor het function keyword te gebruiken, maar dit is vaak onnodig omslachtig.

Beschouw onderstaande code:

function someFunction(callback) {
    // Doe iets
    callback();
}

// Oproepen van someFunction met een anonieme functie als parameter
someFunction(function() {
    console.log("Callback uitgevoerd");
});

Merk op dat de anonieme functie die we als parameter doorgeven slechts één regel code bevat, desondanks moeten we, omwille van het function keyword, accolades gebruiken. Deze code kan compacter geschreven worden met behulp van een arrow functie:

function someFunction(callback) {
    // Doe iets
    callback();
}

// Oproepen van someFunction met een arrow functie als parameter
someFunction(() => console.log("Callback uitgevoerd"));

Het is duidelijk dat de code met de arrow functie veel compacter is, daarbovenop is deze in de meeste gevallen ook beter leesbaar.

Begrip: Arrow functions

Een arrow function of (lambda function) is een compacte alternatief voor traditionele functies. Ze worden vaak gebruikt voor korte functies of als argumenten voor hogere-orde functies zoals map, filter en reduce.

Arrow functies hebben geen eigen this context, wat betekent dat ze de this waarde van de omliggende scope overnemen. Zie hoofdstuk 3 voor meer informatie over this.

// Klassieke functie
function foo() {
  return 'Hello Foo'
}

// Arrow functie op één lijn.
// Geen return nodig, een one-line array functie
// geeft het resultaat automatisch terug.
const bar = () => 'Hello Bar'

// Arrow functie met meerdere statements.
const baz = () => {
  const message = 'Hello Baz'
  // Een multi-line arrow functie heeft een
  // return statement nodig (als je iets wilt teruggeven).
  return message
}

Arrow functies kunnen nul, geen of meerdere parameters hebben. In het geval er nul of meerdere parameters zijn, moeten deze tussen ronde haakjes staan.

// Geen parameters --> lege haakjes
const functionName = () => expression

// Eén parameter --> geen haakjes nodig
const functionName = () => expression

// Meerdere parameters --> haakjes nodig
const functionName = (param1, paramN) => expression

Arrays

Begrip: Arrays

Arrays worden gebruikt om een collectie van data te bewaren in één variabele. Arrays zijn geordend, wat betekent dat de volgorde van de elementen behouden blijft, het eerste element wordt aangeduid met index $0$, het tweede met index $1$, enzovoort.

Figuur 0: Arrays

const leeg = []; // Een lege array.
const leeg2 = new Array(5); // Een lege array met 5 lege plaatsen.
const tientallen = [10, 20, 30, 40, 50]; // Een array met 5 numerieke waarden.
const hello = ['Hello', 'World']; // Een array met 2 tekstwaarden.
const reeks = [1, , 3] // Een array met een lege plaats tussen 1 en 3.

Om elementen uit de array uit te lezen of te wijzigen, gebruikt je de index tussen vierkante haken [].

const tientallen = [10, 20, 30, 40, 50];
console.log(tientallen.length) // Print 5 naar de console (aantal elementen in de array).
console.log(tientallen[1]) // Print 20 naar de console.

tientallen[5] = 70; // Voeg een nieuw element toe aan het einde van de array (op index 5).
tientallen[5] = 60; // Wijzig het element op index 5 naar 60.
console.log(tientallen.length) // Print 6 naar de console (aantal elementen in de array).

In tegenstelling tot arrays in C# of Java, zijn arrays in JavaScript dynamisch van grootte, de beste analoog in C# is een List.

Itereren over een array

Itereren over een array kan op verschillende manieren. Het is vanzelfsprekend dat je een klassieke for lus kunt gebruiken die van index $0$ tot de lengte van de array loopt en zo elk element kan verwerken (via de [] notatie). De while en do...while lussen kunnen eveneens gebruikt worden op dezelfde manier als in de lessen programming essentials.

De twee meest gebruikelijke lussen zijn de for...of en forEach lussen.

Begrip: Itereren over een array

Via de for...of lus kan er geïtereerd worden over alle elementen in een array.
Merk op dat je het of keyword gebruikt moet worden in plaats van in zoals in de meeste andere programmeertalen.

const vakken = ['Programming Essentials', 'Object Oriented Programming', 'JavaScript'];

for (const vak of vakken) {
    console.log(vak);
}

In bovenstaande lus is het mogelijk om gebruik te maken van het break of continue keyword om respectievelijk de lus vroegtijdig te beëindigen of een iteratie over te slaan.

Via de forEach methode van de array kan er eveneens geïtereerd worden over alle elementen in een array, maar hierbij is het niet mogelijk om break of continue te gebruiken.

const vakken = ['Programming Essentials', 'Object Oriented Programming', 'JavaScript'];

// Elk vak word automatisch doorgegeven aan console.log
vakken.forEach(console.log);

// Een arrow functie om elk vak te printen.
vakken.forEach(vak => console.log(vak));

// Een arrow functie met meerdere lijnen om elk vak te printen.
vakken.forEach(vak => {
  console.log(vak)
});

// Een forEach lus die itereert over zowel het vak als de bijhorende index.
vakken.forEach((vak, index) => console.log(vak, index))

De for...in lus bestaat ook in JavaScript, maar deze itereert over de eigenschappen van een object. Dit betekent dat het resultaat van de for...in lus de indices (0, 1, 2, ...) van de array zijn in plaats van de waarden zelf. Omdat een leeg element in de array geen index heeft, zal de for...in lus deze overslaan terwijl de andere lussen dit niet doen.

Array-methoden

Begrip: Array-methoden

Arrays hebben een groot aantal ingebouwde methoden die je kunt gebruiken om bewerkingen op arrays uit te voeren. De volledige lijst is te vinden in de MDN documentatie. Hieronder bespreken we de belangrijkste:

• push(element1, ..., elementN): Voegt één of meerdere elementen toe aan het einde van de array.

  const cijfers = [1, 2, 3];
  cijfers.push(4); // cijfers is nu [1, 2, 3, 4]
  cijfers.push(5, 6); // cijfers is nu [1, 2, 3, 4, 5, 6]

• pop(): Verwijdert het laatste element van de array en retourneert dit element.

  const cijfers = [1, 2, 3];
  const laatste = cijfers.pop(); // laatste is 3, cijfers is nu [1, 2]

• shift(): Verwijdert het eerste element van de array en retourneert dit element.

  const cijfers = [1, 2, 3];
  const eerste = cijfers.shift(); // eerste is 1, cijfers is nu [2, 3]

• sort(): Sorteert de elementen van de array in plaats (standaard in lexicografische volgorde, volgens de ASCII tabel).

  const cijfers = [3, 1, 2];
  cijfers.sort(); // cijfers is nu [1, 2, 3]

• reverse(): Keert de volgorde van de elementen in de array om.

  const cijfers = [1, 2, 3];
  cijfers.reverse(); // cijfers is nu [3, 2, 1]

• join(separator): Combineert alle elementen van de array tot een enkele string, gescheiden door de opgegeven separator.

  const woorden = ['Hello', 'World'];
  const zin = woorden.join(' '); // zin is "Hello World"

• at(index): Retourneert het element op de opgegeven index. Ondersteunt negatieve indices om vanaf het einde te tellen.

  const cijfers = [10, 20, 30, 40, 50];
  const derde = cijfers.at(2); // derde is 30
  const laatste = cijfers.at(-1); // laatste is 50

• fill(value, start, end): Vult de array met het opgegeven value van de start index tot de end index (exclusief). Als start en end niet opgegeven zijn, wordt de hele array gevuld.

  const cijfers = [1, 2, 3, 4, 5];
  cijfers.fill(0); // cijfers is nu [0, 0, 0, 0, 0]

• filter(predicate): Creëert een nieuwe array met alle elementen die voldoen aan de voorwaarde gedefinieerd in de predicate functie.

  const cijfers = [1, 2, 3, 4, 5];
  const evenCijfers = cijfers.filter(num => num % 2 === 0); // evenCijfers is [2, 4]

• map(callback): Creëert een nieuwe array door de callback functie toe te passen op elk element van de originele array.

  const cijfers = [1, 2, 3];
  const verdubbeld = cijfers.map(num => num * 2); // verdubbeld is [2, 4, 6]

• reduce(callback, initialValue): Reduceert de array tot een enkele waarde door de callback functie toe te passen op elk element, met een optionele initialValue.

  const cijfers = [1, 2, 3, 4];
  const som = cijfers.reduce((accumulator, current) => accumulator + current, 0); // som is 10

• slice(start, end): Retourneert een nieuw array dat een deel van de originele array bevat, beginnend bij start index tot end index (exclusief). Als end niet opgegeven is, worden alle elementen vanaf start tot het einde van de array genomen.

  const cijfers = [1, 2, 3, 4, 5];
  const deel = cijfers.slice(1, 4); // deel is [2, 3, 4]

Sets

Sets worden gebruikt om verzamelingen van unieke waarden op te slaan. In tegenstelling tot arrays, kunnen sets geen dubbele waarden bevatten. Daarnaast zijn sets ongeordend, wat betekent dat de volgorde van de elementen niet behouden blijft.

Het belangrijkste voordeel van sets is dat het bijzonder snel is om te controleren of een waarde in de set aanwezig is. Dit maakt sets ideaal voor situaties waarin je vaak moet controleren op duplicaten of lidmaatschap. Voor arrays is het veel trager om te controleren of een waarde aanwezig is, omdat je in het slechtste geval de hele array moet doorlopen.

Begrip: Sets

Een Set is een datastructuur die overeenkomt met een verzameling in de wiskunde, duplicaten zijn dus onmogelijk.

Controleren of een waarde in een set aanwezig is, is bijzonder snel in vergelijking met een array.

// Een lege set
const emptySet = new Set();

// Een set met een aantal elementen
const languages = new Set(['JavaScript', 'Python', 'Java', 'C++', 'JavaScript']);
console.log(languages);

// Voeg een element toe aan de set
languages.add('C#');

// Verwijder een element uit de set
languages.delete('Java');

// Controleer of een element in de set zit
console.log('Python in set: ', languages.has('Python'));

// Itereren over de set
console.log('Talen in de set:')
for (const language of languages) {
  console.log(language);
}

Set-methoden

Begrip: Set-methoden

De volledige lijst van Set methoden is te vinden in de MDN documentatie. Hieronder bespreken we de belangrijkste:

• add(value): Voegt een nieuw element toe aan de set. Als het element al bestaat, verandert de set niet.

  const talen = new Set();
  talen.add('JavaScript');
  talen.add('Python');

• delete(value): Verwijdert een element uit de set. Retourneert true als het element werd verwijderd, anders false.

  const talen = new Set(['JavaScript', 'Python']);
  talen.delete('Python'); // retourneert true, talen bevat nu alleen 'JavaScript'

• has(value): Controleert of een element in de set aanwezig is. Retourneert true of false.

  const talen = new Set(['JavaScript', 'Python']);
  console.log(talen.has('JavaScript')); // retourneert true
  console.log(talen.has('C++')); // retourneert false

• clear(): Verwijdert alle elementen uit de set.

  const talen = new Set(['JavaScript', 'Python']);
  talen.clear(); // talen is nu een lege set

• union(otherSet): Retourneert een nieuwe set die de unie is van de huidige set en otherSet.

  const setA = new Set([1, 2, 3]);
  const setB = new Set([3, 4, 5]);
  const unionSet = setA.union(setB); // unionSet bevat 1, 2, 3, 4, 5

• intersection(otherSet): Retourneert een nieuwe set die de doorsnede is van de huidige set en otherSet.

  const setA = new Set([1, 2, 3]);
  const setB = new Set([2, 3, 4]);
  const intersectionSet = setA.intersection(setB); // intersectionSet bevat 2, 3

• difference(otherSet): Retourneert een nieuwe set die de elementen bevat die in de huidige set zitten maar niet in otherSet.

  const setA = new Set([1, 2, 3]);
  const setB = new Set([2, 3, 4]);
  const differenceSet = setA.difference(setB); // differenceSet bevat 1

Voorbeeldcode

Uitgewerkt lesvoorbeeld met commentaar