Javascript : manipuler vos données avec map, filter et reduce

Manipuler et transporter de gros blocs de données en Javascript

La manière la plus simple de manipuler et transporter de gros blocs de données en Javascript (ainsi que dans plusieurs autres langages de programmation) est via les tableaux unidimensionnels et multidimensionnels. La modification et le tri de ces données requiert souvent des procédés d’itérations qui peuvent êtres lourds et relativement fastidieux. Heureusement, Javascript propose un ensemble de méthodes qui facilite plusieurs processus de manière assez élégante.

map() – Array.map()

La fonction map() est essentiellement une boucle « for each » spécialement pour les transformations de valeurs. Pour chaque valeur entrée, on a une valeur sortie. Voici un exemple de code typique pouvant être simplifié avec la méthode map() :

var numbers = [1, 2, 3, 4];
 var new_numbers = [];
 for(var i = 0; i < numbers.length; i++) {
 new_numbers[i] = numbers[i] * 2;
 }
 console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]

Ce code, bien que fonctionnel et clair peut être simplifié davantage et faire abstraction des boucles, ainsi :

var numbers = [1, 2, 3, 4];
 var new_numbers = numbers.map(function(number){
 return number * 2;
 });
 console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]

Au besoin ces fonctions peuvent être enchaînées pour cumuler les effets. En voici un exemple:

var numbers = [1, 2, 3, 4];
 var new_numbers = numbers.map(function(number){
 return number * 2;
 }).map(function(number){
 return number++;
 });
 console.log("Les nombres doublés et incrémentés sont", new_numbers); // [3, 5, 7, 9]

Dans le cadre de l’usage de la fonction « map() », un certain nombre de règles est à respecter afin de ne pas obtenir des comportements inattendus ou problématiques :

1. Le nombre de valeurs d’entrées doit être égal au nombre de sorties.
   Ceci veut dire qu’en utilisant uniquement la fonction map(), vous ne pouvez pas vous attendre à lui fournir un nombre de valeurs de retour différent du nombre de valeurs que vous lui avez soumis. Donc, si vous envoyez 5 valeurs à map(), ce sont 5 valeurs qui vous seront retournées.
2. Vos méthodes de retour ne doivent pas muter les valeurs.
   Ce qu’on entend par ceci, c’est que vous ne devriez pas modifier directement de valeurs à l’intérieur de votre code de callback. Voici un exemple de mutation de valeurs :
   

var new_numbers = numbers.map(function(number){
 numbers[1] = number * 3;
 return number * 2;
 });

var xyz = 0;
 var new_numbers = numbers.map(function(number){
 xyz = number * 3;
 return number * 2;
 });

filter() – Array.filter()

La fonction map() est bien utile pour modifier des groupes entiers de valeurs, mais dans bien des cas on désire uniquement modifier un sous-ensemble de ces valeurs en se basant sur un énoncé conditionnel. C’est à ce moment qu’entre en jeu la fonction filter(). La fonction filter() permet, tel que son nom l’indique, de filtrer un ensemble de données.

Voyez l’exemple suivant :

var numbers = [1, 2, 3, 4];
 var new_numbers = [];
 for(var i = 0; i < numbers.length; i++) {
 if(numbers[i] % 2 !== 0) {
 new_numbers[i] = numbers[i] * 2;
 }
 }
 console.log("Les nombres doublés sont", new_numbers); // [2, 6]

À l’aide des fonctions map() et filter(), le code ci-haut peut être simplifié ainsi :

var numbers = [1, 2, 3, 4];
 var new_numbers = numbers.filter(function(number){
 return (number % 2 !== 0);
 }).map(function(number){
 return number * 2;
 });
 console.log("Les nombres doublés sont", new_numbers); // [2, 6]

Il y a un certain nombre de différences entre les fonctions map() et filter(). Spécifiquement, au niveau des valeurs de retour, filter() ne retourne pas de données modifiées, mais doit retourner une valeur booléenne(vrai/faux). Ceci a un impact sur si les données testées seront prises en compte ou non.

*Les fonctions map() & filter() peuvent être enchaînées les une après les autres, infiniment. Conséquemment, n’hésitez pas à en faire usage afin d’optimiser votre code.

reduce() – Array.reduce()

Si ce que vous désirez faire, est obtenir un sous-produit des données d’un tableau, la fonction reduce() est là pour répondre à la majeure partie de vos besoins les plus simples.

Aimeriez-vous avoir un total? Voici un exemple d’usage où on double toutes les valeurs d’un tableau avant d’en faire le cumul. :

var numbers = [1, 2, 3, 4];
 var total_number = numbers.map(function(number){
 return number * 2;
 }).reduce(function(total, number){
 return total + number;
 }, 0);
 console.log("Le total est", total_number); // 20

La seconde valeur passée à la méthode est la valeur de départ de la valeur qui sera retournée. Dans ce cas-ci, la valeur de départ est 0. Pour chacune des valeurs dans le tableau, on double la valeur et la cumule à partir de 0. La résultante est de 20. ((1×2)+(2×2)+(3×2)+(4×2)).

Dans l’exemple ci-haut, la valeur de retour est un entier, mais vous pourriez faire des concaténations textuelles, assembler un tableau, ou autre; considérez simplement de faire les retours appropriés à l’intérieur de votre callback, mais aussi d’initialiser correctement votre second paramètre avec une valeur de départ appropriée.

En conclusion

Ces fonctions sont d’excellents raccourcis pour la rédaction d’un code propre et optimal lors de manipulations de données dans un tableau. La pratique est clé, donc n’hésitez pas à expérimenter & poser vos questions dans la zone des commentaires, plus bas, au besoin.

• Un merci tout particulier à l’auteur de l’articlesvg
• suivant, duquel une bonne partie du matériel a été tiré pour l’élaboration de celui-ci.