Mapear, filtrar y reduce: las 3 funciones principales en matrices en Javascript

En este artículo hablaré en detalle sobre los tres grandes de Javascript. Comprenderlos es un paso importante para cualquier desarrollador de Frontend que no teme a la programación funcional y la codificación de un nivel superior.

Antes de irme quiero dedicar dos líneas a la programación funcional: en definitiva, es una forma de ver la creación de código, a la par de la programación imperativa clásica, con la diferencia de que te permite escribir de una forma mucho más limpia, legible y testeable  y es hija del concepto matemático de Función, que es una relación entre conjuntos que está asociada con uno o más elementos de un conjunto, uno y sólo un elemento del otro conjunto (Sí, estamos hablando de la concepto de Dominio y Condominio). Buscando en la red seguramente se podrá aprender más, ya que es un tema cada vez más popular entre todos los desarrolladores.

Después de esta breve introducción, comencemos con los infames tres grandes de Javascript y por qué son preferibles a los bucles y bucles normales. Para explicarlo, utilizaré un enfoque pragmático lleno de ejemplos de casos reales.

Presentaré los ejemplos utilizando el enfoque de la función de flecha y el enfoque ES5, limitándome a enfatizar cuánto aumenta dramáticamente la limpieza del código.

FILTROS EN JAVASCRIPT

Comencemos con el método FILTER y comparémoslo con un método normal para.

¿Cómo filtrarías una matriz de objetos como esta eligiendo solo autos “minivan”?

 

 

Usando un bucle for normal tendríamos una solución como esta:

 

Este código funciona perfectamente, nada que decir. Pero, ¿y si quisiéramos realizar operaciones más complejas y que tal vez tengan que trabajar directamente en el set de minivans? Aquí, se agregará otro para a este, que hará otras operaciones y así sucesivamente, aumentando así el número de líneas y empeorando drásticamente la legibilidad del código.

Veamos la implementación usando el método Filter.

• Approach Arrow function:
   

• Approach ES5:
   

en muchas menos líneas y sin tener que administrar índices y otras variables externas, obtuvimos el mismo resultado. ¡Todo esto es realmente genial!

Veamos por un momento los detalles de las implementaciones que acabamos de describir y cómo funcionan: el método Filter toma como parámetro una función (callback) que se ejecuta en cada elemento del arreglo en el que se invoca. La devolución de llamada debe devolver un booleano, por lo tanto verdadero o falso, si la condición devuelve verdadero, entonces el elemento se agregará a la matriz final resultante, ya que el método Filter devuelve una nueva matriz y no actúa sobre la original.

El ejemplo más simple es el clásico en el que tienes una matriz de números como esta:

y hay que recuperar solo los pares. La implementación que sigue el enfoque de la función de flecha se vería así:

En pocas palabras, si ELEM (que sería el número único de la matriz) satisface la condición de devolución, ¡se agregará al filtrado!

MAP EN JAVASCRIPT

El método Map se comporta de una manera muy similar: también acepta una devolución de llamada que se ejecuta en cada elemento de la matriz. Su objetivo es aplicar la lógica al elemento para devolver una nueva matriz en la que cada dato se ha asignado mediante la devolución de llamada.

Con algunos ejemplos todo quedará más claro.

Imaginemos que obtenemos la misma matriz de números que antes.

y quiere una matriz en la que todos los elementos se dupliquen, en resumen ¡mapeados de manera diferente!

• Approach Arrow function: 

• Approach ES5:

Como puede ver, las reglas son las mismas que para el método Filter. Se aplica un cálculo a cada elemento de la matriz que lo modifica y lo inserta en una nueva matriz resultante.

Un ejemplo más complejo podría ser, a partir de la matriz Cars al principio del artículo, lo siguiente: modificar todos los elementos del tipo monovolumen, agregando el campo seguro.

Pongo el objeto de los autos arriba para tener una imagen más clara.

 

Una solución sería:

¿Ha notado el uso del operador de propagación para recuperar todas las propiedades del automóvil (color, tipo, matrícula y capacidad)? El seguro de propiedad simplemente seguirá a los demás existentes.

Los más atentos habrán visto que el contenido de la devolución se encierra entre llaves, esto permite conservar el objeto original y tomar todos sus valores para crear una copia con la adición del seguro.

El resultado siempre será una matriz de objetos de este tipo, donde cada elemento tendrá la nueva propiedad configurada como indefinida ya que solo se ha agregado:

REDUCE EN JAVASCRIPT

El método Reducir es un poco más complejo de entender, especialmente para principiantes. Comencemos con un ejemplo muy agradable usando la misma matriz de máquinas que antes: imaginemos que queremos buscar la que tiene la mayor capacidad, normalmente con un for habríamos creado una variable de soporte y de vez en cuando habríamos verificado cada objeto actual con el primero guardado, algo así:

y luego iteramos sobre todos los elementos restantes a partir del segundo

y aquí encontraremos la máquina con mayor capacidad o al menos la primera en el caso de máquinas con capacidades idénticas.

Veamos la consideración usando el método REDUCE.

• Approach Arrow function: 

A primera vista puede parecer difícil de entender pero si te detienes por un momento para entender todo estará claro, en primer lugar la lógica comienza después de la flecha (=>), todo lo que se pone después de este símbolo se devuelve directamente como resultado. Luego, el control de capacidad comienza usando el operador ternario, por lo que si se verifica que acumulador.capacidad es mayor o igual que el acumulador.capacidad entonces el acumulador permanecerá sin cambios, de lo contrario será reemplazado por currentCar.

• Approach ES5:

Entonces, en resumen, Reduce solo tiene un propósito: ¡extraer un solo resultado de la matriz en la que se le llama! Al igual que los métodos Filter y Map, ejecuta una devolución de llamada en cada elemento individual, tomando el acumulador o acumulador como parámetros y el elemento actual de la matriz como segundo parámetro (NOTA: en la primera ronda serán idénticos). El elemento inicial del método será cars [0] que se especifica en la parte inferior, después de la devolución de llamada.

En pocas palabras, se pasa el elemento inicial que se convertirá en el acumulador, se verifica con el elemento actual y si se cumple la condición, el acumulador se actualizará con los nuevos datos y así sucesivamente hasta el final del arreglo.

El ejemplo más famoso es aquel en el que demostramos cómo devolver la suma de todos los elementos:

La solución con reduce es la siguiente:

La primera iteración tendrá acumulador = 0 y currentValue = 1 y como estamos en el primer elemento y no hay ningún elemento anterior, se usa el cero en la parte inferior, es decir, el segundo parámetro. En este punto se hace la suma (por lo tanto, 1).

En la segunda iteración se llama a la función con acumulador = 1 (¡resultado de la iteración anterior!) Y currentValue = 2. También en este caso se realizará la suma (por lo tanto 3), y así sucesivamente hasta obtener 30, que es la suma de todos los números.

Una última característica importante de los tres grandes es su modularidad. Como piezas de un rompecabezas, estos 3 métodos encajan perfectamente, lo que le permite realizar operaciones complejas de una manera elegante y limpia.

Un ejemplo muy agradable y simple podría ser, a partir de la matriz de números anterior, tomar solo los números pares, multiplicarlos por 3 y luego agregarlos:

El resultado será 42, ahora imagina tener que hacerlo con bucles simples como For o While .. escríbeme cuando lo hayas probado y veamos las diferencias: D

Conocer estos 3 métodos es la clave para poder subir de nivel como desarrolladores de Frontend y afrontar sin ningún problema los problemas más habituales a la hora de tratar con rest api o con cualquier otro dato que necesite ser gestionado de la forma más limpia posible.

Como he mostrado, todo esto es fácilmente replicable con un For normal, pero ¿por qué conducir un coche pequeño si puedes usar un Ferrari y lo que es más gratis? A ti la elección.