Functies van hogere orde in JavaScript begrijpen

JavaScript is een krachtige taal die door de meeste moderne browsers wordt ondersteund en is een uitstekende keuze voor beginners.

Net als veel andere moderne programmeertalen ondersteunt JavaScript functies waarmee u een codeblok kunt isoleren en ergens anders opnieuw kunt gebruiken. U kunt ook functies toewijzen aan variabelen en deze doorgeven als parameters, net als andere waarden.

Wat zijn functies van hogere orde?

De eenvoudigste definitie voor een functie van hogere orde is een functie die bewerkingen op andere functies uitvoert door ze als parameters te accepteren of terug te sturen. Functies van hogere orde worden veel gebruikt in de functioneel programmeerparadigma. Als je bent net begonnen met JavaScript, functies van hogere orde zijn misschien wat moeilijk te begrijpen.

Beschouw het volgende voorbeeld:

functietransformeren(fn) {
laten resultArray = [];
opbrengstfunctie (reeks) {
voor (laten ik = 0; i < array.lengte; ik++) {
 resultArray.push (fn (array[i]))
 }





instagram viewer
opbrengst resultArray
 }
}

In het codeblok hierboven, de transformeren functie is een functie van hogere orde die de fn function als een parameter en retourneert een anonieme functie die inneemt reeks als parameter.

Het doel van de transformeren functie is om de elementen in de array te wijzigen. Eerst definieert de code een variabele resultArray en bindt het aan een lege array.

De transformeren functie retourneert een anonieme functie die door elk element loopt reeks, geeft het element vervolgens door aan de fn functie voor berekening, en duwt het resultaat in resultArray. Na voltooiing van de lus retourneert de anonieme functie de resultArray.

const functie1 = transformeren((X) => X * 2)
troosten.log (functie1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Het bovenstaande codeblok wijst de anonieme functie toe die wordt geretourneerd door de transformeren functie naar de constante variabele functie1. fn retourneert het product van X wat een vervanging is voor reeks[i].

De code geeft ook een array als parameter door aan functie1 en logt vervolgens het resultaat naar de console. Een kortere manier om dit te schrijven zou zijn:

troosten.log (transform((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript heeft een ingebouwde functie van hogere orde die in principe hetzelfde doet als transformeren, die we later zullen behandelen.

Hopelijk begin je te begrijpen hoe functies van hogere orde in JavaScript werken. Kijk eens naar de volgende functie en kijk of je kunt raden wat deze doet.

functiefilterAndTransform(fn, arrayToBeFiltered, voorwaarde) {
laten gefilterdeArray = [];
voor (laten ik = 0; i < arrayToBeFiltered.lengte; ik++) {
als (voorwaarde (arrayToBeFiltered[i])) {
laten y = transformeren (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } anders {
 gefilterdArray.push (arrayToBeFiltered[i])
 }
 }
opbrengst gefilterdeArray
}

Dit codeblok definieert een functie die doet wat u misschien vermoedt: het zoekt naar de elementen in de array die aan een bepaalde voorwaarde voldoen en transformeert ze met de transformeren() functie. Om deze functie te gebruiken, doe je zoiets als dit:

filterEnTransform((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

In tegenstelling tot de transformeren functie, de filterAndTransform functie neemt twee functies als parameters: fn En voorwaarde. De voorwaarde functie controleert of de parameter is doorgegeven, een even getal is en retourneert waar. Anders retourneert het false.

Als voorwaarde lost op waar (aan de voorwaarde is voldaan), alleen dan is de transformeren functie genoemd. Deze logica kan van pas komen als u met een array werkt en bepaalde elementen wilt transformeren. Als u deze code uitvoert in de browserconsole, zou u het volgende antwoord moeten krijgen:

[ 1, 4, 3, 8, 5 ]

Je kunt zien dat de functie alleen de elementen transformeert die aan een bepaalde voorwaarde voldoen, en de elementen die niet aan de voorwaarde voldoen, laat zoals ze zijn.

De functie Array.map() van hogere orde in JavaScript

Array-methoden zoals map() zijn functies van hogere orde die het gemakkelijker maken om arrays te manipuleren. Dit is hoe het werkt.

laten matrix = [ 1, 2, 3, 4, 5 ];
laten transformArray = array.map((X) => X * 2);

Wanneer u zich aanmeldt transformArray in de browserconsole zou u hetzelfde resultaat moeten krijgen als bij de transformeren eerder genoemde functie:

[ 2, 4, 6, 8, 10 ]

array.map() neemt twee parameters op, de eerste parameter verwijst naar het element zelf, terwijl de tweede parameter verwijst naar de index van het element (positie in de array). Met slechts array.map() kunt u dezelfde resultaten bereiken als de filterAndTransform functie. Zo doe je het:

laten matrix = [ 1, 2, 3, 4, 5 ];
laten transformArray = array.map((X) => X % 20? X * 2: X);

In het bovenstaande codeblok retourneert de functie het product van het huidige element en 2, als het element even is. Anders wordt het element onaangeroerd geretourneerd.

Met de ingebouwde kaart functie, bent u erin geslaagd om de behoefte aan meerdere regels code te elimineren, wat resulteert in veel schonere code en minder kans op het optreden van bugs.

De functie Array.filter() in JavaScript

Wanneer je een beroep doet op de filter methode op een array, moet u ervoor zorgen dat de geretourneerde waarde van de functie die u aan de methode doorgeeft, waar of onwaar is. De filter methode retourneert een array met elementen die voldoen aan de doorgegeven voorwaarde. Hier is hoe je het gebruikt.

functiecheckEersteLetter(woord) {
laten klinkers = "aeiou"
als (klinkers.omvat(woord[0].naar kleine letters())) {
opbrengst woord;
 } anders {
opbrengst;
 }
}
laten woorden = [ "Hallo", "van", "de", "kinderen", "van", "planeet", "Aarde" ];
laten resultaat = woorden.filter((X) => checkEersteLetter (x))

Het bovenstaande codeblok doorkruist het woorden array en filtert elk woord waarvan de eerste letter een klinker is. Wanneer u de code uitvoert en de resultaat variabele, zou u de volgende resultaten moeten krijgen:

[ 'van', 'Aarde' ];

De functie Array.reduce() in JavaScript

De verminderen() functie van hogere orde neemt twee parameters in beslag. De eerste parameter is de reductiefunctie. Deze reductiefunctie is verantwoordelijk voor het combineren van twee waarden en het retourneren van die waarde. De tweede parameter is optioneel.

Het definieert de beginwaarde die aan de functie moet worden doorgegeven. Als u een som van alle elementen in een array wilt retourneren, kunt u het volgende doen:

laten een = [ 1, 2, 3, 4, 5];
laten som = 0;
voor (laten ik = 0; i < a.lengte; ik++) {
 som = som + a[i];
}
troosten.log (som);

Als je de code uitvoert, som moet 15 zijn. Je kunt het ook anders aanpakken met de verminderen functie.

laten een = [ 1, 2, 3, 4, 5 ];
som = a.verminderen((c, n) => c + n);
troosten.log (som);

Het bovenstaande codeblok is veel schoner in vergelijking met het eerdere voorbeeld. In dit voorbeeld neemt de reductiefunctie twee parameters op: C En N. C verwijst naar het huidige element while N verwijst naar het volgende element in de array.

Wanneer de code wordt uitgevoerd, gaat de reducer-functie door de array en zorgt ervoor dat de huidige waarde wordt toegevoegd aan het resultaat van de vorige stap.

De kracht van functies van hogere orde

Functies in JavaScript zijn krachtig, maar functies van een hogere orde tillen de zaken naar een hoger niveau. Ze worden veel gebruikt bij functioneel programmeren, waardoor u eenvoudig arrays kunt filteren, verkleinen en toewijzen.

Functies van hogere orde kunnen u helpen meer modulaire en herbruikbare code te schrijven bij het bouwen van applicaties.