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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten