Higher order functions

Functies zijn waardes, je kan (een anonieme) functie meegeven in een variabele. Functies in JavaScript kan je:

• opslaan in variabelen
• gebruiken in arrays
• een object property meegeven
• meegeven als argument
• returnen van andere functies Net als andere stukjes data.

Een functie dat een andere functie accepteert als argument, of een functie die een andere functie returns is een higher order function. Voordelen van HOF zijn map, filter en reduce

Filter

Filter is een function op een array, dat een andere functie als argument accepteert. Het filtert uit elementen die niet aan de voorwaarden voldoen, waarmee een nieuwe gefilterde array returned wordt.

var animals = [
{ name: 'Caro', species: 'dog' },
{ name: 'Jimmy', species: 'cat' },
{ name: 'Bruno', species: 'dog' }
]

var dogs = animals.filter(function(animal) {
  return animal.species === 'dog'
})

console.log(dogs)
//returns array [{ name: 'Caro', species: 'dog' },{ name: 'Bruno', species: 'dog' }]

Map

De map method past een array aan door een functie toe te passen op alle elementen, waardoor er een nieuwe array ontstaat met de returned values.

var animals = [
{ name: 'Caro', species: 'dog' },
{ name: 'Jimmy', species: 'cat' },
{ name: 'Bruno', species: 'dog' }
]

var names = animals.map(function(animal){
  return animal.name + ' is a ' + animal.species
})

console.log(names) 
// Returns een array ["Caro is a dog", "Jimmy is a cat", "Bruno is a dog"]

Reduce

Reduce is maakt een value door een element uit een array te halen en deze te combineren met de huidige waarde. Met reduce moet je behalve een functie ook een begin waarde meegeven. In dit geval is de begin waarde 0. Sum geeft deze begin waarde mee aan de functie.

var orders = [
{ amount: 250 },
{ amount: 400 },
{ amount: 100 },
{ amount: 325 },
]

var totalAmount = orders.reduce(function(sum, order){
  console.log('hello', sum, order)
  return sum + order.amount
}, 0)

console.log(totalAmount)
//Returns 1075

De eerste console.log returns:
hello 0 {amount: 250}
hello 250 {amount: 400}
hello 650 {amount: 100}
hello 750 {amount: 325}

Zo kan je zien dat de sum in eerste instantie 0 is. Dan wordt het eerste element uit de array erbij opgeteld. In de tweede iteratie is de waarde van sum 250 waarbij dat het tweede element uit de array bij opgeteld worden. Enz.

Bronnen

Fun Fun Function. (2015). Higher-order functions - Part 1 of Functional Programming in JavaScript [Videobestand]. YouTube. Geraadpleegd van https://www.youtube.com/watch?v=BMUiFMZr7vk
Bzadough, Y. (2019, 27 juni). A quick intro to Higher-Order Functions in JavaScript. Geraadpleegd op 27 mei 2020, van https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/
Haverbeke, M. (z.d.). Higher-Order Functions :: Eloquent JavaScript. Geraadpleegd op 27 mei 2020, van https://eloquentjavascript.net/05_higher_order.html
Fun Fun Function. (2015b). Map - Part 2 of Functional Programming in JavaScript [Videobestand]. YouTube. Geraadpleegd van https://www.youtube.com/watch?v=bCqtb-Z5YGQ
Fun Fun Function. (2015c). Reduce basics - Part 3 of Functional Programming in JavaScript [Videobestand]. YouTube. Geraadpleegd van https://www.youtube.com/watch?v=Wl98eZpkp-c