Arrays II & callbacks

Array Filter

Een vaakvoorkomende array methode is de .filter() methode. Wanneer je deze methode op een array aanroept, krijg je een andere array terug die enkele items uit de oorspronkelijke array bevat, op basis van de door jouw opgegeven voorwaarde.

Bijvoorbeeld:

const numbers = [9, 5, 14, 3, 11];

const numbersAboveTen = numbers.filter(function(number) {
    return number > 10;
});
console.log(numbersAboveTen); // [14, 11]

Let op hoe je een nieuwe array terugkrijgt die de items bevat die aan de voorwaarde hebben voldaan. De voorwaarde is dat het nummer boven de 10 moet zijn.

Array.filter(callback)

Hoe werkt dit?

De .filter() methode verwacht een callback als eerste argument. In dit voorbeeld is de callback:

function(number) {
    return number > 10;
}

JavaScript pakt deze callback en roept deze aan voor elk afzonderlijk item in de array. De numbers array heeft 5 items, dus roept deze 5 keer aan. Elke keer dat deze functie wordt aangeroepen, geeft deze een waarde aan de numberparameter die in deze callback is opgegeven.

1. De eerste keer dat het wordt uitgevoerd, wordt de numberwaarde 9 (het eerste item in de array) weergegeven.
2. De tweede keer dat het wordt uitgevoerd, wordt de numberwaarde 5 (het tweede item in de array) weergegeven.
3. enzovoort, tot aan het laatste item van de array.

Zo werken callbacks. Nu heeft elke array-methode een ander gedrag. Dit gedrag is vaak afhankelijk van het resultaat van de callback. In dit voorbeeld, als de callback-functie true returned, dan wordt het item opgenomen in de uiteindelijke array die wordt gereturned door .filter(). Echter, als de callback-functie false returned, dan wordt het item niet opgenomen in de uiteindelijke array .

Dat betekent dat als je de onderstaande code hebt:

numbers.filter(function(number) {
    return true;
});

Dit returned elk item in de array. Je krijgt dus een kopie van de originele array. Dat komt omdat de callback altijd true returned. Daarom hadden we een voorwaarde number > 10. Deze voorwaarde zal ofwel true of false returnen, afhankelijk van de waarde van de number.