39

Tips Javascript: Uso de filter, map y reduce

10176Puntos

hace 5 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

10176Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2