Utiliser les méthodes .map(), .filter() et .reduce() en JavaScript

Introduction


En tant que développeur web, il est crucial de maîtriser les outils à notre disposition pour optimiser notre code et rendre nos applications plus efficaces. Les méthodes .map(), .filter() et .reduce() en JavaScript sont des outils puissants pour traiter les tableaux de données et simplifier nos développements.

Ces méthodes sont aussi très utiles pour de la résolution d'algorithmes sur des sites tels que CodinGame ou Codewars ! (Si tu veux follow mon profil Codewars 👈)

Nous examinerons donc en détail chacune de ces méthodes, leurs utilisations avec quelques exemples, et aussi les performances dans la conclusion de cet article.

 

La méthode .map()


La méthode .map() permet de transformer chaque élément d'un tableau en un autre élément, en utilisant une fonction de transformation spécifiée.
Il est très important de noter que cette fonction ne modifie pas le tableau d'origine, mais renvoie un nouveau tableau avec les éléments transformés.
Par exemple, si nous avons un tableau de nombres [1, 2, 3, 4, 5] et que nous voulons obtenir un tableau avec le carré de chaque nombre, nous pourrions utiliser la méthode .map() de la façon suivante :
 

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]


En utilisant une fonction fléchée, le mapping peut être simplifié une seule ligne :
 

let squaredNumbers = numbers.map(n => n * n);


Voici un autre exemple plus réel et concret : Nous avons un tableau d'entiers représentant des centimes (nous prendrons l'euro comme devise) et nous souhaitons mapper ces valeurs pour les transformer en prix lisible pour la localisation "fr-FR".
 

const cents = [3000, 20099, 49, 8449];

const prices = cents.map(cent => (cent / 100).toLocaleString("fr-FR", {style: "currency", currency: "EUR"})); 

console.log(prices) // [ "30,00 €", "200,99 €", "0,49 €", "84,49 €" ]


 

La méthode .filter()


La méthode .filter() permet de filtrer les éléments d'un tableau en fonction d'une condition spécifiée. Cette méthode prend une fonction qui définit la condition de filtrage, et renvoie un nouveau tableau contenant uniquement les éléments qui répondent à cette condition.
Par exemple, si nous avons un tableau d'objets de données météorologiques avec des propriétés date et temperature et que nous voulons extraire tous les objets avec une température supérieure ou égale à 35 degrés Celsius, nous pourrions utiliser .filter() de la façon suivante :
 

const weatherData = [
  { date: '01-01-2021', temperature: 30 },
  { date: '01-02-2021', temperature: 35 },
  { date: '01-03-2021', temperature: 40 },
  { date: '01-04-2021', temperature: 38 },
];

const hotDays = weatherData.filter(function(day) {
  return day.temperature >= 35;
});

console.log(`Les jours de canicules sont : ${hotDays.map(day => day.date)}`); 
// Les jours de canicules sont : 01-02-2021,01-03-2021,01-04-2021


En utilisant une fonction fléchée, le filtrage peut être simplifié en une seule ligne :
 

const hotDays = weatherData.filter(day => day.temperature >= 35);


 

La méthode .reduce()


La fonction .reduce() permet de réduire un tableau à une seule valeur, en utilisant une fonction de réduction spécifiée.
Cette méthode prend en paramètre une fonction qui définit la façon dont les éléments du tableau sont réduits, ainsi qu'une valeur initiale qui est utilisée pour démarrer la réduction. La fonction de réduction est appelée pour chaque élément du tableau, avec deux paramètres : l'accumulateur, qui est la valeur courante de la réduction, et l'élément courant, qui est l'élément en cours de traitement.
Comme pour les méthodes .map() et .filter(), la méthode .reduce() n'est pas une méthode mutateur et retourne donc simplement un nouveau tableau.

Prenons l'exemple suivant : Nous avons un tableau de nombres [1, 2, 3, 4, 5] et nous voulons calculer la somme de tous les nombres, nous pourrions utiliser .reduce() de la façon suivante :
 

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15


En utilisant une fonction fléchée, la réduction peut être simplifiée une seule ligne :
 

let sum = numbers.reduce((acc, val) => acc + val, 0);


Voici un autre exemple plus réel et concret : On souhaite récupérer toutes les catégories de jeux vidéo d'un tableau d'objets, on va donc réduire le tableau d'objets pour en retourner un nouveau tableau contenant les catégories tout en évitant les doublons.
 

const videoGames = [
  {
    name: 'The Binding of Isaac',
    category: 'Roguelike'
  },
  {
    name: 'Overwatch 2',
    category: 'FPS'
  },
  {
    name: 'Vampire Survivors',
    category: 'Roguelike'
  },
  {
    name: 'Valorant',
    category: 'FPS'
  },
  {
    name: 'The Legend Of Zelda: Tears of the Kingdom',
    category: 'Aventure'
  }
];

const categories = videoGames.reduce((acc, val) => acc.includes(val.category) ? acc : acc.concat(val.category), []);

console.log(categories) // [ "Roguelike", "FPS", "Aventure" ]


La méthode .reduce() est très utile et peut être utilisée pour des cas d'utilisation très variés, comme le calcul de statistiques sur des données, la fusion de plusieurs tableaux en un seul, ou même la création de nouveaux objets.


 

Performances & Conclusion


Les méthodes .map(), .filter() et .reduce() en JavaScript sont des outils puissants pour traiter les tableaux de données et simplifier nos développements. En utilisant ces méthodes, vous pourrez écrire des codes plus clairs et plus efficaces, et vous pourrez également résoudre des problèmes de manière plus élégante !

Cependant, ces méthodes sont généralement plus lentes que les boucles for ou while pour des tâches qui nécessitent un accès direct à un élément spécifique d'une collection ou une logique de boucle complexe car elles parcourent tous les éléments de la collection, même si seul un élément spécifique est nécessaire.
Par exemple, si vous devez accéder à un seul élément spécifique d'une collection, il serait plus efficace d'utiliser une boucle for ou while pour parcourir la collection jusqu'à ce que vous trouviez l'élément désiré plutôt que d'utiliser une méthode comme .filter() qui parcourra tous les éléments de la collection.

De plus, si vous avez besoin de mettre en place une logique de boucle complexe, comme des conditions imbriquées ou des sauts de boucle, il serait plus facile et plus efficace d'utiliser une boucle for ou while pour coder cette logique plutôt que d'essayer de la coder en utilisant les méthodes .filter(), .map() et .reduce().


En résumé, ces méthodes sont assez performantes lorsqu'elles sont utilisées sans être détournée de leur utilisation principale, à savoir respectivement mapper, filtrer et réduire, car elles utilisent une implémentation native en JavaScript pour traiter les tableaux.
Seulement, elles peuvent être plus lentes que des boucles for ou while pour des tableaux très grands ou pour des opérations très complexes. Il est donc important de les utiliser judicieusement.

 


D'autres articles à découvrir :

0 commentaire