Métodos para Arreglos .forEach, .map, .filter, .find, .reduce y .some

Supongamos que tenemos una serie de productos en una tienda virtual, en algunos casos quieres extraer los que pertenecen a determinada categoria o tienen un precio mayor o menor a alguna cantidad. Los array methods te ayudarán a simplificar muchas de estas tareas.

Para este ejemplo estaremos utilizando el siguiente arreglo que nos servirá como una mini base de datos.

   
const autos = [
        {marca: 'BMW',  modelo: 'Serie 3', year: 2012, precio: 30000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Audi', modelo: 'A4',  year: 2018, precio: 40000, puertas: 4, color: 'Negro', transmision: 'automatico'},
        {marca: 'Ford', modelo: 'Mustang',  year: 2015, precio: 20000, puertas: 2, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Audi', modelo: 'A6',  year: 2010, precio: 35000, puertas: 4, color: 'Negro', transmision: 'automatico'},
        {marca: 'BMW', modelo: 'Serie 5',  year: 2016, precio: 70000, puertas: 4, color: 'Rojo', transmision: 'automatico'},
        {marca: 'Mercedes Benz', modelo: 'Clase C',  year: 2015, precio: 25000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Chevrolet', modelo: 'Camaro',  year: 2018, precio: 60000, puertas: 2, color: 'Rojo', transmision: 'manual'},
        {marca: 'Ford', modelo: 'Mustang',  year: 2019, precio: 80000, puertas: 2, color: 'Rojo', transmision: 'manual'},
        {marca: 'Dodge', modelo: 'Challenger',  year: 2017, precio: 40000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Audi', modelo: 'A3',  year: 2017, precio: 55000, puertas: 2, color: 'Negro', transmision: 'manual'},
        {marca: 'Dodge', modelo: 'Challenger',  year: 2012, precio: 25000, puertas: 2, color: 'Rojo', transmision: 'manual'},
        {marca: 'Mercedes Benz', modelo: 'Clase C',  year: 2018, precio: 45000, puertas: 4, color: 'Azul', transmision: 'automatico'},
        {marca: 'BMW', modelo: 'Serie 5',  year: 2019, precio: 90000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Ford', modelo: 'Mustang',  year: 2017, precio: 60000, puertas: 2, color: 'Negro', transmision: 'manual'},
        {marca: 'Dodge', modelo: 'Challenger',  year: 2015, precio: 35000, puertas: 2, color: 'Azul', transmision: 'automatico'},
        {marca: 'BMW', modelo: 'Serie 3',  year: 2018, precio: 50000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'BMW', modelo: 'Serie 5',  year: 2017, precio: 80000, puertas: 4, color: 'Negro', transmision: 'automatico'},
        {marca: 'Mercedes Benz', modelo: 'Clase C',  year: 2018, precio: 40000, puertas: 4, color: 'Blanco', transmision: 'automatico'},
        {marca: 'Audi', modelo: 'A4',  year: 2016, precio: 30000, puertas: 4, color: 'Azul', transmision: 'automatico'}
];

Forma Anterior: for loop

Anteriormente el For Loop era utilizado para todas las acciones, si deseabas acceder a cada registro o extraer determinado objeto de un arreglo, veamos un par de ejemplos:

Para listar todos los elementos de un arreglo, con un código como el siguiente sería suficiente:

for(let i = 0; i < autos.length; i++ ) {
    console.log(autos[i]);
}

Si colocas este código (junto al arreglo anterior) notarás que en tu consola se muestra listado cada objeto.

Supongamos que deseas extraer todos los automóviles del año 2018.

for(let i = 0; i < autos.length; i++ ) {
    if(autos[i].year === 2018) {
        console.log(autos[i]);
    }
}

Si deseas listar todos los automóviles 2018 y 4 puertas tu código sería así:

for(let i = 0; i < autos.length; i++ ) {
    if(autos[i].year === 2018 && autos[i].puertas === 4) {
        console.log(autos[i]);
    }
}

Nota como en el ejemplo anterior utilizamos un operador && para que revise que ambas condiciones se cumplan, y en caso de hacerlo enviamos la posición actual del arreglo a la consola.

El código anterior en realidad no esta mal, y como siempre digo; nadie irá a tu casa a reclamarte porque utilizas un for cuando en JavaScript ya existen array methods que simplifican tu código para lograr lo mismo que los ejemplos anteriores.

.forEach

El primer método que veremos es .forEach, este se ejecutará una vez por cada elemento en el arreglo, es decir, si tu arreglo tiene 10 elementos, se ejecutará 10 veces, lo cual lo hace una excelente opción para acceder a cada elemento del arreglo y listarlo; veamos los 2 códigos equivalentes, con for y con .forEach

// Forma anterior con for loop
for(let i = 0; i < autos.length; i++ ) {
    console.log(autos[i]);
}

// forma nueva con .forEach (ES6)
autos.forEach(auto => {
    console.log(auto);
});

Ambos códigos producirán el mismo resultado, pero nota lo limpio y sencilla que es la sintaxis de la segunda opción, incluso el código se puede mejorar utilizando una de las características de los arrow functions que es cuando tienes una sola línea de código puedes omitir las llaves {  }. De esta forma podremos hacer lo mismo que el for loop pero con una sola línea de código:

autos.forEach(auto => console.log(auto));

.map

.map y .forEach se pueden llegar a confundir, ambos se ejecutarán la misma cantidad de ocasiones que la cantidad de tus elementos en tus arreglos, la diferencia principal es: el .map crea un nuevo arreglo, mientras que el .forEach no.

Es considerado un anti-pattern o mala práctica que si no utilizarás el arreglo restante debes evitar utilizar el .map; por lo tanto si no utilizarás el arreglo restante es recomendable mejor utilizar un .forEach. Veamos un ejemplo de un .map que extraiga todas las marcas de los automóviles

const marcas = autos.map(auto => {
    return auto.marca
});
console.log(marcas);

El códigoa anterior asigna el valor del nuevo arreglo (creado por .map) a la variable marcas, y al final enviamos a la consola las marcas, si pruebas este código notarás que en tu consola aparecen todas las diferentes marcas de nuestra mini base de datos.

De nuevo el código anterior se puede simplificar gracias a otra de las características de los arrow functions: el return se da por implícito si tu código es de una sola línea.

const autos2018 = autos.map(auto => auto.marca);
console.log(autos2018);

Supongamos que deseamos extraer todos los automóviles de color Rojo de nuestra mini base de datos, podríamos intentar el siguiente código:

const autosRojos = autos.map(auto => {
    if(auto.color === 'Rojo') {
        return auto;
    }
});
console.log(autosRojos);

Si pruebas el código anterior notarás que, si bien el nuevo arreglo si extrae los automóviles de color rojo, también el nuevo arreglo tiene una serie de elementos como undefined, si deseas realizar una operación como esta, existe otro array method llamado .filter

.filter

.filter creará un nuevo arreglo con los elementos que pasen una condición o prueba de implementación, en el ejemplo anterior vimos que el código del .map no era el adecuado para filtrar todos los automóviles de color Rojo, pero el .filter si es el adecuado, veamos el código:

const autosRojos = autos.filter(auto => {
    return auto.color === 'Rojo' 
});
console.log(autosRojos);

De nueva cuenta, el código anterior se puede ver beneficiado por 2 características de los arrow functions, las llaves no son necesarias cuando tienes una línea de código, y tampoco es necesaria la palabra return, y de aquí al final de esta entrada daré por hecho estas consideraciones para simplificar el código.

// Filtrar todos los automoviles rojos 
const autosRojos = autos.filter(auto => auto.color === 'Rojo');
console.log(autosRojos);

Nota lo sencillo que es esta sintaxis comparada con la primera que vimos en esta entrada donde utilizabamos un for loop con un if dentro.

Veamos una serie de ejemplos de .filter (sin duda mi array method favorito):

// Obtener todos los autos 2018
const autos2018 = autos.filter(auto => auto.year === 2018);
console.log(autos2018);

// Obtener todos los autos de 4 puertas
const autos4puertas = autos.filter(auto => auto.puertas === 4);
console.log(autos4puertas)

// Obtener todos los autos marca Audi
const autosAudi = autos.filter(auto => auto.marca === 'Audi');
console.log(autosAudi);

// Obtener todos los autos cuyo costo es mayor a 30 mil
const mayores30mil = autos.filter(auto => auto.precio > 30000);
console.log(mayores30mil);

// Obtener todos los autos entre 2015 y 2017
const autosRango = autos.filter(auto => auto.year >= 2015 && auto.year <= 2017);
console.log(autosRango);

.find

.find encontrará el primer elemento del arreglo que cumpla la condición y retornará ese valor, algo importante es que a diferencia de .filter que crea un arreglo con todos los valores que cumplen una condición, en el caso de .find solo extraerá el valor del primero que cumpla la condición.

En nuestra mini base de datos tenemos 5 automóviles de la marca BMW, veamos un ejemplo de .find.

const primerResultado = autos.find(auto => auto.marca === 'BMW');
console.log(primerResultado);

Puedes ver que si bien tenemos 5 automóviles de esta marca, .find solo retornará el primero.

.reduce

.reducer ejecutará una función que retornará un acumulado como valor único.

Antes de ver un ejemplo más práctico, veamos una implementación más simple para conocer las diferentes partes de un .reduce, supongamos que tenemos un arreglo de números y queremos saber su suma:

const numeros = [1,2,3];
const total = numeros.reduce((total, numero) => total + numero, 0);
console.log(total)

El ejemplo anterior mostrará un 6 en la consola, lo que hace .reduce en el ejemplo anterior es recorrer el arreglo de numeros e ir sumando todo en lo que se conoce como un acumulador; es por eso que se pasan 2 valores después de .reduce() el total – que es el acumulador – y el número – que es el numero actual – del arreglo llamado numeros que esta en la línea anterior. Finalmente podrás notar que hay un 0 poco antes de cerrar el paréntesis de .reduce, ese es el valor inicial, que en este caso comenzará en 0, si lo inicias en 5, podrás ver que el total será 11, ya que comenzará a sumar a partir de 5 y sumará 6 (los valores de 1 + 2 + 3 ).

Ahora, supongamos que el departamento de ventas nos pregunta cuanto dinero podríamos generar si vendiéramos todos los automóviles, por supuesto puedes hacer la suma con los dedos o con una calculadora, pero un .reduce será más rápido y preciso.

const totalInventario = autos.reduce((total, auto) => total + auto.precio, 0);
console.log(totalInventario);

.some

.some verificará si un elemento existe o no en el arreglo, a diferencia de los otros métodos que te retornan un arreglo nuevo o el valor, en este caso solo te dirá si existe o no un elemento que cumpla la condición o implementación.

Supongamos que un cliente llama buscando un auto de la marca Ferrari, en nuestra base de datos no tenemos ninguno pero podremos comprobarlo con un .some

const existe = autos.some( auto => auto.marca === 'Ferrari');
console.log(existe)

Si revisamos el resultado del código anterior notarás que la consola solo imprime false, debido a que no hubo un registro que cumpliera con esa condición.

Como vimos anteriormente en nuestra base de datos tenemos 5 autos BMW, si hacemos una búsqueda por esta marca:

const existe = autos.some( auto => auto.marca === 'BMW');
console.log(existe)

Notarás que el resultado es true, .some no retornará un arreglo nuevo con los elementos, tampoco te dirá en que posición se encuentra el elemento, solo revisará si existe o no en tu arreglo.

Conclusión

Si bien todas las acciones que vimos anteriormente se pueden seguir realizando con el for loop, ya hoy en día es recomendado utilizar los array methods, estos solo fueron algunos, existe una gran cantidad disponible y la mejor forma de comprenderlos y recordarlos es creando proyectos y utilizarlos.