39

Tips Javascript: Uso de filter, map y reduce

9726Puntos

hace 4 años

Últimamente la programación funcional está muy de moda y con el revuelo que está causando es importante aprender a usar 3 de las funciones que harán tu vida mas feliz. Sí, hablo de map, reduce y filter.

Si trabajas con React y Redux estas 3 funciones te ayudarán diariamente a escribir mejores componentes y reducers.

A continuación los detallo:

Filter

Así como lo lees así funciona exactamente, filter se encarga de filtrar los elementos de un array y retorna los resultados del mismo.

Un ejemplo:

const myArray = [-9, 9, 10, 1, -12, 12, 5, 29, 8, 12, -5];
//Función para determinar si un número es par y positivo.const isOddAndPositive = (number) => {
	if (number %2 === 0 && number > 0) {
		returntrue;
	}
	returnfalse;
}
myArray.filter(isOddAndPositive);
//Resultado:  [10, 12, 8, 12]

Ahora que entendimos bien cómo funciona podemos reescribir nuestra función a:

const myArray = [-9, 9, 10, 1, -12, 12, 5, 29, 8, 12, -5];
myArray.filter((number) => {
	if (number %2 === 0 && number > 0) {
		returntrue;
	}
	returnfalse;
});
//Resultado:  [10, 12, 8, 12]

Map

Muy seguramente ya usaste map en algún momento y si es así ya eres un ser libre de forEach.
Así como indica el nombre, map itera sobre un array y ejecuta una función sin alterar el array inicial.

const numArr = [1, 2, 3, 4, 5, 6, 7];
numArr.map(aNum => {
	return aNum * aNum;
});// Resultado: [1, 4, 9, 16, 25, 36, 49]

Reduce

Reduce en pocas palabras se encarga de reducir un array a un solo valor ejecutando una función a cada elemento.

Un Ejemplo:

const myArray = [3, 9,12, 23, 99, 1];
myArray.reduce((total, num) => {
return total + num;
});
// Resultado: 147 = 3 + 9 + 12 + 23 + 99 + 1

Si de seas aprender mas sobre Javascript te recomiendo ampliamente la Escuela de Javascript de Platzi. Ahi podrás encontrar una cantidad increíble de cursos para fortalecer y profundizar tus conocimientos.

También ahi encontrarás cursos super importantes como el Curso profesional de React con Redux o el Curso de Angular 4
.

Carlos
Carlos
sampol.90

9726Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
13332Puntos

a propósito del curso de React, que por cierto está buenísimo, me encantó hacerlo. Les comparto una breve reseña de lo nuevo que nos trae React 16,
aquí

Saludos

0
9726Puntos
4 años

Asi es!!
Muy buen aporte el tuyo sobre React 16 😃

1
6379Puntos

Muy bueno el aporte, una observación: map y forEach son dos formas de iterar un array, cada una con un comportamiento definido y las 2 sirven para su propósito sin ser una mejor que otra, todo depende de que resultado queremos. Para mi punto de vista útiles las 2 y ninguna mejor que otra. Saludos!!!

1
9989Puntos

Gracias Carlos, la verdad que aun no eh llegado a esto pero al leerlo y entender gracias a los gráficos ya sabre que me depara al menos en el futuro. 😉

0
9726Puntos
4 años

Estas funciones valen la pena aprenderlas!
La verdad son bastante buenas

1
8721Puntos

Una ayuda excelente caballero. El día que descubrí estas funciones mi vida se hizo un mucho más feliz

0
9726Puntos
4 años

Jajaja asi es,
Si tienes en mente algo que pueda publicar soy todo oidos 😃

0
1458Puntos

gracias

0
9726Puntos
4 años

Gracias a ti, si tienes en mente algun otro post con el que podría aclarar dudas avisane!