Para que sirve el método map de array en JavaScript y cómo utilizarlo

Resumen: en este tutorial, aprenderás a usar el método map() de Array en JavaScript para transformar elementos en una matriz.

Introducción al método map() de Array en JavaScript

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.

A veces, necesitas tomar un array, transformar sus elementos e incluir los resultados en un nuevo array.

Por lo general, podemos utilizar un bucle for para iterar los elementos, transformar cada uno de ellos individualmente y enviar los resultados a un nuevo array.

Echemos un vistazo a un ejemplo.

Supongamos que tienes una matriz de números donde cada elemento representa el radio de un círculo de la siguiente manera:

let circles = [
    10, 30, 50
];

A continuación, se ilustra cómo calcular el área de cada círculo y enviar el resultado a un nuevo array.

let areas = []; // to store areas of circles
let area = 0;
for (let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);

Resultado:

Array(3) [ 314, 2827, 7853 ]

Se necesitas una gran cantidad de código para lograr esto.

A partir de ES5, los array de JavaScript proporciona el método map() que permite transformar los elementos de un array de una manera más limpia.

function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);

Resultado:

Array(3) [314, 2827, 7853]

Cómo funciona.

• Primero, defines una función que calcule el área de un círculo.
• Luego, pasas la función circleArea al método map(). El método map() llamará a la función circleArea en cada elemento de la matriz de círculos y devolverá una nueva matriz con los elementos que se han transformado.

Para acortarlo, puedes pasar en el método map() una función anónima de la siguiente manera.

let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);

Además, puedes utilizar la función de flecha en ES6 para lograr el mismo resultado con un código más limpio:

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);

Método map() de Array en JavaScript a detalle

A continuación se ilustra el método map().

arrayObject.map(callback[,contextObject]);

El método map() llama a una función callback en cada elemento de una matriz y devuelve una nueva matriz que contiene los resultados.

El método map() toma dos argumentos, el primero es obligatorio mientras que el segundo es opcional.

Similar a los otros métodos iterativos como every(),  some(),  filter(), forEach() y sort(), la función callback() tiene la siguiente forma:

function callback(currentElement,index,array){
  // ...
}

La función callback() toma tres argumentos:

• El currentElement es el elemento actual de la matriz que se está procesando.
• El index es el índice del elemento actual.
• El array es el objeto de la matriz que se está trabajando.

Se requiere el currentElement, mientras que los argumentos de index y array son opcionales.

Si pasas el contextObject al método map(), puedes hacer referencia al contextObject dentro de la función callback() usando la palabra clave this.

Es importante tener en cuenta que el método map() no cambia el array original, sino que crea un nuevo array de todos los elementos que han sido transformados por la función callback().

Más ejemplos del método map() de Array en JavaScript

El siguiente ejemplo muestra cómo transformar una matriz de números utilizando un método integrado del tipo Math como la función callback().

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);

Resultado

[4, 5, 6]

El nuevo array contiene las raíces cuadradas de los números en la matriz de números.

En este tutorial, aprendiste a usar el método map() de Array en JavaScript para transformar elementos de una matriz de acuerdo con una función proporcionada.