DEV Community

Nahuel Segovia
Nahuel Segovia

Posted on

map, filter y reduce

map(), este método lo que hace es transformar todos los elementos de la lista u array, veamos:

let numeros = [1,2,3,4,5,6,7,8,9,10];

numeros.map(elementos => elementos * elementos);

=>
[1, 4, 9, 16, 25, 36, 49, 64, 81, 100];
Enter fullscreen mode Exit fullscreen mode

Lo que estamos haciendo es recorrer todos los elementos del array numeros y le asignamos su valor a una variabla llamada elemento, luego haber asignado el valor creamos una función flecha anonima, que nos devolverá los elementos del array multiplicado por su mismo valor, o sea , 1*1, 4*4 etc..

De igual forma si solo queremos obtener los elementos sin hacer nada, podemos hacerlo:

numeros.map(elementos => elementos);
 [1,2,3,4,5,6,7,8,9,10];
Enter fullscreen mode Exit fullscreen mode

filter(), el método filter nos filtra todos los elementos que cumplan con una condición, un ejemplo podría ser, una aplicación que contiene circulos en su pantalla y queremos acceder solo a los circulos que tienen el color rojo:

let circulos = [circulo1Rojo, circulo2Verde, circulo3Rojo, circulo4Amarillo, circulo5Rojo];

botones.filter(circulosRojos => circulosRojos.includes(Rojo))

=>
[circulo1Rojo", “circulo3Rojo", circulo5Rojo"]
Enter fullscreen mode Exit fullscreen mode

reduce(), este método sirve para recudir todos los elementos a un único valor, su uso es simple,para usarlo tenemos que saber que el primer parámetro es el valor actual, como un contador y el siguiente parámetro son los elementos que existen adentro del array, en este caso lo llamamos valorSumar, adentro de el están los números que existen en la variable numeritos.

Cuando nosotros retornamos valorActual+valorSumar; lo que estamos haciendo es recorrer todos los elementos que se encuentran en valorSumar, que son todos los numeros del array, y sumarlos alvalor actual.

De esa forma estamos reduciendo todos los elementos a un solo valor.

let numeritos = [1,2,3,4,5,6,7];

let contarNumeros = numeritos.reduce((valorActual, valorSumar) => {

return valorActual+valorSumar;

})

console.log(contarNumeros);
Enter fullscreen mode Exit fullscreen mode
=> 28
Enter fullscreen mode Exit fullscreen mode

Discussion (0)