Arrays en arrow-functies in Javascript header image

Arrays en arrow-functies in Javascript

dinsdag 16 juni 2020 ·Leestijd: 3 minuten
contacteer auteur:

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

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
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 â€º