Comment utiliser map et reduce en Javascript

Map et Reduce sont deux méthodes qui sont apparues dans le cadre de ES5. Ces méthodes sont utilisables sur les tableaux (Array). Ces deux méthodes proviennent de la programmation fonctionnelle. Cette dernière m’étant encore assez obscure j’ai pour projet d’écrire un article plus détaillé.

Map transformer des tableaux en d’autres tableaux

L’objectif de map est d’itérer sur tous les éléments d’un tableau et de produire un autre tableaux avec un contenu transformé

On peut par exemple imaginer un tableau de prénoms :

// tableau (A)
var prenoms = ["Joe","Patrick","Thierry"];

On peut imaginer une transformation simple sur ce tableau : générer un tableau contenant les premières lettres de chaque élément.

var initials = prenoms.map(function(prenom){return prenom.charAt(0);})

Ici :

• On utilise la méthode map sur notre array prenoms
• La méthode map prends en entrée une fonction avec un seul paramètre qui contiendra un prénom de notre tableau prenoms(A)
• Cette fonction doit retourner ce que l’on souhaite insérer dans notre nouveau tableau (B)

Reduce : itérer sur un array pour produire un seul et unique résultat

Reduce permet aussi d’itérer sur un array en revanche au lieu de produire systématiquement un tableau transformé, elle va renvoyer un unique résultat (qui peut être d’un autre type que l’Array…)

Nous allons prendre le même exemple. Nous partons d’un array de prénoms :

// tableau (A)
var prenoms = ["Joe","Pat","Max"];

Notre objectif est de récupérer le nombre total de lettres de nos prénoms.

Vous me pardonnerez la stupidité de l’exemple.

var total_number_of_letters = prenoms.reduce(function(somme,prenom){
  return somme + length;
},0);

Ici :

• On applique la méthode reduce à l’array prenoms.
• Cette méthode prends deux paramètres :

1. Une fonction (un itérateur)
2. La valeur d’initialisation du résultat renvoyé. Ici on initialise à 0, car on veut la somme

La fonction, premier paramètre de la méthode reduce prends elle même deux paramètres :

• La “valeur de retour de la réduction”. => ici la somme
• L’élément qui sera traité à chaque itération prenom

Nous partons donc ici d’un tableau et nous générons un entier représentant le nombre total de caractère de nos prénoms.

var total_number_of_letters = prenoms.reduce(function(somme,prenom){
  return somme + length;
},0);

console.log(total_number_of_letters);
// Affiche :  9 !