En Javascript existen varios métodos de arrays muy útiles para realizar diversas operaciones repetitivas con los elementos del array. En este artículo vamos a explicar la función map() que nos sirve para construir un array de elementos a partir de otro array.

Para qué utilizamos map() sobre los arrays

La función map(), aunque deberíamos llamarla método porque pertenecen a los arrays que en Javascript se consideran objetos, sirve para generar arrays a partir de los valores de otro array.

Al usar map() se realiza una iteración por cada uno de los elementos de un array. Para cada iteración se ejecuta una función, que devolverá un valor. Con los valores devueltos se crea un nuevo array, que es el que devuelve el método map(). Ahora lo veremos con código y será más claro.

Este método lo puedes usar para construir un array realizando una transformación de los elementos que tenemos en otro array. Esta transformación puede ser todo lo complicada que quieras o necesites, por lo que realmente los casos de uso pueden ser tan variados como la imaginación, o la necesidad, nos lleve. En este artículo veremos varios ejemplos para que puedas entender hasta qué punto las posibilidades pueden variar.

Ejemplo sencillo de map()

Vamos a comenzar por un ejemplo sencillo con map() para ver cómo funciona.

Tenemos un array con valores numéricos y queremos construir un segundo array transformado que contenga el doble de los valores numéricos del array original. Para ello lo más cómodo es usar map().

const numeros = [2, 7, 4, 6];
const doble = numeros.map( valor => valor * 2);

Como puedes ver, numeros.map() se alimenta con una función (hemos usado una función flecha que es lo más habitual en este tipo de códigos). La función que entregamos a map() se ejecutará una vez por cada uno de los elementos del array. En cada iteración recibirá el valor del elemento actual y devolverá el valor transformado (en este caso la multiplicación por 2 del valor original).

El array resultante que tendríamos en la variable doble sería el siguiente:

[ 4, 14, 8, 12 ]

Hemos visto que en una línea de código hemos realizado muchas cosas y esta es una de las ventajas de map. Si no tuviéramos map() el código tendría que haber sido algo como esto:

const numeros = [2, 7, 4, 6];
const doble = [];
for(let i = 0; i < numeros.length; i++) {
    doble.push(numeros[i] * 2)
}

A la vista de los dos códigos anteriores, y sabiendo que son equivalentes, espero que se pueda apreciar la potencia de este método de Javascript.

Ejemplo de transformación de URLs en enlaces

Como decíamos, el método map() lo podemos usar para todo tipo de transformaciones, tan obvias o imaginativas como lo que se te pueda llegar a ocurrir.

En este segundo ejemplo vamos a partir de un array de cadenas que serán URLs y por medio de ese array de cadenas queremos producir el HTML de varios enlaces.

Comenzamos con este array de origen:

const urls = [
    'https://google.com',
    'https://intel.com',
    'https://oracle.com'
];

Ahora vamos a crear un array de enlaces HTML, gracias a map().

const enlacesHTML = urls.map((url) => `<a href="${url}">${url}</a>`);

Una vez ejecutado este método tendríamos como resultado el siguiente array:

[
  '<a href="https://google.com">https://google.com</a>',
  '<a href="https://intel.com">https://intel.com</a>',
  '<a href="https://oracle.com">https://oracle.com</a>'
]

Recibir el índice del elemento actual con map()

No lo habíamos dicho todavía, pero el método map() también puede recibir el índice del elemento actual, por si lo necesitas para alguna cosa. Para ello podemos usar un segundo parámetro que colocamos en la función entregada al método map().

Este ejemplo no es demasiado útil pero podríamos generar un array con los números del mes, a partir de un array de meses, usando el índice de cada mes.

const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
const numerosMes = meses.map((mes, index) => index + 1);

Al ejecutarse ese código el array numerosMes contendrá el siguiente conjunto de valores:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

Y por supuesto, si fuera necesario, la función que se ejecuta en cada iteración podria ser mucho más compleja, incluso requerir procesamientos que se realicen en varias líneas de código.

Solo para que sirva de ejemplo, vamos a ver ahora cómo crear un array de meses donde los meses pares aparezcan en mayúsculas.

const mesesParesEnMayusculas = meses.map((mes, index) => {
   if(index % 2 != 0) {
       return mes.toUpperCase();
   } 
   return mes;
});

El array resultante tendría este contenido:

[
  'Enero',      'FEBRERO',
  'Marzo',      'ABRIL',
  'Mayo',       'JUNIO',
  'Julio',      'AGOSTO',
  'Septiembre', 'OCTUBRE',
  'Noviembre',  'DICIEMBRE'
]

Ahora vamos a ver otro ejemplo, por hacer algo que pudiera ser más útil y a la vez un poco más sofisticado. En este caso, entre todos los meses del array queremos colocar solamente en mayúsculas el mes actual.

const mesesActualEnMayusculas = meses.map((mes, index) => {
   let numeroDeMes = new Date().getMonth();
   if(index == numeroDeMes) {
       return mes.toUpperCase();
   } 
   return mes;
});

Conclusión

Hemos aprendido a trabajar con el método map() de los arrays. Hemos visto lo potente que resulta para hacer todo tipo de transformaciones, para generar arrays a partir del contenido de otros arrays.

Numerosas herramientas y frameworks usan este método map para producir HTML a partir del contenido de arrays en sistemas de templates. Esto es algo bastante más avanzado, pero te dejo un enlace por si quieres ver map() en uso para realizar repeticiones en los templates de la librería Lit.