Fonctions d'ordre supérieur en JavaScript: qu'est-ce que c'est?

Nous vous présentons une traduction d'un article de Sukhjinder Arora publié sur Bits and Pieces . Découvrez sous le chat les fonctions d'ordre supérieur en JavaScript et quelques autres fonctions intégrées dans ce langage.


Photo de NESA par Makers de Unsplash

En apprenant la programmation JavaScript, vous êtes probablement tombé sur le concept de fonctions d'ordre supérieur . Bien que ce concept puisse sembler intimidant, ce n'est en fait pas si compliqué.

Grâce à la possibilité de travailler avec des fonctions d'ordre supérieur, JavaScript convient à la programmation fonctionnelle.

Les fonctions d'ordre supérieur sont courantes en JavaScript. Si vous avez travaillé avec lui pendant un certain temps, il est très probable que vous ayez utilisé de telles fonctions sans même vous en rendre compte.

Pour obtenir une image complète des fonctions d'ordre supérieur, vous devez d'abord comprendre ce qu'est la programmation fonctionnelle et les fonctions de première classe .

Conseil : la réutilisation des fonctions JavaScript entraîne souvent des doublons. Pour éviter cela, utilisez Bit (GitHub) . Vous pouvez facilement trouver de nouvelles fonctionnalités, les partager et les réappliquer avec un minimum de changements de gestion. Essayez-le, ne soyez pas timide.

Qu'est-ce que la programmation fonctionnelle

Sans entrer dans les détails, la programmation fonctionnelle est une programmation dans laquelle certaines fonctions sont passées comme arguments à d'autres fonctions et renvoient des troisièmes fonctions comme valeurs. En programmation fonctionnelle, nous pensons et fonctionnons avec des fonctions.

La programmation fonctionnelle se fait dans des langages tels que JavaScript, Haskell, Clojure, Scala et Erlang.

Quelles sont les fonctionnalités de première classe

Lorsque vous apprenez à travailler avec JavaScript, vous avez probablement entendu dire que pour lui, les fonctions sont des citoyens de première classe. Le fait est qu'en JavaScript, comme dans tout autre langage de programmation fonctionnel, les fonctions sont des objets.

Spécifiquement pour JavaScript, les fonctions sont des objets d'un type spécial (objets Function ou foncteurs). Par exemple:

 function greeting() { console.log('Hello World'); } // Invoking the function greeting(); // prints 'Hello World' 

Pour montrer que les fonctions en JavaScript sont des objets, nous pouvons faire quelque chose comme ceci:

 // We can add properties to functions like we do with objects greeting.lang = 'English'; // Prints 'English' console.log(greeting.lang); 

Remarque: bien que ce qui précède fonctionne bien en JavaScript, vous ne devez pas en abuser. Vous ne pouvez pas attribuer de propriétés aléatoires aux foncteurs - il vaut mieux utiliser des objets normaux.

En JavaScript, tout ce que vous pouvez faire avec d'autres entités, comme un objet, une chaîne ou un nombre, s'applique aux fonctions. Ils peuvent être passés, notamment en tant qu'arguments à d'autres fonctions (ils sont alors appelés fonctions de rappel ou fonctions de rappel), les affecter à des variables, etc. C'est pourquoi les fonctions JavaScript sont appelées fonctions de première classe.

Affectation de fonctions aux variables

JavaScript vous permet d'assigner des fonctions aux variables. Par exemple:

 const square = function(x) { return x * x; } // prints 25 square(5); 

Ils peuvent également être transmis. Par exemple:

 const foo = square; // prints 36 foo(6); 

Passer des fonctions comme arguments

Nous pouvons passer des fonctions comme arguments à d'autres fonctions. Par exemple:

 function formalGreeting() { console.log("How are you?"); } function casualGreeting() { console.log("What's up?"); } function greet(type, greetFormal, greetCasual) { if(type === 'formal') { greetFormal(); } else if(type === 'casual') { greetCasual(); } } // prints 'What's up?' greet('casual', formalGreeting, casualGreeting); 

Donc, maintenant que nous savons ce que sont les fonctions de première classe, passons aux fonctions d'ordre supérieur en JavaScript.

Fonctions d'ordre supérieur

Les fonctions d'ordre supérieur sont des fonctions qui fonctionnent avec d'autres fonctions, prenant une fonction comme argument ou renvoyant une fonction comme résultat.

Des exemples de fonctions d'ordre supérieur qui sont déjà intégrées dans le langage sont Array.prototype.map , Array.prototype.filter et Array.prototype.reduce .

Fonctions d'ordre supérieur en action

Examinons quelques exemples de fonctions intégrées d'ordre supérieur et comparons-les avec des solutions où les fonctions d'ordre supérieur ne sont pas utilisées.

Array.prototype.map
La méthode map() crée un nouveau tableau avec pour résultat d'appeler la fonction passée pour chaque élément du tableau initial. La méthode map() prend chaque valeur de la fonction de rappel et crée un nouveau tableau à l'aide de ces valeurs.

La fonction de rappel passée à la méthode map() prend trois arguments: element , index et array .

Considérez ceci avec quelques exemples.

Exemple n ° 1
Supposons que nous ayons un tableau de nombres, et à partir de celui-ci, nous voulons créer un nouveau tableau dans lequel chaque numéro du tableau initial serait doublé. Comment résoudre ce problème avec et sans fonction d'ordre supérieur?

Sans fonction d'ordre supérieur:

 const arr1 = [1, 2, 3]; const arr2 = []; for(let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2); } // prints [ 2, 4, 6 ] console.log(arr2); 

Utilisation de la fonction de map ordre supérieur:

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(item) { return item * 2; }); console.log(arr2); 

Le code peut être raccourci encore plus en utilisant la fonction flèche.

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2); 

Exemple n ° 2
Disons que nous avons un tableau contenant les années de naissance de plusieurs personnes, et à partir de cela, nous voulons créer un nouveau tableau dans lequel leurs âges seront.

Sans fonction d'ordre supérieur:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = []; for(let i = 0; i < birthYear.length; i++) { let age = 2018 - birthYear[i]; ages.push(age); } // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Utilisation de la fonction de map ordre supérieur:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = birthYear.map(year => 2018 - year); // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Array.prototype.filter
La méthode filter() crée un nouveau tableau avec tous les éléments ayant réussi le test spécifié dans la fonction passée. La fonction de rappel passée à filter() prend trois arguments: element , index et array .

Considérez ceci avec quelques exemples.

Exemple n ° 1
Imaginez que nous ayons un tableau contenant des objets avec les propriétés «nom» et «âge». À partir de cela, nous voulons créer un nouveau tableau dans lequel seuls les adultes (à partir de dix-huit ans et plus) seront indiqués.

Sans fonction d'ordre supérieur:

 const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = []; for(let i = 0; i < persons.length; i++) { if(persons[i].age >= 18) { fullAge.push(persons[i]); } } console.log(fullAge); 

Utilisation de la fonction de filter ordre supérieur:

 const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = persons.filter(person => person.age >= 18); console.log(fullAge); 

Array.prototype.reduce
La méthode de reduce applique une fonction à chaque valeur du tableau, la réduisant à une seule valeur. La méthode de réduction prend deux arguments:

1. fonction de rappel à traiter;
2. paramètre initialValue facultatif (premier argument lors du premier appel de fonction).

La fonction de rappel prend quatre arguments: accumulator , currentValue , sourceArray , sourceArray .

Si le paramètre initialValue été transmis, l'argument accumulator sera égal à l'argument initialValue et l'argument currentValue le premier élément du tableau.

Si le paramètre initialValue n'a pas été transmis, l'argument accumulator sera égal au premier élément du tableau et le deuxième élément du tableau sera pris comme argument currentValue .

Exemple n ° 1
Supposons que nous devons trouver la somme des nombres dans un tableau.

L'utilisation d'une fonction d'ordre supérieur reduce :

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }); // prints 25 console.log(sum); 

Chaque fois qu'une fonction de rappel est appliquée à chaque valeur du tableau, l'argument accumulator enregistre le résultat de l'action précédente retournée par la fonction et currentValue prend la valeur suivante du tableau. Une fois terminé, le résultat est stocké dans la sum variable.

De plus, nous pouvons transmettre à cette fonction la valeur initiale:

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 10); // prints 35 console.log(sum); 

Sans fonction d'ordre supérieur:

 const arr = [5, 7, 1, 8, 4]; let sum = 0; for(let i = 0; i < arr.length; i++) { sum = sum + arr[i]; } // prints 25 console.log(sum); 

Comme vous pouvez le voir, à l'aide d'une fonction d'ordre supérieur, le code peut être rendu plus net, plus court et plus volumineux.

Créez votre propre fonction d'ordre supérieur

Jusqu'à présent, nous avons considéré diverses fonctions d'ordre supérieur intégrées au langage. Il est temps de créer votre propre fonction d'ordre supérieur.

Imaginez que JavaScript n'aurait pas sa propre méthode de map . Nous pourrions le construire nous-mêmes, créant ainsi notre propre fonction d'un ordre supérieur.

Disons que nous avons un tableau de chaînes, et à partir de celui-ci, nous voulons créer un tableau d'intégrales dans lequel chaque élément représentera la longueur de la chaîne du tableau initial.

 const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C']; function mapForEach(arr, fn) { const newArray = []; for(let i = 0; i < arr.length; i++) { newArray.push( fn(arr[i]) ); } return newArray; } const lenArray = mapForEach(strArray, function(item) { return item.length; }); // prints [ 10, 6, 3, 4, 1 ] console.log(lenArray); 

Dans l'exemple ci-dessus, nous avons créé une fonction d'ordre supérieur mapForEach , qui prend un tableau et une fonction de rappel fn comme arguments. Cette fonction est appliquée de manière cyclique à chaque élément du tableau et appelle la fonction de rappel fn dans le cadre de l' newArray.push fonction newArray.push à chaque itération.

La fonction de rappel fn prend l'élément actuel du tableau initial et renvoie la valeur de longueur de cet élément, qui est stockée dans le nouveau newArray . Une fois l'itération terminée, le tableau newArray renvoyé en tant que résultat et affecté au tableau lenArray .

Conclusion

Nous avons appris ce que sont les fonctions d'ordre supérieur et examiné certaines des fonctions intégrées dans le langage. Nous avons également appris à créer vos propres fonctions d'ordre supérieur.

En bref, les fonctions d'ordre supérieur fonctionnent comme des fonctions normales, mais ont la possibilité supplémentaire de recevoir d'autres fonctions en tant qu'argument et de les renvoyer en conséquence.

En fait, c'est tout. Si vous avez trouvé cet article utile, vous pouvez également me suivre sur Medium et sur Twitter . N'hésitez pas à commenter si vous avez des questions! Je serai ravi de vous aider. :)