Como usar Map, Reduce y Filter en Javascript

Sergio Omar Ajanel
2 min readSep 12, 2022

Los métodos map, reduce y filter de los arreglos en Javascript nos servirán para manipular los datos que contenga un arreglo.

Map

La función map itera sobre todos los elementos del arreglo y transforma cada elemento, esta función retorna un arreglo de la misma longitud que el arreglo original. Al método map se le pasa como parámetro una función la cual será la encargada de transformar cada elemento del arreglo.

[🐮,🥔,🐔].map(cocinar);
=> [🍔,🍟,🍗]

Por ejemplo si tenemos un arreglo con strings podemos transformar cada uno de los elementos a mayúsculas.

["foo", "bar", "baz"].map(s => s.toUpperCase());
=> ["FOO", "BAR", "BAZ"]

Otro ejemplo concatenar a cada string su longitud original.

["foo", "bar", "ba"].map(s => {
len = s.length;
return `${s} ${len}`
});
=> ["foo 3", "bar 3", "ba 2"]

Reduce

El método reduce toma todos los elementos del arreglo y retorna un resultado, a este método se le pasa una función y un valor inicial, la función puede tener 4 argumentos, pero generalmente se usan solo 2.

  • acumulador: el valor devuelto de la iteración anterior
  • valorActual: el elemento actual del arreglo
  • índice: el índice del elemento actual
  • arreglo: el arreglo original en la que se llamó a reduce

El argumento valorInicial es opcional. Si se proporciona, se utilizará como valor acumulador inicial en la primera llamada a la función.

[🐮,🥔,🐔].map(comer);
=> 💩

En este ejemplo vamos a calcular el total de caracteres en una lista de strings.

["foo", "bar", "baz"].reduce((acc, x) => acc + x.length, 0)
=> 9

Filter

La función filter aplica una condicional sobre cada uno de los elemento del arreglo y aquellos que cumplan con la condición serán agregados al arreglo de salida.

[🥦,🐱,🐰,🍅,🐶].filter(animal);
=> [🐱,🐰,🐶]

Un ejemplo práctico es filtrar los strings que comiencen con “ba”.

["foo", "bar", "baz"].filter(x => x.startsWith("ba"));
=> ["bar", "baz"]

Estos son los métodos más útiles sobre todo si trabajas con librerías como React o Angular, espero que los ejemplos anteriores te sean útiles.

--

--