5.1 Concepts de base
Les fonctions d'ordre supérieur sont un aspect important de la programmation fonctionnelle et sont largement utilisées en JavaScript. Elles permettent d'écrire un code plus abstrait, compact et réutilisable.
Qu'est-ce que les fonctions d'ordre supérieur ?
Les fonctions d'ordre supérieur (higher-order functions) sont des fonctions qui prennent en arguments d'autres fonctions ou qui renvoient des fonctions en tant que résultat. Elles permettent d'utiliser des fonctions comme des objets de première classe, ce qui donne la possibilité de créer des programmes plus abstraits et modulaires.
Exemples de fonctions d'ordre supérieur
- Passer des fonctions comme arguments.
- Retourner des fonctions d'autres fonctions.
5.2 Passer des fonctions comme arguments
Utilisation des méthodes intégrées des tableaux
JavaScript fournit de nombreuses méthodes intégrées pour travailler avec les tableaux, qui sont des fonctions d'ordre
supérieur, telles que forEach()
, map()
, filter()
, reduce()
et d'autres.
1. Méthode forEach()
La méthode forEach()
exécute la fonction spécifiée une fois pour chaque élément du tableau.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// Affichera : 1 2 3 4 5
2. Méthode map()
La méthode map()
crée un nouveau tableau avec les résultats de l'appel de la fonction spécifiée pour chaque élément du tableau.
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers);
// Affichera : [1, 4, 9, 16, 25]
3. Méthode filter()
La méthode filter()
crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers);
// Affichera : [2, 4]
4. Méthode reduce()
La méthode reduce()
applique une fonction à un accumulateur et à chaque élément du tableau (de gauche à droite), le réduisant à une seule valeur.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum);
// Affichera : 15
5.3 Retourner des fonctions d'autres fonctions
Les fonctions d'ordre supérieur peuvent retourner d'autres fonctions, ce qui permet de créer des fonctions plus flexibles et configurables.
1. Currying
Le currying est le processus de transformation d'une fonction qui prend plusieurs arguments en une fonction qui prend un argument et retourne une nouvelle fonction qui prend l'argument suivant, etc.
Exemple de currying :
function multiply(a) {
return function(b) {
return a * b;
};
}
const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // Affichera : 10
const multiplyByThree = multiply(3);
console.log(multiplyByThree(5)); // Affichera : 15
2. Création de fonctions personnalisées
Les fonctions d'ordre supérieur permettent de créer des fonctions qui peuvent être personnalisées avec des arguments.
Exemple :
function createGreeting(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = createGreeting('Hello');
sayHello('Alice'); // Affichera : Hello, Alice!
const sayHi = createGreeting('Hi');
sayHi('Bob'); // Affichera : Hi, Bob!
5.4 Application pratique
Examinons l'application pratique des fonctions d'ordre supérieur.
Fonction compose()
La fonction compose()
permet de combiner plusieurs fonctions en une, qui les applique en chaîne :
function compose(...functions) {
return function(initialValue) {
return functions.reduceRight((value, func) => func(value), initialValue);
};
}
const addOne = x => x + 1;
const double = x => x * 2;
const addOneAndDouble = compose(double, addOne);
console.log(addOneAndDouble(5)); // Affichera : 12 (ajoute d'abord 1 à 5, puis double le résultat)
Fonctions asynchrones d'ordre supérieur
Les fonctions asynchrones d'ordre supérieur permettent de travailler avec des opérations asynchrones, telles que les requêtes API ou la gestion des timers :
function fetchData(callback) {
setTimeout(() => {
callback('Data received');
}, 1000);
}
function processData(data) {
console.log(data);
}
fetchData(processData);
// Affichera : Data received (après 1 seconde)
GO TO FULL VERSION