DEV Community

Nahuel Segovia
Nahuel Segovia

Posted on • Edited on

3

map, filter y reduce

map(), este método lo que hace es transformar todos los elementos de la lista o 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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay