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:

const personas = [
 {
  nombre: "Luis",
  edad: 22
 },
 {
  nombre: "Juan",
  edad: 50
 },
 {
  nombre: "David",
  edad: 100
 }
];

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:

const regresarNombre = function(persona) {
 return persona.nombre;
}

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:

const nombresDePersonas = personas.map(regresarNombre);
console.log(nombresDePersonas);
/*
Salida:
[ 'Luis', 'Juan', 'David' ]
*/

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.

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:

const numeros = [25, 100, 81];

const regresarCuadrada = function(numero) {
 return Math.sqrt(numero);
}

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

const raicesCuadradas = numeros.map(regresarCuadrada);
console.log(raicesCuadradas);
/*
Salida:
[ 5, 10, 9 ]
*/

Y la salida se puede ver en el código.

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í:

/**
 * Ejemplos y explicación de Array Map
 * en JavaScript
 * 
 * https://parzibyte.me/blog
 * 
 */const numeros = [25, 100, 81];

const raicesCuadradas = numeros.map(Math.sqrt);
console.log(raicesCuadradas);
/*
Salida:
[ 5, 10, 9 ]
*/

Como map solo necesita la función a la que llamar, podemos pasarle la que ya existe.

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:

/**
 * Ejemplos y explicación de Array Map
 * en JavaScript
 * 
 * https://parzibyte.me/blog
 * 
 */const numerosString = ["20", "515", "800"];

const numerosInt = numerosString.map(function(numeroComoString){
 return parseInt(numeroComoString);
});
console.log(numerosInt);
/*
Salida:
[ 20, 515, 800 ]
*/

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.

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:

/**
 * Ejemplos y explicación de Array Map
 * en JavaScript
 * 
 * https://parzibyte.me/blog
 * 
 */const numerosString = ["20", "515", "800"];

const numerosInt = numerosString.map((numeroComoString) => {
 return parseInt(numeroComoString);
});
console.log(numerosInt);
/*
Salida:
[ 20, 515, 800 ]
*/

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

/**
 * Ejemplos y explicación de Array Map
 * en JavaScript
 * 
 * https://parzibyte.me/blog
 * 
 */const numerosString = ["20", "515", "800"];

const numerosInt = numerosString.map(numeroComoString => parseInt(numeroComoString));
console.log(numerosInt);
/*
Salida:
[ 20, 515, 800 ]
*/

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