.map(), .filter() et .reduce() en JavaScript

Si vous êtes un développeur JavaScript ou que vous débutez avec JavaScript, quelque part vous avez entendu parler de map(), filter() et reduce(). Parfois, les personnes qui découvrent ces fonctions ne savent pas exactement ce que font ces fonctions et comment les utiliser ? Discutons-en dans cet article ci-dessous un par un.

.carte()

.map() est utilisé pour transformer un tableau. Transformer signifie disons que vous avez un tableau qui contient des nombres et que vous devez trouver le double de chaque nombre ou le triple de chaque nombre, vous voulez donc le transformer avec une logique de transformation et obtenir un nouveau tableau.

const arr = [2, 4, 5, 6, 8]
//  double arr = [4, 8, 10, 12, 16]
//  triple arr = [8, 12, 15, 18, 24]

let array = [1, 2, 3, 4, 5, 6]
function double(x){
return x * 2;
}
const result = array.map(double); // take callback function
//   Or with arrow function
const result = array.map(x => x * 2);
console.log(result);        // will print an array with double

La méthode .filter() est utilisée pour filtrer un tableau. Il filtrera un tableau en fonction d'une certaine logique et vous renverra un tableau avec une valeur filtrée. Supposons, par exemple, que vous ayez un tableau et que vous souhaitiez savoir quels éléments sont supérieurs à un nombre spécifique ? Essayons.

let arr = [2, 8, 3, 4, 5, 6]
function greaterThan3(x){
return x > 3;
}
const result = arr.filter(greaterThan3); // take callback function
//   or with arrow function
const result = arr.filter(x => x > 3);
console.log(result);

Méthode .reduce() utilisée à un endroit où vous devez prendre tous les éléments d'un tableau et en tirer une seule valeur. Par exemple, disons que nous avons un tableau et que nous devons en trouver la somme ou le maximum.

let arr = [1, 5, 6, 8, 9, 3]
// sum, maximum

// Sum with non functional way
let arr = [2, 8, 3, 4, 5, 6];
function findSum(){
 let sum = 0;
  for(let i = 0; i < arr.length; i++){
   sum = sum + arr[i];
   }
  return sum;
 }
console.log(findSum());

arr.reduce(function(acc, curr){ // first parameter
// it will iterate over each element of array and this current(curr) with refer to current element of this array.
// Accumulator(acc) will accumulate the result for elements of the array.
},0) // second parameter
 it represents the initial value for the accumulator

let arr = [1, 2, 3, 4, 5, 6]
const result = arr.reduce(function(acc, curr){
   acc = acc + curr;
   return acc;
});
console.log(result);

C'est la manière la plus simple d'utiliser .map(), .filter() et .reduce(). Si vous remplacez la boucle for par ces méthodes, c'est là où cela convient. Cela vous aidera beaucoup à rendre votre code plus propre et facile à lire.

Bon codage !