Une introduction rapide aux fonctions d'ordre supérieur en JavaScript

Fonctions d'ordre supérieur

Une fonction qui accepte et / ou renvoie une autre fonction est appelée une fonction d'ordre supérieur .

Il est d'ordre supérieur car au lieu de chaînes, de nombres ou de booléens, il va plus haut pour agir sur les fonctions. Jolie méta.

Avec des fonctions en JavaScript, vous pouvez

  • Stockez-les en tant que variables
  • Utilisez-les dans des tableaux
  • Assignez-les en tant que propriétés d'objet (méthodes)
  • Passez-les comme arguments
  • Renvoyez-les d'autres fonctions

Comme toute autre donnée . C'est la clé ici.

Les fonctions agissent sur les données

Les chaînes sont des données

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

Les nombres sont des données

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

Les booléens sont des données

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

Les objets sont des données

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

Les tableaux sont des données

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

Ces 5 types sont des citoyens de première classe dans toutes les langues courantes.

Qu'est-ce qui les rend de première classe? Vous pouvez les transmettre, les stocker dans des variables et des tableaux, les utiliser comme entrées pour les calculs. Vous pouvez les utiliser comme n'importe quelle donnée .

Les fonctions peuvent aussi être des données

Fonctions comme arguments

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

Voyez comment filterutilise isEvenpour décider quels nombres garder? isEven, une fonction , était un paramètre d'une autre fonction .

Il est appelé par filterpour chaque numéro et utilise la valeur renvoyée trueou falsepour déterminer si un nombre doit être conservé ou supprimé.

Fonctions de retour

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

addnécessite deux paramètres, mais pas tous à la fois. C'est une fonction demandant juste x, qui renvoie une fonction demandant juste y.

Encore une fois, cela n'est possible que parce que JavaScript permet aux fonctions d'être une valeur de retour - tout comme les chaînes, les nombres, les booléens, etc.

Vous pouvez toujours fournir xet yimmédiatement, si vous le souhaitez, une double invocation

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

Ou xmaintenant et yplus tard:

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

Revenons en arrière sur ce dernier exemple. add10est le résultat d'un appel addavec un paramètre. Essayez de le connecter dans la console.

add10est une fonction qui prend a yet retourne x + y. Une fois que vous avez fourni y, il se dépêche de calculer et de renvoyer votre résultat final.

Une plus grande réutilisabilité

Le plus grand avantage des HOF est probablement une plus grande réutilisabilité. Sans eux, première méthodes de Array JavaScript -  map, filteret reduce - n'existeraient pas!

Voici une liste d'utilisateurs. Nous allons faire des calculs avec leurs informations.

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

Carte

Sans fonctions d'ordre supérieur, nous aurions toujours besoin de boucles pour imiter maples fonctionnalités de.

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"] 

Ou nous pourrions le faire!

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

Filtre

Dans un monde sans HOF, nous aurions toujours besoin de boucles pour recréer filterles fonctionnalités de.

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 }] 

Ou nous pourrions le faire!

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

Réduire

Ouais, réduisez aussi ... Vous ne pouvez pas faire beaucoup de trucs sympas sans fonctions d'ordre supérieur !! ?

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

Comment c'est?

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

Sommaire

  • Les chaînes, les nombres, les booléens, les tableaux et les objets peuvent être stockés sous forme de variables, de tableaux et de propriétés ou de méthodes.
  • JavaScript traite les fonctions de la même manière.
  • Cela permet des fonctions qui opèrent sur d'autres fonctions: des fonctions d'ordre supérieur .
  • Mapper, filtrer et réduire sont des exemples de premier ordre - et simplifient considérablement les modèles courants tels que la transformation, la recherche et la sommation de listes!

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

Take care,

Yazeed Bzadough

yazeedb.com