Programmation fonctionnelle en javascript – map, filter et reduce

Même si vous ne savez pas quelle est la programmation fonctionnelle, vous avez probablement déjà utilisé map, filter et reduce simplement parce qu’elles sont extrêmement utiles et réduisent les bugs dans votre code en vous permettant d’écrire une logique plus propre.
 
 

Méthode map

La méthode map() crée un nouveau tableau avec les résultats de l’appel d’une fonction fournie sur chaque élément du tableau appelant.

Considérez une map comme une boucle « for each », une valeur d’entrée correspond à une valeur de sortie « transformée ».

Prenons un code simple :

var nbrs = [1, 2, 3, 4, 5];
var res = [];

for(var i = 0; i < nbrs.length; i++) {
    res[i] = nbrs[i] * 2;
}

console.log(res); // [2, 4, 6, 8, 10]

Bien que ce code fonctionne, il n’est pas très agréable. Il faut beaucoup de travail pour faire une tâche assez simple – multiplier par 2 tous les nombres dans un tableau.

Nous pouvions simplement écrire ce code en utilisant la méthode map() comme suivant.

var nbrs = [1, 2, 3, 4, 5];

var res = nbrs.map(function(n){
    return n * 2;
});

console.log(res); // [2, 4, 6, 8, 10]

Donc, nous n’avons plus besoin d’une boucle, et nous n’avons pas besoin non plus d’ajouter manuellement des nombres à un tableau!
 
Fonctions Callback en JavaScriptFonctions Callback en JavaScriptLes fonctions callbacks sont une excellentes façon de gérer l’exécution d’une fonction après que l’exécution d’une autre fonction ait été complété. Si nous voulons exécuter…Lire plus

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.
 
Exemple :

const mots = ["singe", "également", "faire", "certainement"];

const longMots = mots.filter(mot => mot.length > 6);

console.log("Les mots les plus longs : "+ longMots);

Sortie :

Les mots les plus longs : également, certainement

 

Méthode reduce

La méthode reduce() applique une fonction sur un accumulateur et sur chaque élément du tableau (de gauche à droite) pour le réduire à une valeur unique.
 
Exemple :

const total = [0, 1, 2, 3];

const res = total.reduce((sum,value) => {
  return sum + value;
});

console.log(res); // 6
QCM JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *