Vi gick kort igenom vad som definierar en Higher Order Function och hur vi med hjälp av Higher Order Array Methods kan jobba med array:er på ett enklare och smidigare sätt än traditionella for och forEach-loopar.
Higher Order Array Methods
.filter()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
.map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
.reduce()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
.sort()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
.find()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Tutorials
Higher-order functions in Javascript
https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b
Understanding Higher-Order Functions in JavaScript
https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad
Simplify your JavaScript – Use .map(), .reduce(), and .filter()
https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
Video-tutorials
Fun Fun Function’s tutorial om Higher Order Array Functions i JavaScript
Kan varmt rekommendera Mattias videos om Functional Programming in JavaScript. Just nu är det bara video 1-5 som är relevant för oss.
JavaScript Higher Order Functions & Arrays
Brad från Traversy Media går igenom forEach, map, filter, reduce och sort.
Workshop
Ta er TODO-app från lektion 6-7 (eller hämta min kod ifrån mappen 05-dom i GitHub-repositoryt för kursen) och skriv om den till att visa alla avklarade TODOs i en separat lista.
Målet är att så fort man slutför en TODO så ska listorna renderas om och den nyss avklarade TODO:n ska försvinna från den övre listan och poppa upp i den nedre. Så klart ska det fungera att ta en avklarad TODO och sätta den till ”ej slutförd” och den dyker då upp i den övre listan.
Obs att ni ska INTE ha två separata ”huvud”-array:er för detta, utan endast en som innehåller både de oavklarade och de avklarade TODO:na! Sen filtrerar ni ut oavklarade och avklarade TODO:s först när ni behöver rendera dem till sidan.
Vill ni öva ännu mer så kan ni
- Sortera era TODOs efter beskrivning (
description) - Skriva om klick-handler:n till att använda
.find()för att hitta den TODO man klickade på
Till nästa lektion
Förutom att göra ovan workshop så titta på någon av (eller båda!) videos ovan.