Explicando el método map() de JavaScript.

Introducción

El método map() pasa cada elemento del array sobre el que ha sido invocado a la función que hemos especificado y devuelve un array que contiene los valores devueltos por la función especificada previamente.

Sintaxis

var nuevoArray = arr.map(function callback(currentValue, index, array) {
    // Elemento devuelto de nuevo_array
},thisArg)

Parámetros

• callback función que se encarga de generar los elementos del nuevo array, este recibe tres argumentos y son los siguientes:
  • currentValue : Es el elemento actual que está siendo procesado.
  • index : Es el índice del elemento actual dentro del array que está siendo procesado.
  • array : Es el array que está siendo procesado por el metodo map().
• thisArg opcional : Valor que va a ser usado como this al ejecutar callback.

Consideraciones

• callback debería devolver un valor.
• callback se invoca sólo para los índices del array que tienen valores asignados.
• map() devuelve un array nuevo, no modifica el array en el que ha sido invocado.
• Si los elementos existentes del array son modificados o eliminados, su valor pasado al callback será el valor en el momento que el método map() lo procesa; los elementos que son eliminados no son procesados.

Ejemplos

Obtener un nuevo array multiplicando por 2 cada uno de los valores de un array dado

const initialArray = [1, 4, 9, 16];

function double(currentValue, index, array){
  return currentValue * 2
}

const newArray = initialArray.map(double);

// newArray = [2, 8, 18, 32]

// initialArray = [1, 4, 9, 16]

Usando map() para modificar el formato de los objetos de un array

var initialArray = [{clave:1, valor:50},
               {clave:2, valor:100},
               {clave:3, valor: 150}];

var newArray = initialArray.map(function(obj){
   var rObj = {};
   rObj[obj.clave] = obj.valor;
   return rObj;
});

// newArray es  [{1:50}, {2:100}, {3:150}],

// initialArray sigue siendo:
// [{clave:1, valor:50},
//  {clave:2, valor:100},
//  {clave:3, valor: 150}]