Eine kurze Einführung in Funktionen höherer Ordnung in JavaScript

Funktionen höherer Ordnung

Eine Funktion, die eine andere Funktion akzeptiert und / oder zurückgibt, wird als Funktion höherer Ordnung bezeichnet .

Es ist von höherer Ordnung, weil es anstelle von Zeichenfolgen, Zahlen oder Booleschen Werten höher ist , um Funktionen zu bearbeiten . Ziemlich meta.

Mit Funktionen in JavaScript können Sie

  • Speichern Sie sie als Variablen
  • Verwenden Sie sie in Arrays
  • Weisen Sie sie als Objekteigenschaften (Methoden) zu.
  • Übergeben Sie sie als Argumente
  • Geben Sie sie von anderen Funktionen zurück

Wie jedes andere Datenelement . Das ist der Schlüssel hier.

Funktionen arbeiten mit Daten

Zeichenfolgen sind Daten

sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!' 

Zahlen sind Daten

double = (x) => x * 2; result = double(4); console.log(result); // 8 

Boolesche Werte sind Daten

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied' 

Objekte sind Daten

getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed' 

Arrays sind Daten

len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3 

Diese 5 Typen sind erstklassige Bürger in jeder gängigen Sprache.

Was macht sie erstklassig? Sie können sie weitergeben, in Variablen und Arrays speichern und als Eingaben für Berechnungen verwenden. Sie können sie wie jedes Datenelement verwenden .

Funktionen können auch Daten sein

Funktioniert als Argumente

isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4] 

Sehen Sie, wie filterAnwendungen isEvenzu entscheiden , welche Zahlen zu halten? isEven, eine Funktion , war ein Parameter für eine andere Funktion .

Es wird filterfür jede Nummer von aufgerufen und verwendet den zurückgegebenen Wert trueoder um falsezu bestimmen, ob eine Nummer beibehalten oder verworfen werden soll.

Rückgabe von Funktionen

add = (x) => (y) => x + y; 

adderfordert zwei Parameter, aber nicht alle gleichzeitig. Es ist eine Funktion, die nach just fragt x, die eine Funktion zurückgibt, die nach just fragt y.

Dies ist wiederum nur möglich, weil JavaScript zulässt, dass Funktionen ein Rückgabewert sind - genau wie Zeichenfolgen, Zahlen, Boolesche Werte usw.

Sie können weiterhin xund ysofort, wenn Sie möchten, mit einem doppelten Aufruf versorgen

result = add(10)(20); 
console.log(result); // 30 

Oder xjetzt und yspäter:

add10 = add(10); result = add10(20); console.log(result); // 30 

Lassen Sie uns das letzte Beispiel zurückspulen. add10ist das Ergebnis eines Aufrufs addmit einem Parameter. Versuchen Sie, es in der Konsole zu protokollieren.

add10ist eine Funktion, die a nimmt yund zurückgibt x + y. Nachdem Sie geliefert haben y, müssen Sie Ihr Endergebnis schnell berechnen und zurückgeben.

Höhere Wiederverwendbarkeit

Der wahrscheinlich größte Vorteil von HOFs ist die größere Wiederverwendbarkeit. Ohne sie Premiere Array Methoden der JavaScript -  map, filterund reduce - nicht existieren würde!

Hier ist eine Liste der Benutzer. Wir werden einige Berechnungen mit ihren Informationen durchführen.

users = [ { name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 } ]; 

Karte

Ohne Funktionen höherer Ordnung würden wir immer Schleifen benötigen, um mapdie Funktionalität nachzuahmen .

getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Oder wir könnten das tun!

usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Filter

In einer Welt ohne HOF würden wir immer noch Schleifen benötigen, um auch filterdie Funktionalität wiederherzustellen .

startsWithB = (string) => string.toLowerCase().startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Oder wir könnten das tun!

namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Reduzieren

Ja, auch reduzieren ... Ohne Funktionen höherer Ordnung kann man nicht viel cooles machen !! ?

total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75 

Wie ist das?

totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 

Zusammenfassung

  • Zeichenfolgen, Zahlen, Bools, Arrays und Objekte können als Variablen, Arrays und Eigenschaften oder Methoden gespeichert werden.
  • JavaScript behandelt Funktionen auf die gleiche Weise.
  • Dies ermöglicht Funktionen, die mit anderen Funktionen arbeiten: Funktionen höherer Ordnung .
  • Zuordnen, Filtern und Reduzieren sind erstklassige Beispiele - und vereinfachen häufig verwendete Muster wie das Transformieren, Suchen und Summieren von Listen erheblich!

I’m on Twitter if you’d like to talk. Until next time!

Take care,

Yazeed Bzadough

yazeedb.com