En el post anterior hablamos sobre Array.forEach y su funcionamiento, ahora vamos con el que hoy en día (creo yo) es el segundo método de Array más usado, map.
Map recorre un array y crea un nuevo array como resultado de la invocación a una función dada.
En palabras simples, map recorre un array y aplica una función (que es parámetro) a cada elemento del mismo, y crea un nuevo array con los elementos resultantes.
Un ejemplo simple (y no muy útil)
var a = [1, 2, 3, 4];
const m = a.map(function(item){
return item;
});
console.log(m);
O lo que sería lo mismo:
m = array1.map(x => x);
Lo que ocurre es que la función que se pasa como parámetro es quien genera el resultado, en este caso devuelve el mismo elemento que recibe (en item se pasa cada valor del array, uno a la vez) entonces el resultado es igual, pero es un nuevo array, no es el mismo.
Evidentemente este ejemplo no tiene mucha utilidad, en genera uno realiza operaciones dentro de la función, por ejemplo:
var a = [1, 2, 3, 4];
var m = a.map(function(item){
return item * 2;
});
console.log(m);
En este caso la función recibe en item cada elemento y retorna su valor * 2.
Por supuesto que dentro de esta función podemos hacer cualquier cosa, incluso ignorando los valores del array original.
var a = [1, 2, 3, 4];
var m = a.map(function(item){
console.log(+new Date());
});
Alguna características de map:
- La función recibe tres parámetros, el item actual, el índice del elemento y el array orginal, con lo cual podemos operar sobre el array orginal.
- Se invoca a la función una vez por cada elemento del array que contiene valores.
- Si no se usa el array resultante o no se retorna un valor en el callbackse considera incorrecto el uso de map, en tal caso se puede usar for-of o forEach.
- Los elementos recorridos por map son determinados antes de iniciar el recorrido.
- Los elementos que hayan cambiando luego de iniciada la iteración se considerará su valor actual.
- Los elementos removidos no son recorridos (ya que sus valores serían inválidos).
- Es posible pasar el contexto como segundo parámetro (que tomaría el valor de this).
Como vemos muchas de estas características son iguales a forEach.
Entonces, cuándo usamos map y cuándo forEach?
Como dice más arriba, si no vamos a utilizar el array resultante se considera un antipatrón usar map y debemos echar manos de forEach o for-of.
El uso tal vez más común al consultar una API sería "reformatear" los objetos obtenidos.
var a = [{"nombre":"Marcelo", "nombre":"Leonardo"}];
var m = a.map(function(item){
return {"Nombre":item.nombre}
});
console.log(m);
Nos leemos.