Arrays en arrow-functies in Javascript

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.