map

El método map() crea un nuevo array a partir de uno ya existente. El nuevo array tendrá los cambios aplicados por la función definida (callback).

const ingredients = ["🥚 egg", "🥔 potato", "🌽 corn"];

const food = ingredients.map(ingredient => {
    return cook(ingredient);
});

console.log(food);

// ["🍳 fried eggs", "🍟 french fries", "🍿 popcorn"]

Sintaxis

const newArray = array.map(callback(currentValue, index, innerArray) {
  // ...
}, this)

callback

Función a ejecutar por cada elemento del array. Es decir, la función que va a aplicar los cambios en el elemento en el que se encuentre.

Ejemplo

const array = [5, 7, 24, 2, 10];

const multiply = array.map(function(number) { 
  return number * 2;
})

console.log(multiply) // [10, 14, 48, 4, 20]

La función que recibe el método map() es el callback que se va a estar ejecutando por cada elemento. La primera vez que se ejecute, va a ser 5 * 2, la segunda vez 7 * 2, la tercera vez 24 * 2 y así sucesivamente, hasta terminar con el array.

currentValue

Es el primer argumento que recibe el callback y representa el elemento actual que el método está procesando. Este argumento es clave para crear el nuevo array con los datos manipulados.

En el ejemplo anterior es representado por el nombre number.

index

Es el segundo argumento que recibe el callback y representa el índice (posición) del elemento actual dentro del array.

Ejemplo

Manipulando un poco la función anterior, ahora en lugar de multiplicar por 2, se va a multiplicar por el index actual, empezando desde el 0.

const array = [5, 7, 24, 2, 10];

const multiply = array.map(function(number, index) { 
  return number * index;
})

console.log(multiply) // [0, 7, 48, 6, 40]

La primera vez que se ejecute, la operación va a ser 5 * 0, la segunda vez 7 * 1, la tercera vez 24 * 2 y así sucesivamente, hasta terminar con el array.

innerArray

Es el tercer y último argumento que recibe el callback, representa el array sobre el que se llama map. Es decir, el array de origen

Ejemplo

const array = [5, 7, 24, 2, 10];

const multiply = array.map(function(number, index, innerArray) {
  innerArray.push("🔥");
  return number * index;
});

console.log(array); // [5, 7, 24, 2, 10, "🔥", "🔥", "🔥", "🔥", "🔥"]
console.log(multiply); // [0, 7, 48, 6, 40]

En este caso, se está agregando el emoji "🔥" por cada iteración del método map, dando como resultado varios emojis en conjunto con los valores originales.

this

Representa el valor que se va a usar como this al ejecutar el callback.

Ejemplo

const six = 6;
const array = [5, 7, 24, 2, 10];

const multiply = array.map(function(number, index) {
	return number * this;
}, six);

console.log(multiply); // [30, 42, 144, 12, 60]

Si quieres saber más sobre como funciona this, te dejo mi siguiente artículo:

This en diferentes situaciones y su comportamiento

this no es algo fijo, sino que siempre va a estar en constante cambio y depende de en donde y como se use. En esta pequeña guía entenderas mejor este concepto.

Fili SantillánFili Santillán

Algunos ejemplos

Obtener los valores de una lista de inputs

En este ejemplo con el método querySelectorAll se obtienen todos los inputs con la clase .input, para extraer los valores de los mismos.

const inputs = document.querySelectorAll(".input");

const values = Array.from(inputs).map(function(input) {
  return input.value
});

Obtener los valores de un array de objetos

Muy similar al ejemplo de los inputs, usando map se puede extraer los valores de un array de objetos de manera sencilla.

const animals = [
  { name: "Cat", photo: "🐱" },
  { name: "Dog", photo: "🐶" },
  { name: "Panda", photo: "🐼" },
  { name: "Frog", photo: "🐸" },
  { name: "Monkey", photo: "🐵" }
];

const photos = animals.map(function(animal) {
  return animal.photo;
})

console.log(photos); // ["🐱", "🐶", "🐼", "🐸", "🐵"]

Aplicar cambios solo a ciertos elementos

Si bien se pueden aplicar los cambios del callback en todos los elementos de un array, también se podría aplicar los cambios a elementos que cumplan una cierta condición, en este caso, que sea mayor a 10.

const numbers = [5, 10, 23, 20, 53, 2, 5];

const results = numbers.map(function(number) {
	return number > 10 ? number * 2 : number;
});

console.log(results); // [5, 10, 46, 40, 106, 2, 5]

Para explicar mejor el código anterior, he aquí una versión sin usar operadores ternarios

const numbers = [5, 10, 23, 20, 53, 2, 5];

const results = numbers.map(function(number) {
  if(number > 10) {
    return number * 2;
  } else {
    return number;
  }
});

console.log(results); // [5, 10, 46, 40, 106, 2, 5]

Otros métodos:

filter

El método filter() crea un nuevo array a partir de uno ya existente. El nuevoarray se construirá a partir de la condición implementada por la funcióndefinida (callback). const food = [ ”🍎 Apple”, ”🍕 Pizza”, ”🌮 Taco”, ”🍌 Banana”, ”🥦 Broccoli”, ”🍓 Strawberry”,]; const fruits = …

Fili SantillánFili Santillán

reduce

El método reduce() devuelve un valor de salida único a través de una funciónreductora (callback) que se ejecuta por cada elemento en un array. const food = [ ”🥣 Cereal”, ”🍕 Pizza”, ”🌮 Taco”, ”🍎 Apple”, ”🥧 Pie”, ”🥛 Milk”,]; const poop = food.reduce(eat); console.log…

Fili SantillánFili Santillán

Recursos

• MDN Array.prototype.map()