Comprendre les fonctions d'ordre supérieur en JavaScript

Jan 22 2023
JavaScript est un langage de programmation puissant qui offre un large éventail de fonctionnalités et de capacités. L'une des fonctionnalités les plus importantes et les plus polyvalentes de JavaScript est les fonctions d'ordre supérieur.

JavaScript est un langage de programmation puissant qui offre un large éventail de fonctionnalités et de capacités. L'une des fonctionnalités les plus importantes et les plus polyvalentes de JavaScript est les fonctions d'ordre supérieur. Ces fonctions prennent une ou plusieurs fonctions comme arguments et/ou renvoient une fonction comme résultat, ce qui permet une grande flexibilité et abstraction.

Qu'est-ce qu'une fonction d'ordre supérieur ?

Une fonction d'ordre supérieur est une fonction qui prend une ou plusieurs fonctions comme arguments et/ou renvoie une fonction comme résultat. Créons notre propre méthode setTimeout personnalisée appelée mySetTimeout:

function mySetTimeout(callback, delay) {
  setTimeout(callback, delay);
}

Voici un exemple d'utilisation mySetTimeoutque nous avons créé auparavant :

function sayHello() {
  console.log("Hello!");
}
mySetTimeout(sayHello, 1000);

Utiliser des fonctions d'ordre supérieur dans un scénario réaliste

Supposons que vous créez un site Web de commerce électronique et que vous souhaitez afficher une liste de produits à l'utilisateur. Vous souhaitez filtrer les produits en fonction de certains critères, tels que le prix et la catégorie. Vous pouvez utiliser une fonction d'ordre supérieur pour filtrer les produits.

const products = [
  { name: 'Product 1', price: 10, category: 'Electronics' },
  { name: 'Product 2', price: 20, category: 'Fashion' },
  { name: 'Product 3', price: 30, category: 'Electronics' },
  { name: 'Product 4', price: 40, category: 'Fashion' },
  { name: 'Product 5', price: 50, category: 'Electronics' },
];
const filterBy = (property, value) => (product) => product[property] === value;
const filteredProducts = products.filter(filterBy('category', 'Electronics'));
console.log(filteredProducts);

Vous pouvez également enchaîner plusieurs filtres pour filtrer selon plusieurs critères, par exemple :

const filteredProducts = 
products
.filter(filterBy('category', 'Electronics'))
.filter(filterBy('price', 30));
console.log(filteredProducts);

Conclusion

Dans cet article, nous avons discuté du concept de base des fonctions d'ordre supérieur et fourni un exemple de la façon dont elles peuvent être utilisées dans un scénario réaliste. Nous avons également souligné comment les fonctions d'ordre supérieur peuvent être utilisées pour filtrer les produits en fonction de plusieurs critères.

Merci pour la lecture!

Avec cela, j'espère que vous avez une meilleure compréhension des fonctions d'ordre supérieur et de leurs cas d'utilisation en JavaScript.