Hoy voy a explicar cómo funciona Array Map en JavaScript. La función map es una función que tienen todos los arreglos y permite mapear o convertir un arreglo en otro; es decir, Array Map en JavaScript transforma arreglos.

Voy a explicar cómo funciona map con algunos ejemplos.

Array Map en JavaScript: sintaxis

La sintaxis es:

arregloMapeado = arreglo.map(función, argumentoThis);

En donde:

1. argumentoThis es a lo que se referirá this dentro de la función. Casi no se usa, pero es bueno tenerlo en cuenta
2. función es la función que va a transformar al arreglo. La misma recibe tres argumentos y me recuerda mucho a forEach:
   1. El elemento actual
   2. Índice del elemento actual
   3. Arreglo que estamos mapeando

Por cierto, Array Map en JavaScript regresa un nuevo arreglo.

Ejemplo sencillo

Vamos a comenzar con un ejemplo sencillo. Como lo dije, esta función transforma un arreglo. Por lo tanto veamos el siguiente arreglo:

Es un arreglo de objetos que tienen nombre y edad. Vamos a transformar a ese arreglo de manera que tengamos un nuevo arreglo pero únicamente con los nombres, ya no nos importan los objetos.

Definimos la función que lo transforma:

La función recibe una persona y devuelve la propiedad nombre. Ahora solo resta invocar a map con esa función, y asignar el resultado a una nueva variable:

La magia sucede en la línea 1, invocamos a map con la función regresarNombre. Por cada elemento que haya en personas, se invocará a regresarNombre y el resultado será asignado a un nuevo elemento dentro de nombresDePersonas.

Si quieres puedes probar el ejemplo aquí.

Otro ejemplo de array map en JavaScript

Si no quedó tan claro, veamos otro ejemplo ahora con simples números. Vamos a obtener un nuevo arreglo cuyo contenido sea la raíz cuadrada de cada número en otro arreglo.

Por ejemplo, si tenemos 25, 100 y 81 ahora deberíamos tener 5, 10 y 9. Definimos el arreglo y la función:

Simplemente estamos regresando lo que devuelve Math.sqrt. Ahora solo mapeamos:

Y la salida se puede ver en el código, o en este enlace.

Usando funciones que ya existen

En el ejemplo de arriba, invocamos a la función regresarCuadrada, pero ya existe una función que regresa la raíz cuadrada y recibe un número, ¿sabes cuál es? exacto, Math.sqrt así que el ejemplo anterior bien puede ser escrito así:

Como map solo necesita la función a la que llamar, podemos pasarle la que ya existe. Si no me crees, prueba el ejemplo aquí.

Nota

Aunque parece que así puedes reutilizar funciones, recomiendo crear las tuyas. Es decir, mejor definir una función que regrese la raíz cuadrada (aunque internamente invoque a Math.sqrt) y no usar la que ya existe, esto es porque otras funciones ya existentes pueden tener comportamientos inesperados debido a los argumentos que map pasa.

Funciones anónimas para array map en JavaScript

Hasta el momento hemos usado funciones con nombre o funciones ya definidas. Sin embargo, también podemos definir funciones anónimas.

Veamos el siguiente ejemplo en donde convertimos un arreglo de números como cadena, a números como enteros:

Lo importante de aquí es la línea 10, en ella invocamos a map pero definimos la función ahí mismo, sin invocarla antes o después, ni definirla.

Esto es una función anónima y viene bien para cuando vamos a usar map con una función que no vamos a reutilizar después.

Prueba el ejemplo aquí.

Funciones flecha

Las arrow functions o funciones flecha no son otra cosa más que las funciones pero de manera simplificada. A la función array map en JavaScript no le importa cómo se haya definido la función, aunque de igual manera veamos un ejemplo de función flecha con map:

Prueba el ejemplo aquí.

Como ves, no es mucha ciencia, solo cambia un poco la sintaxis. De hecho se puede simplificar todavía más:

Si quieres puedes probar el ejemplo aquí.

Finalmente te invito a ver cómo funciona forEach en JS, o a ver más sobre JavaScript en mi blog.