Arrays en arrow-functies in Javascript

Geschreven door: op dinsdag 16 juni 2020

Leestijd: 3 minuten

In moderne browsers kan je gebruikmaken van de nieuwe Javascript-functionaliteiten. Arrays zijn in de loop der jaren uitgebreid met enkele krachtige functies en mogelijkheden. Hieronder staan er een paar van beschreven met wat simpele voorbeelden.

Voorheen moest je door een array itereren middels een for-loop, als je iets gedaan wilde krijgen met items in die array. Om alle teksten om te zetten naar kleine letters, zou je doen:

var woorden = ['HOOFDletters', 'Enkele hoofdletter', 'test'];

var woordenKleineLetters = [];

for(var i = 0; i < woorden.length; i++){
    woordenKleineLetters.push(woorden[i].toLowerCase());
}

console.log(woorden); //[ "HOOFDletters", "Enkele hoofdletter", "test" ]
console.log(woordenKleineLetters); //[ "hoofdletters", "enkele hoofdletter", "test" ]

Of om alle woorden terug te krijgen die beginnen met een hoofdletter:

var woorden = ['HOOFDletters', 'Enkele hoofdletter', 'test'];

var woordenBeginnenMetHoofdletters = [];

for(var i = 0; i < woorden.length; i++){
    if(woorden[i].match(/[A-Z]+/)){
        woordenBeginnenMetHoofdletters.push(woorden[i]);
    }
}

console.log(woorden); //[ "HOOFDletters", "Enkele hoofdletter", "test" ]
console.log(woordenBeginnenMetHoofdletters); //[ "HOOFDletters", "Enkele hoofdletter" ]

Met de moderne mogelijkheden van Javascript kan je dat een stuk eenvoudiger doen:

var woordenKleineLetters = woorden.map(function(x){
    return x.toLowerCase();
});

console.log(woordenKleineLetters); //[ "hoofdletters", "enkele hoofdletter", "test" ]

Of:

var woordenBeginnenMetHoofdletters = woorden.filter(function(x){
    return x.match(/[A-Z]/);
});

console.log(woordenBeginnenMetHoofdletters); //[ "HOOFDletters", "Enkele hoofdletter" ]

Map en filter zorgen ervoor dat je geen for-loop meer hoeft te gebruiken om bepaalde handelingen uit te voeren per item in een array. Dit wordt impliciet afgehandeld door deze functies. Wat zijn in deze dan handige functies? De volgende:

  • filter: Geef alleen de items terug die voldoen aan een bepaalde voorwaarde.
  • map: Pas bewerking toe op alle items in een array.
  • forEach: Loop door alle items en voer instructies uit.
  • every: Geeft True terug als alle items in een array voldoen aan een bepaalde voorwaarde.
  • some: Geeft True terug als minstens één item in een array voldoet aan een bepaalde voorwaarde.

Voor meer informatie over methodes van Array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array#Instancemethods.

Daarnaast geeft ES6 de mogelijkheid om arrow functions te gebruiken. Dit zijn functies die op een eenvoudigere manier zijn te op te bouwen, als het om kleine functies gaat, en die ook enkele unieke eigenschappen hebben. De syntax is als volgt:

(argumenten) => (statements)

Je kan 1 of meerdere argumenten opgeven en het resultaat van de laatste statement is altijd de return-waarde. Bijvoorbeeld:

var woordenKleineLetters = woorden.map(x => x.toLowerCase());

console.log(woordenKleineLetters); //[ "hoofdletters", "enkele hoofdletter", "test" ]

Deze manier van functies schrijven sluit ook beter aan bij Linq in C#, bijvoorbeeld.

Als een functie één argument vraagt, dan kan je deze schrijfwijze ook korter maken, zie:

var beginsWithUpperCase = x => x.match(/^[A-Z]/);
var containsNumbers = x => x.match(/\d+/);

var reeks = ["abc1", "ABC", "Abc1", "2BE", "B23"];
var resultaat = reeks
    .filter(beginsWithUpperCase) //[ "ABC", "Abc1", "B23" ]
    .filter(containsNumbers);  //[ "Abc1", "B23" ]

Op deze manier kan je filters definiëren en toepassen wanneer je wilt, op verschillende arrays.

Er zijn echter wel enkele zaken waar je rekening mee moet houden. Zo verwijst this binnen een functie naar een bepaald object, afhankelijk van hoe de functie wordt aangeroepen. Arrow-functies bevatten geen eigen this-variabele en verwijzen dus naar de this van de bovenliggende scope. Hetzelfde geldt voor de variabele arguments; arguments[n] bestaat niet in de arrow-context en verwijst naar de bovenliggende scope.

Dit maakt het gebruik van arrow-functies vaak echter gemakkelijker. Zie verder: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.


Andere blogartikelen

  • Herschrijf regels binnen IIS: Introductie

    Geschreven door: op maandag 28 juni 2021

    Herschrijf regels binnen IIS: IntroductieIIS herschrijf regels zijn een krachtige tool om URls te herschrijven zodat deze bijvoorbeeld beter bruikbaar en begrijpelijker zijn voor de gebruikers. Door ...

    Bekijk het artikel »
  • Voorwaardelijke URL Rewrites

    Geschreven door: op donderdag 24 juni 2021

    In IIS kan je met behulp van rewrites de aanvragen naar je site omleiden of aanpassen. Deze rewrites wil je vaak niet altijd toepassen, maar voorwaardelijk. Hiervoor kan je condities gebruiken. Bij he ...

    Bekijk het artikel »
  • Debuggen met breakpoints in Visual Studio

    Geschreven door: op maandag 21 juni 2021

    Het ontwikkelen van applicaties bestaat voor een groot gedeelte uit het oplossen van problemen en het vinden en verhelpen van vreemde bugs. Er zijn hier veel hulpmiddelen en strategieën voor. Je kan f ...

    Bekijk het artikel »
Bel 072 5345 888
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book Â»

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º