Cómo usar .map() en JavaScript

Qué es el .map()

El .map de JavaScript es una función que nos permite recorrer un array y que devuelve un nuevo array según una función que nosotros necesitemos.

La principal ventaja es que no tenemos que recorrer de forma manual cada elemento del array como se hace un clásico bucle for, por lo que obtenemos un código más funcional y breve.

Ejemplo de uso del .map()

Suponer que tenemos el siguiente array:

Queremos un nuevo array con esos valores de «numeros», pero multiplicado cada valor por dos, con el método .map se hace de la siguiente manera:

Comparación de un bucle for vs .map()

Volviendo a este ejemplo, este sería el código su hubiéramos utilizado un bucle for en vez de un .map

La elección entre un bucle for y .map() depende de cada uno, aunque, por lo general, es más usado el .map() ya que promueve un código más limpio y fácil de entender.

Ejemplo 2: Recorrer una lista y pintar su índice

Suponer que tenemos un array que es una lista de tareas y que queremos saber pintar el índice + 1 de cada tarea (recuerda que el índice de un array en JS empieza en cero), el código que debes plantear es el siguiente:

Ejemplo 3: Recorrer un array de objetos

Otra tarea habitual cuando se programa es recorrer un array de objetos

Si estás habituado a trabajar con APIs o endpoints, por lo general, en la respuesta de un método GET vas a obtener un array de objetos como respuesta.

En este caso, tenemos un array de libros y queremos pintar el nombre del libro y su año de publicación, para ello recorremos el array usando el .map y luego acudimos a la propiedad del objeto que nos interesa consultar, en este caso las propiedades «titulo» y «anioPublicacion».

Conclusión

Se han expuesto varios ejemplos de usos del .map, viendo como su código queda más reducido en comparación con el bucle for.

Te dejo la documentación oficial del .map() aquí.