Codekraker 9: Rhodé Reuijl - Werkenbijtopicus

Topicus maakt gebruik van cookies

Werkenbijtopicus.nl gebruikt cookies om jou beter van dienst te zijn. We plaatsen analytische en functionele cookies om jouw websitegedrag op onze website te volgen en te verzamelen zodat we onze website kunnen verbeteren. Met jouw akkoord plaatsen we ook trackingcookies van adverteerders zodat derde partijen advertenties kunnen tonen op basis van jouw interesses. Daarnaast plaatsen we met jouw akkoord profileringscookies om de inhoud van onze website aan te kunnen passen aan de hand van jouw gebruikersprofiel.
Lees meer in onze cookieverklaring

naar topicus.nl
naar topicus.nl

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