Artículo original escrito por Nathan Sebhastian
Artículo original JavaScript Map – How to Use the JS .map() Function (Array Method)
Traducido y adaptado por Josué

A veces es necesario tomar un arreglo y aplicar algún procedimiento a sus elementos para obtener un nuevo arreglo con elementos modificados.

En lugar de iterar manualmente sobre el arreglo usando un bucle, puedes simplemente usar el método incorporado Array.map().

El método Array.map() te permite iterar sobre un arreglo y modificar sus elementos utilizando una función callback. La función callback se ejecutará entonces en cada uno de los elementos del arreglo.

Por ejemplo, supón que tienes el siguiente elemento de arreglo:

let arr = [3, 4, 5, 6];
Un simple arreglo de JavaScript

Ahora imagina que tienes que multiplicar cada uno de los elementos del arreglo por 3. Podrías considerar usar un bucle for como el siguiente:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]
Iterar sobre un arreglo utilizando el bucle for

Pero en realidad puedes utilizar el método Array.map() para conseguir el mismo resultado. He aquí un ejemplo:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]
Iterar sobre un arreglo utilizando el método map()

El método Array.map() se utiliza comúnmente para aplicar algunos cambios a los elementos, ya sea multiplicando por un número específico como en el código anterior, o haciendo cualquier otra operación que pueda necesitar para su aplicación.

Cómo utilizar map() sobre un arreglo de objetos

Por ejemplo, puedes tener un arreglo de objetos que almacene los valores de firstName y lastName de tus amigos de la siguiente manera:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];
Un arreglo de objetos

Puedes utilizar el método map() para iterar sobre el arreglo y unir los valores de firstName y lastName de la siguiente manera:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
Utiliza el método map() para iterar sobre un arreglo de objetos

El método map() pasa algo más que un elemento. Veamos todos los argumentos que pasa map() a la función callback.

La sintaxis completa del método map()

La sintaxis del método map() es la siguiente:

arr.map(function(element, index, array){  }, this);

La function() callback es llamada en cada elemento del arreglo, y el método map() siempre le pasa el element actual, el index del elemento actual y el objeto array completo.

El argumento this se utilizará dentro de la función callback. Por defecto, su valor es undefined. Por ejemplo, aquí está cómo cambiar el valor de this al número 80:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
Asignación de valor numérico al método map() en este argumento

También puedes probar los otros argumentos usando console.log() si te interesa:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
Registro de los argumentos para ver los valores

Y eso es todo lo que necesitas saber sobre el método Array.map(). La mayoría de las veces, solo utilizarás el argumento del element dentro de la función callback, ignorando el resto. Eso es lo que suelo hacer en mis proyectos diarios :)

Gracias por leer este tutorial