Comprendre les fonctions d'ordre supérieur en JavaScript

JavaScript est un langage puissant pris en charge par la plupart des navigateurs modernes, et c'est un excellent choix pour les débutants.

Comme de nombreux autres langages de programmation modernes, JavaScript prend en charge des fonctions qui vous permettent d'isoler un bloc de code et de le réutiliser ailleurs. Vous pouvez également utiliser des fonctions d'affectation à des variables et les transmettre en tant que paramètres, comme d'autres valeurs.

Que sont les fonctions d'ordre supérieur?

La définition la plus simple d'une fonction d'ordre supérieur est une fonction qui effectue des opérations sur d'autres fonctions en les acceptant comme paramètres ou en les retournant. Les fonctions d'ordre supérieur sont largement utilisées dans le paradigme de la programmation fonctionnelle. Si vous êtes Je viens juste de commencer avec JavaScript, les fonctions d'ordre supérieur peuvent être un peu difficiles à saisir.

Considérez l'exemple suivant :

fonctiontransformer(fn) {
laisser tableaurésultat = [] ;
retourfonction (déployer) {
pour (laisser je = 0; je < tableau.longueur; je++) {
 resultArray.push (fn (tableau[i]))
 }
retour tableaurésultats
 }
}

Dans le bloc de code ci-dessus, le transformer fonction est une fonction d'ordre supérieur qui prend en fn fonction en paramètre et renvoie une fonction anonyme qui prend en déployer comme paramètre.

Le but de la transformer fonction est de modifier les éléments du tableau. Tout d'abord, le code définit une variable tableaurésultats et le lie à un tableau vide.

Le transformer fonction renvoie une fonction anonyme qui parcourt chaque élément de déployer, puis passe l'élément à la fn fonction pour le calcul, et pousse le résultat dans tableaurésultats. Après l'achèvement de la boucle, la fonction anonyme renvoie le tableaurésultats.

constante fonction1 = transformer((X) => X * 2)
console.log (fonction1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Le bloc de code ci-dessus affecte la fonction anonyme renvoyée par le transformer fonction à la variable constante fonction1. fn retourne le produit de X qui remplace tableau[i].

Le code passe également un tableau, en tant que paramètre à fonction1 puis enregistre le résultat dans la console. Une manière plus courte d'écrire ceci serait:

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

JavaScript a une fonction intégrée d'ordre supérieur qui fait essentiellement la même chose que transformer, que nous aborderons plus tard.

J'espère que vous commencez à comprendre comment fonctionnent les fonctions d'ordre supérieur en JavaScript. Jetez un œil à la fonction suivante et voyez si vous pouvez deviner ce qu'elle fait.

fonctionfiltreEtTransformer(fn, arrayToBeFiltered, condition) {
laisser tableaufiltré = [] ;
pour (laisser je = 0; je < arrayToBeFiltered.length; je++) {
si (condition (arrayToBeFiltered[i])) {
laisser y = transformer (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } autre {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
retour tableau filtré
}

Ce bloc de code définit une fonction qui fait ce que vous pourriez soupçonner: elle vérifie les éléments du tableau qui remplissent une certaine condition et les transforme avec la transformer() fonction. Pour utiliser cette fonction, vous faites quelque chose comme ceci :

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

Contrairement à la transformer fonction, La filtreEtTransformer function prend deux fonctions en paramètre: fn et condition. Le condition La fonction vérifie si le paramètre passé est un nombre pair et renvoie true. Sinon, il renvoie faux.

Si condition se résout à vrai (la condition est remplie), alors seulement le transformer fonction appelée. Cette logique peut être utile si vous travaillez avec un tableau et souhaitez transformer certains éléments. Si vous exécutez ce code dans la console du navigateur, vous devriez obtenir la réponse suivante :

[ 1, 4, 3, 8, 5 ]

Vous pouvez voir que la fonction ne transforme que les éléments qui remplissent une certaine condition, laissant les éléments qui ne remplissent pas la condition, tels quels.

La fonction d'ordre supérieur Array.map() en JavaScript

Méthodes de tableau comme map() sont des fonctions d'ordre supérieur qui facilitent la manipulation des tableaux. Voici comment cela fonctionne.

laisser tableau = [ 1, 2, 3, 4, 5 ];
laisser tableautransformé = tableau.map((X) => X * 2);

Lorsque vous vous connectez tableautransformé dans la console du navigateur, vous devriez obtenir le même résultat que vous avez obtenu avec le transformer fonction mentionnée précédemment :

[ 2, 4, 6, 8, 10 ]

tableau.map() prend deux paramètres, le premier paramètre fait référence à l'élément lui-même, tandis que le second paramètre fait référence à l'index de l'élément (position dans le tableau). Avec juste tableau.map() vous pouvez obtenir les mêmes résultats que le filtreEtTransformer fonction. Voici comment procéder :

laisser tableau = [ 1, 2, 3, 4, 5 ];
laisser tableautransformé = tableau.map((X) => X % 20? X * 2: X);

Dans le bloc de code ci-dessus, la fonction renvoie le produit de l'élément actuel et 2, si l'élément est pair. Sinon, il renvoie l'élément intact.

Avec le carte fonction, vous avez réussi à éliminer le besoin de plusieurs lignes de code, résultant ainsi en un code beaucoup plus propre et moins de chances que des bogues se produisent.

La fonction Array.filter() en JavaScript

Lorsque vous invoquez le filtre méthode sur un tableau, assurez-vous que la valeur de retour de la fonction que vous transmettez à la méthode est vraie ou fausse. Le filtre La méthode retourne un tableau contenant les éléments qui remplissent la condition passée. Voici comment vous l'utilisez.

fonctioncheckPremièreLettre(mot) {
laisser voyelles = "aiou"
si (voyelles.comprend(mot[0].toLowerCase())) {
retour mot;
 } autre {
retour;
 }
}
laisser mots = [ "Bonjour", "depuis", "le", "enfants", "de", "planète", "Terre" ];
laisser résultat = mots.filtre((X) => checkFirstLetter (x))

Le bloc de code ci-dessus traverse le mots tableau et filtre tout mot dont la première lettre est une voyelle. Lorsque vous exécutez le code et enregistrez le résultat variable, vous devriez obtenir les résultats suivants :

[ 'de', 'Terre' ];

La fonction Array.reduce() en JavaScript

Le réduire() fonction d'ordre supérieur prend deux paramètres. Le premier paramètre est la fonction de réduction. Cette fonction de réduction est chargée de combiner deux valeurs et de renvoyer cette valeur. Le deuxième paramètre est facultatif.

Il définit la valeur initiale à passer à la fonction. Si vous souhaitez renvoyer la somme de tous les éléments d'un tableau, vous pouvez procéder comme suit :

laisser un = [ 1, 2, 3, 4, 5];
laisser somme = 0;
pour (laisser je = 0; i < a.longueur; je++) {
 somme = somme + a[i] ;
}
console.log (somme);

Si vous exécutez le code, somme devrait être 15. Vous pouvez également adopter une approche différente avec le réduire fonction.

laisser un = [ 1, 2, 3, 4, 5 ];
somme = a.reduce((c, n) => c + n);
console.log (somme);

Le bloc de code ci-dessus est beaucoup plus propre par rapport à l'exemple précédent. Dans cet exemple, la fonction de réduction prend en compte deux paramètres: c et n. c fait référence à l'élément courant tandis que n fait référence à l'élément suivant dans le tableau.

Lorsque le code s'exécute, la fonction de réduction parcourt le tableau, en veillant à ajouter la valeur actuelle au résultat de l'étape précédente.

La puissance des fonctions d'ordre supérieur

Les fonctions en JavaScript sont puissantes, mais les fonctions d'ordre supérieur font passer les choses au niveau supérieur. Ils sont largement utilisés dans la programmation fonctionnelle, vous permettant de filtrer, réduire et mapper facilement des tableaux.

Les fonctions d'ordre supérieur peuvent vous aider à écrire un code plus modulaire et réutilisable lors de la création d'applications.