JavaScript reduce(): zo werkt de array-methode in de praktijk

let result = array.reduce((acc, v, i, a) => {
// geeft de nieuwe waarde terug aan de variabele 
}, initVal);

// result - de enige waarde die wordt teruggegeven.
// array - de array waarop de reduce-functie draait.
// acc - de accumulator verzamelt alle teruggegeven waarden.
// v - de waarde die op dit moment wordt verwerkt
// i - de index van de waarde die op dit moment wordt verwerkt.
// a - de oorspronkelijke array
// initVal - een optionele beginwaarde.
// Wordt er geen beginwaarde meegegeven,
// dan wordt element 0 als beginwaarde gebruikt.

Je kunt de JavaScript-methode reduce zien als een for-lus die speciaal bedoeld is om met de waarden van een array iets nieuws op te bouwen. Bekijk dit voorbeeld eens.

var array = [11, 12, 13, 14];
var sum = 0;
for(var i = 0; i  < array.length; i++) {
      sum += array[i];
 }

// sum = 50

De code hierboven telt alle waarden van onze array bij elkaar op. Dat werkt, maar er is een eenvoudigere manier om hetzelfde resultaat te krijgen.

We herschrijven die functie met de JavaScript-methode reduce().

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v);
// sum = 50

Hetzelfde resultaat, zonder ook maar één lus.

We hebben de variabele bcc gebruikt om onze optelling bij te houden. Zolang reduce() door de array loopt, blijft de waarde van bcc groeien tot de functie klaar is.

Weet je nog dat ik zei dat we een optionele beginwaarde kunnen meegeven? Dat is zo geregeld. We nemen hetzelfde voorbeeld als hiervoor: we tellen onze array op, maar deze keer beginnen we bij 250.

Hoe ziet dat eruit met een beginwaarde van 250? Het voorbeeld hieronder laat het zien.

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v, 250);

Zoals je ziet is de code hierboven bijna gelijk aan het vorige voorbeeld. Het enige verschil is een tweede argument na onze callback: ik geef het getal 250 mee als startpunt. Draait de functie nu, dan komt de som uit op 300.

Ik hoop dat je hier iets aan hebt. Er staan nog meer artikelen over JavaScript op de site, waaronder over arrays, bijvoorbeeld over hoe je twee JavaScript-arrays samenvoegt.