Reduce regresando un objeto

La semana pasada escribí acerca de algunas funciones útiles en javascript, una de ellas es mas interesante de lo que parece, ésta es la función reduce, en ese post comentamos que lo usamos cuando tenemos que generar un sumarizado de un arreglo, en ese momento hicimos el conteo (sumarizado) de cachorros y de adultos, en sí esta forma es útil, pero a veces lo que queremos no es un sumarizado numérico, sino crear un objeto y que él sea el sumarizado.

Reduce nos sirve también en este caso de uso ya que la función también puede regresar el sumarizado como un objeto, no solo como un entero.

Otra cosa que mencioné es que no me había tocado usar alguna de estas funciones, pero ya en esta semana que pasó me tocó usar reduce, el caso de uso fue el siguiente:

Tengo un arreglo de bancos con los bines de tarjetas de crédito, en este caso lo que necesitaba es un arreglo de los bancos que tengo en la lista, por lo que usé la función reduce para "reducir" (sumarizar) el arreglo de bines de bancos en un arreglo de bancos, el código es como sigue:

var bines = [{"bank":"banco1","bin":"111111"},
     {"bank":"banco1","bin":"122222"},
           {"bank":"banco1","bin":"133333"},
     {"bank":"banco1","bin":"144444"},
          {"bank":"banco2","bin":"211111"},
     {"bank":"banco2","bin":"222222"},
     {"bank":"banco2","bin":"233333"},
     {"bank":"banco3","bin":"311111"},
     {"bank":"banco3","bin":"322222"}];

var reduced_banks = bines.reduce(function(banks, bin) {
isAlreadyAdded = banks.find(function(bank) {
return bank == bin.bank;
})
if(!isAlreadyAdded)
banks.push(bin.bank);
return banks;
}, []);
console.log(reduced_banks);

lo que sale a la consola es:

[ 'banco1', 'banco2', 'banco3' ]

Esto es, el listado de bancos.

Ahora, explicando un poco lo que sucede, tenemos un arreglo de bines en el que se repiten los bancos y lo que queremos es sólo el arreglo de bancos, lo que hacemos es usar la función reduce mandándole una función que recibe el objeto contenedor del sumarizado (banks) y el elemento actual de la lista original (bin), enviándole también a la función reduce un arreglo vacío como último parámetro ([]) que es el valor inicial de banks, luego reduce aplica a cada elemento del arreglo bines la función que le enviamos como primer parámetro donde lo que hacemos es buscar en el arreglo de bancos (banks)

si ya existe el banco del elemento en el que estamos de bines y si no ha sido agregado antes se agrega al arreglo banks (objeto simarizador). Como ven, también find es aplicado sobre un arreglo, en este caso banks y lo que hace es iterar sobre cada elemento del arreglo y a cada elemento le aplica la función  que le mandamos como parámetro y que regresa true si el arreglo ya contiene banco del elemento actual de bines.

Espero que este ejemplo sea didáctico en el uso de reduce y find, en este ejemplo el objeto sumarizador es un arreglo, pero bien puede ser cualquier otro tipo de objeto.

Algunas funciones útiles en javascript

Esto de cambiar de trabajo es muy interesante, la verdad es que uno está acostumbrado a cierto ritmo y al cambiar de trabajo tu día cambia mucho desde tomar otra ruta para llegar a la oficina, levantarte en un horario distinto hasta conocer gente distinta, reencontrarte con los antiguos camaradas, regresar a programar activamente y bueno pues como en todo encontrar problemas distintos a los ya habituales, un ritmo de trabajo distinto, un negocio distinto y cosas nuevas por aprender.

Dentro de estos cambios me ha tocado entender AWS, lo que ofrece y como manejar lo que tiene (en mi primer semana instalé dos veces en producción), algo de spring que ya tenía un poco empolvado y lo que más me ha costado, reencontrarme con los html, javascript y css, esos fueron mis amigos en mi primer trabajo hace mas o menos 10 años y desde entonces no me había tocado trabajar activamente en el front end de aplicaciones web de esta manera pues en Tralix me la pasé más con GWT, un poco de echo2 y muy poco de struts.

Y como parte de mi aprendizaje he estado viendo algunas cosas en javascrip que me llamaron la atención, en particular las funciones find, filter, map y reduce (que aún no he ocupado pero que ya son parte de mi toolbox) y de esas funciones es de lo que quiero hablar en este post. Comencemos con el arreglo definido de la siguiente manera:

mascotas = [
{
'nombre'  : 'max',
'especie' : 'perro',
'raza'    : 'dálmata',
'edad'    : '3',
'sexo'    : 'macho'
},
{
'nombre'  : 'yoshina',
'especie' : 'perro',
'raza'    : 'dálmata',
'edad'    : '5',
'sexo'    : 'hembra'
},
{
'nombre'  : 'luneta',
'especie' : 'perro',
'raza'    : 'dálmata',
'edad'    : '4',
'sexo'    : 'hembra'
},
{
'nombre'  : 'simba',
'especie' : 'perro',
'raza'    : 'dálmata',
'edad'    : '1',
'sexo'    : 'macho'
}
]

Find

La función find nos sirve para encontrar un elemento en un arreglo, por ejemplo si queremos encontrar a max dentro del arreglo lo que tenemos que hacer es:

max = mascotas.find(function(mascota) {
return mascota.nombre == 'max'
})
console.log(max)

y lo que nos va a imprimir en la consola es a max.

Filter

La función filter la usamos para obtener un sub arreglo del arreglo original, por ejemplo si queremos encontrar a todos nuestros perros machos lo que tenemos que hacer es:

machos = mascotas.filter(function(mascota) {
return mascota.sexo == 'macho'
})
console.log(machos)

en este caso nos imprimirá en la consola un sub arreglo conteniendo a max y a simba.

Map

La función map se usa cuando queremos transformar un arreglo en otro, esta es una función muy útil cuando se trabaja en un cliente de servicios REST ya que normalmente lo que el servicio nos trae son cosas generales y tal vez nosotros no queremos operar sobre todos los datos, sino sobre sólo algunos, espero esto no sea confuso, pero bueno, para que quede mas claro vamos a transformar nuestro arreglo de mascotas en un arreglo de edades de la siguiente forma:

edades = mascotas.map(function(mascota) {
return mascota.edad
})
console.log(edades)

Lo que nos imprime en la consola es el arreglo de las cuatro edades de nuestros perros (transformamos un arreglo de mascotas a un arreglo de edades).

Reduce

La función reduce normalmente la ocupamos cuando queremos generar un "sumarizado" o un resultado "agregativo" (jeje no supe como decirlo) sobre un arreglo, para que sea mas claro veamos el ejemplo:

cachorros = mascotas.reduce(function(total, mascota) {
if (mascota.edad <= 1)
return total +1
else 
return total
}, 0)
console.log(cachorros)

la salida a la consola que obtenemos es la cantidad de cachorros que hay en nuestro arreglo (los que son menores o igual a 1 año de edad), y la forma en que opera es que va iterando el arreglo, para cada elemento checa la edad de la mascota y si es un cachorro suma 1 al total, por cierto ese 0 "cero" extraño que se ve al final de la llamada a la función reduce es el valor inicial del total.

Lo bonito de esto es que muchas de estas funciones existen dentro de prácticamente todos los lenguajes funcionales y nos ayudan no solo en la programación del front end en javascript.

Otra cosa a hacer notar es que todas estas funciones reciben como uno de sus parámetros una función, esto las hace muy poderosas y reusables ya que por ejemplo si quieres obtener a los adultos (en el ejemplo del reduce) lo único que tienes que hacer es cambiar a función que recibe el reduce como parámetro, lo que se hace es sacar la función a por ejemplo:

cachorros = function(total, mascota) {
if (mascota.edad <= 1)
return total +1
else 
return total
}

y tener otra función:

adultos = function(total, mascota) {
if (mascota.edad > 1)
return total +1
else 
return total
} 

y pasar uno u otra al reduce:

numero_cachorros = mascotas.reduce(cachorros(total, mascota), 0)

o

numero_adultos = mascotas.reduce(adultos(total, mascota), 0)

Con esto se ilustra una de las bondades de la programación funcional, el poder enviar funciones como parámetros.

Este post nos sirve como capítulo introductorio a la programación funcional, de la que estaremos hablando poco a poco.