Codekraker 9: Rhodé Reuijl - Werkenbijtopicus
naar topicus.nl
naar topicus.nl
Codekraker 9: Rhodé Reuijl

Codekraker 9: Rhodé Reuijl

'In één voorbeeld de reduce syntax van MDN verduidelijkt.'

Functioneel programmeren? Zet de for-loop aan de kant en ga voor reduce! 

Als developer loop je er vroeg of laat tegenaan; het moeten terugbrengen van een array naar één waarde. Bijvoorbeeld wanneer je de som, het gemiddelde of het grootste getal in je array te weten wil komen. Vaak worden hiervoor for-loops gebruikt, maar je kunt ook gebruikmaken van de ingebouwde array methode ‘reduce’. Reduce itereert over elke waarde van een array en geeft een enkele waarde terug (die zelf ook weer een array mag zijn).


Nog niet overtuigd om functioneel te programmeren? Een groot voordeel hiervan is dat dit gebruik maakt van pure functies. Pure functies geven altijd hetzelfde resultaat bij dezelfde input. Heb je een pure functie met een +1, dan komt er bij de input 5 altijd 6 als output uit. Ze hebben geen side-effects, alles vindt plaats in de functie body. Dat maakt ze ook beter te testen én makkelijker te doorgronden. Hoewel je ook pure functies kun schrijven met een for-loop wordt dit meer afgedwongen door gebruik van functies zoals de map, filter en reduce doordat deze functies van zichzelf de oorspronkelijke input niet aanpassen. Met de principes van functioneel programmeren is de code meer voorspelbaar, transparanter, eenvoudiger om te schrijven, te testen, te begrijpen én te onderhouden.


Ik begrijp het als je in eerste instantie niet meteen staat te juichen bij de reduce syntax van MDN: arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue]) en de uitleg daarbij. Maar maak je geen zorgen, je bent niet de enige die syntax niet meteen begrijpt. Onderstaand een voorbeeld die de functie duidelijker maakt.


const myArray = [2, 3, 4, 5, 6];

let reduced = myArray.reduce((accumulator, arrayVal) => { return arrayVal + accumulator });

// => accumulator= 2; arrayVal = 3 

// => accumulator= 5; arrayVal = 4 

// => accumulator= 9; arrayVal = 5 

// => accumulator= 14; arrayVal = 6 

// => reduced = 20


De accumulator is eigenlijk iets heel simpels. Hij verzamelt de gereturnde waardes van de callback functie. In de callback functie wordt aangegeven dat de waarde van het array-item opgeteld moet worden bij de accumulator. Dit betekent dat in de callback-functie de som accumulator (2) + arrayValue (3) uitgevoerd wordt, wat resulteert in de accumulator met waarde 5. Daar wordt in de callback dan weer de arrayValue 4 bij opgeteld, wat zorgt voor accumulator 9. Dit principe gaat door totdat de laatste waarde bij de accumulator wordt opgeteld en gereturnd. En dat is de basisfunctionaliteit van de reduce al! Wil je meer weten over reduce? Lees dan mijn uitgebreide blog met meer voorbeelden.

Benieuwd naar andere codekrakers? Lees de tips van Nick, Dennis, Frank, Ramon, Jeroen, Sally en Lisette, Jim.

Meer weten?

Neem contact op met

Rhodé Reuijl