Maîtriser les fonctions d’ordre supérieur en JavaScript

Les fonctions d’ordre supérieur sont des fonctions qui utilisent des fonctions comme argument ou comme valeur de retour. Ils sont une caractéristique importante qui ne peut être négligée dans la programmation fonctionnelle, permettant une imbrication facile des fonctions pour archiver une tâche spécifique.

Aujourd’hui, nous allons examiner ce que sont les fonctions d’ordre supérieur en JavaScript, leur importance et leur rôle dans la programmation fonctionnelle. JavaScript est bien connu pour la programmation fonctionnelle car il accepte des fonctions d’ordre supérieur, qui ont été largement utilisées dans le langage.

Pour comprendre facilement ce sujet, nous devons mieux comprendre ce que sont les fonctions et la programmation fonctionnelle.

Qu’est-ce qu’une fonction ?

Les fonctions sont des modules de code « autonomes » qui accomplissent une tâche spécifique.

Les fonctions généralement « recevoir » des données, les traiter et « renvoyez » un résultat. Une fois une fonction est créé, il peut être réutilisé plusieurs fois. Examinons rapidement un exemple avant de continuer.

function greetings() {
return "Good Morning"
}

greetings()
greetings()

L’extrait de code ci-dessus montre que les lignes 2 à 4 contiennent la déclaration de la fonction, tandis que la ligne 6 contient l’exécution. Une fois écrites, l’intérêt des fonctions est qu’elles peuvent être exécutées plusieurs fois, ce qui rend votre code plus compact et moins répétitif, ce qui lui vaut l’acronyme DRY (Don’t Repeat Yourself).

Qu’est-ce que la programmation fonctionnelle ?

« Programmation fonctionnelle est un paradigme de programmation – un style de construction de la structure et des éléments de programmes informatiques – qui traite le calcul comme l’évaluation de fonctions mathématiques et évite les changements d’état et les données modifiables. – Wikipédia

Il existe de nombreux modèles utilisés par les développeurs lors du codage, et la programmation fonctionnelle en fait partie. Quelques autres exemples incluent la programmation orientée objet, la programmation procédurale, etc.

Depuis l’adoption de la programmation fonctionnelle en JavaScript, de nombreuses grandes applications de base de code ont utilisé cette approche pour créer une base de code plus propre et éviter la redondance.

La programmation fonctionnelle a également créé un environnement accessible pour la programmation open source. Il permet aux développeurs d’écrire le code en fonction de la tâche confiée et de le structurer dans une approche fonctionnelle, simplifiée pour être lisible même pour les débutants.

Avantages de la programmation fonctionnelle

• Il aide à résoudre efficacement les problèmes de manière plus simple.
• Il améliore la modularité.
• Cela nous permet d’implémenter le calcul lambda dans notre programme pour résoudre des problèmes complexes.

Inconvénients de la programmation fonctionnelle

• Pour les débutants, ce n’est pas facile à comprendre. Ce n’est donc pas une approche paradigmatique adaptée aux débutants pour les nouveaux programmeurs.
• La maintenance est difficile pendant la phase de codage lorsque la taille du projet est importante.

Les fonctions sont des citoyens de première classe en JavaScript

« Les fonctions sont des citoyens de première classe en JavaScript » est une expression populaire utilisée par de nombreux développeurs car les fonctions en JavaScript sont un type d’objet particulier. Prenons un exemple.

function favouriteFood(){
return "rice";
}

favouriteFood()



favouriteFood.beans = "Beans"
console.log(favouriteFood.beans)

D’après le code ci-dessus, nous comprenons qu’une propriété est ajoutée à la fonction après sa déclaration et qu’elle renvoie la valeur de la propriété chaque fois que la propriété est invoquée.

Noter: Passer une propriété à une fonction peut être valide mais ne peut pas être vérifié en tant que bonne pratique.

Fonctions d’ordre supérieur

Les fonctions d’ordre supérieur sont des fonctions qui utilisent des fonctions comme argument ou comme valeur de retour. L’utilisation de fonctions dans les deux rôles n’est pas nécessaire ; si une fonction fonctionne avec l’un des deux, elle devient une fonction d’ordre supérieur.

Dans les fonctions JavaScript, mapper, filtrer et réduire sont des exemples de fonctions intégrées d’ordre supérieur. Regardons de plus près ces trois-là.

Fonction de carte

UN map() La fonction crée un nouveau tableau rempli de résultats en appelant une fonction de rappel fournie en argument. Il prend chaque valeur de retour du rappel et les stocke dans un nouveau tableau.

La fonction de rappel à passer au map() fonction accepte trois arguments :

Par exemple, nous avons un tableau de nombres et nous voulons créer un nouveau tableau qui contiendra chaque élément du premier tableau multiplié par dix. Résolvons le problème avec et sans fonction d’ordre supérieur.

Utilisation d’une fonction normale

Voici comment nous pouvons résoudre le problème en utilisant une fonction normale.

const num = [10, 20, 30];
const num10 = [];
for(let i = 0; i < num.length; i++) {
  num10.push(num[i] * 2);
}

console.log(num10);

Utilisation d’une fonction d’ordre supérieur (Carte)

Avec une fonction d’ordre supérieur, le code est plus court ; voici le code ci-dessous.

const num = [10, 20, 30];
const num10 = num.map(i => i * 2);
console.log(num10);

À partir de la fonction de carte ci-dessus, vous pouvez voir que nous pouvons obtenir le même résultat avec moins de code et une meilleure structure. Passons donc à la fonction intégrée suivante.

Fonction de filtre

La fonction filter() crée un nouveau tableau rempli de tous les éléments qui ont passé la condition de la fonction de rappel ; tout comme la fonction map, la fonction filter accepte également trois arguments : un élément, un index et un tableau.

Par exemple, supposons que nous ayons un tableau contenant des objets avec des étudiants proposant un cours et le statut s’ils ont assisté à la classe ou non, et nous devons filtrer le tableau pour obtenir tous les étudiants qui ont assisté.

Utilisation d’une fonction normale

Voici comment nous pouvons résoudre le problème en utilisant une fonction normale.

const students = [
  { name: 'John James', status: true},
  { name: 'Micheal Obi', status: false },
  { name: 'Bola Ade', status: true },
  { name: 'Emmanuel', status: false },
  { name: 'Faithfulness Alamu',status: true },
];
const presentStudent= [];
for(let i = 0; i < student.length; i++) {
  if(students[i].status >= true) {
    presentStudent.push(students[i].name);
  }
}
console.log(presentStudent);

Utilisation d’une fonction d’ordre supérieur (filtre)

Voici le même problème résolu en utilisant une fonction d’ordre supérieur.

const students = [
  { name: 'John James', status: true},
  { name: 'Micheal Obi', status: false },
  { name: 'Bola Ade', status: true },
  { name: 'Emmanuel', status: false },
  { name: 'Faithfulness Alamu', status: true },
];
const presentStudent =students.filter(student => student.status == true);
console.log(presentStudent);

Réduire la fonction

Cette méthode exécute une fonction de rappel sur chaque élément du tableau, ce qui donne une valeur unique. La méthode accepte deux arguments :

• Fonction de rappel
• Valeur initiale

La fonction de rappel accepte les quatre paramètres suivants :

• Accumulateur
• Valeur actuelle
• Indice actuel
• Tableau source

Voici un exemple, où nous additionnons tous les éléments d’un tableau.

Utilisation d’une fonction normale

Voici comment nous pouvons résoudre le problème en utilisant une fonction normale.

const numbers = [10, 29, 11, 43, 37];
let subtract = 0;
for(let i = 0; i < arr.length; i++) {
  subtract = subtract + numbers[i];
}
console.log(subtract); 

Utilisation d’une fonction d’ordre supérieur (réduire)

Le même problème a été résolu en utilisant une fonction d’ordre supérieur.

const numbers = [10, 29, 11, 43, 37];
const subtract = numbers.reduce(function(acc, value) {
  return acc + value;
});
console.log(subtract); 

De tous les exemples ci-dessus, vous pouvez voir que les fonctions d’ordre supérieur rendent le code plus propre et plus facile à comprendre.

Création de notre fonction d’ordre supérieur

Jusqu’à présent, je n’ai montré que des exemples de fonctions d’ordre supérieur à partir des fonctions intégrées de JavaScript ; maintenant, plongeons dans la création du nôtre.

Nous allons créer un clone de la fonction map. Par exemple, nous avons un tableau contenant des noms ; nous voulons obtenir la longueur de chaque nom en utilisant la fonction d’ordre supérieur que nous allons créer.

function mapClone(arr, fn) {
  const nameList = [];
  for(let i = 0; i < arr.length; i++) {
    nameList.push(
      fn(arr[i])
    );
  }
  return nameList;
}
...

Dans le code ci-dessus, mapClone prend dans un tableau et une fonction fn, qui est le rappel. Ensuite, nous avons créé un tableau vide appelé nameList, qui contiendra le résultat final. La boucle itère sur le tableau donné et appelle la fonction de rappel sur chaque élément, après quoi elle renvoie le nameList déployer.

const names = ['Emmanuel', 'John', 'Philip', 'James', 'Andrew'];
const nameLength = mapClone(names, function(item) {
  return item.length;
});

console.log(nameLength) 

Exécutez le code ci-dessus pour tester la fonction d’ordre supérieur que nous venons de créer.

Conclusion

En résumé, nous avons appris le concept derrière la fonction d’ordre supérieur et comment l’utiliser efficacement. Nous avons également créé une fonction d’ordre supérieur à partir de zéro pour comprendre le fonctionnement interne, pas seulement l’implémentation.