Explorando la función map() en Javascript

Así como mencione en mi artículo anterior, Javascript tiene funciones extraordinarias que hacen cosas asombrosas con pocas líneas de código. La función map(), es una de ellas. Vamos a dar un repaso a una serie de ejemplos que nos permitirán conocer un poco mas a fondo esta función.

Para no perder la costumbre comenzaré con la definición de la documentación oficial, la cual expone lo siguiente:

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Sin duda, creo que es un concepto menos complicado que el de la función reduce(), sin embargo a primera vista no queda del todo claro, si no vemos un ejemplo.

Elevando a la segunda potencia.

En el código de la imagen, tenemos un array con 3 elementos. En esta ocasión lo que necesitamos hacer es elevar a la segunda potencia cada elemento del array. Al invocar a la función map(), el proceso se podría explicar de la siguiente manera:

  1. Cada elemento (número) dentro del array es pasado como argumento por una función dentro del método map().
  2. Una vez dentro de la función interna, es recibida por el método pow() de la librería Math de Javascript , la cual puede ser invocada de manera global. Math.pow() representa la función que queremos aplicar a cada elemento del array.
  3. Math.pow() retorna un nuevo valor que es el resultado de elevar el número a la segunda potencia, en el caso del primer elemento retornaría 2 elevado a la 2 = 4. Cada valor se va acomodando en un índice que al final representara el nuevo array.

Esto es un proceso que sin duda se puede replicar con un bucle, no obstante, usando la función map() sería indudablemente mas limpio y sencillo de hacer.

En el caso de ReactJS, uno de los usos más comunes de esta función es para dar formato (HTML, CSS) a los datos que quieren mostrarse en pantalla. Veamos un caso simple de una barra de navegación:

Agregando etiquetas HTML.

Supongamos que recibimos las opciones que necesitamos agregar a una barra de navegación de manera dinámica. Antes de ser entregados al front-end, debo darle algo de formato para que pueda lucir bien. En este ejemplo muy simple, el proceso consiste en pasar cada uno de los elementos del array y envolverlos con las etiquetas <li></li> de html. Para lograr esto, me ayudo de los Templates Literals (Plantillas de cadena de texto) que nos permiten insertar variables y expresiones dentro de una cadena de texto (nótese el uso de backtips ` `, en lugar de comillas simples ‘ ’ y para insertar mi variable uso la notación ${miVariable}).

El resultado en consola sería el siguiente:

Console de JSBin

A partir de aquí, mis elementos ya estaría listos para ser insertados dentro de las etiquetas <ul></ul> para mostrar mi barra de navegación.

En nuestro último ejemplo, vamos a combinar la función map(), con la función reduce(), para lograr calcular el promedio de calificaciones de los alumnos de una salon de clases. La calificaciones se encontraran en un array multidimensional. El objetivo es retornar un array con el promedio de cada alumno. Para lograr esto vamos a chequear el siguiente código:

Combinado map() y reduce()

En la imagen anterior, recibimos un array que contienes 3 calificaciones para cada alumno en particular. El mencionado array lo procesamos de la siguiente forma:

  1. Recorremos el array con la función map().
  2. La calificaciones de cada alumno, que son representadas con un array, son enviadas a una nueva función, la cual es representada por la función reduce().
  3. La función reduce() se encargará de procesar el array para realizar la suma de todos su elementos y al final de los cálculos, los guarda en una variable suma. Te recuerdo que ya escribí un artículo sobre la función reduce() que puede chequear aquí.
  4. La suma arrojada por la función reduce(), la dividimos por la cantidad de elementos en el array de calificaciones.
  5. Por último, la función map(), se encargará de retornar un elemento por cada promedio calculado, y los añadirá a un array con todos los promedios calculados.
Array de promedios (Console de JSBin)

Conclusión

La funciones de tipo map(), reduce() y filter(), nos ayudan a escribir código más limpio y menos propenso errores. En el caso de map(), presenta una sencillez asombrosa al momento de realizar algunas operaciones al recorrer arrays. Además, map() es una de la funciones mas usadas en el desarrollo con Angular y por supuesto con ReactJS.

Una gran ventaja de usar map() en ReactJS radica en que el resultado de las operaciones no realiza ningún tipo de mutación en el array original, el cual es un concepto muy utilizado en el desarrollo con ReactJS, map() retorna un nuevo array con los resultados esperados, lo cual se ajusta perfectamente a la filosofía del framework creado por Facebook.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.