Transformar arrays con map

En esta lección dominarás el método .map() de los arrays para construir un array nuevo transformando cada elemento de otro. Está dirigida a quien busca «uso de map en JavaScript» o «transformar arrays en JavaScript».

.map(función) aplica el mismo proceso a cada elemento del array y produce un array nuevo. Es como «una máquina que procesa de la misma forma todo lo que pasa por la cinta transportadora». El array original no cambia. Es uno de los métodos de array más usados en aplicaciones web reales, para cosas como dar formato a una lista de datos antes de mostrarla.

El código de ejemplo crea un array nuevo, doubled, que duplica cada elemento del array nums con .map((n) => n * 2). Comprueba en la consola que el array original nums queda intacto. Es más corto que escribirlo elemento a elemento con un for, y además transmite «lo que intentas hacer» con más claridad.

Un tropiezo habitual al empezar es que la función que pasas a .map() siempre debe hacer return de un valor. Olvidar el return deja todos los elementos del nuevo array como undefined. También es fácil confundirlo con .forEach(), pero una diferencia clave es que forEach no produce un array nuevo.

En el desarrollo real, map se usa sin parar para procesos como convertir un array de productos recibido del servidor en un array de elementos HTML para mostrarlos. La seguridad de poder construir un array nuevo sin romper el original es otra razón por la que se prefiere en proyectos reales.

.map() se encadena además con facilidad: combinar .filter() para acotar y después .map() para transformar es un patrón que verás con frecuencia también en el trabajo real.