Ja­va­S­cri­pt .map(): todo sobre el método

El método .map() de Ja­va­S­cri­pt permite iterar a través de cada elemento en un array y ejecutar acciones es­pe­cí­fi­cas ma­n­te­nie­n­do el array original intacto.

¿Qué es Ja­va­S­cri­pt .map()?

El método .map() de Ja­va­S­cri­pt crea un nuevo array aplicando una función de de­vo­lu­ción de llamada a cada elemento del array original. Este método tra­n­s­fo­r­ma cada valor del array original guardando el resultado en un array in­de­pe­n­die­n­te. Un aspecto clave es la in­mu­ta­bi­li­dad, lo que supone que el array original no se modifica de ningún modo durante el proceso.

El método .map() suele uti­li­zar­se para tra­n­s­fo­r­mar todos los elementos de un array. Por ejemplo, puede elevar al cuadrado los elementos, formatear textos, filtrar objetos y realizar muchas otras ada­p­ta­cio­nes. Por ello, resulta útil cuando se quiere realizar una mo­di­fi­ca­ción no de­s­tru­c­ti­va de los datos. El método co­n­tri­bu­ye también a un código claro y fácil de entender.

La sintaxis de Ja­va­S­cri­pt .map()

La sintaxis del método .map() está compuesta por una llamada de función (callback function) en un array:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});

• originalArr es el array en el que se va a aplicar el método .map();
• element es el elemento actual que se procesa durante la iteración;
• index (optional) es el índice del elemento actual en el array y
• array (optional) es el array original.

Fíjate en el siguiente ejemplo:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

La función de de­vo­lu­ción de llamada que se pasa como argumento a Ja­va­S­cri­pt .map() toma cada elemento del array original number y lo eleva al cuadrado. Después, se obtiene un nuevo array, el cual consiste en los cuadrados de los elementos del array original.

Ejemplos de .map()

Con el método .map()de Ja­va­S­cri­pt se pueden realizar muchas ope­ra­cio­nes en los elementos de un array. A co­n­ti­nua­ción, te de­s­cri­bi­mos los es­ce­na­rios más ha­bi­tua­les:

Filtrar datos

Al combinar .map() con el método .filter(), se crea un array que solo contiene los valores para los que la condición dada es verdadera.

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Output: [4, 8]

En este ejemplo se crea un array numbers que contiene valores del 1 al 5. Después, se aplica el método .filter(). El criterio de filtrado determina que el número módulo 2 debe ser igual a 0, lo que es cierto para los números pares. El resultado es un nuevo array que contiene sólo los elementos di­vi­si­bles por 2. El resultado in­te­r­me­dio es, por tanto, [2, 4]. A co­n­ti­nua­ción uti­li­za­mos el método .map() sobre el array para duplicar cada elemento. El resultado final es un array cuyos elementos pueden dividirse dos veces por 2, es decir, [4, 8].

Re­n­de­ri­zar listas en librerías de Ja­va­S­cri­pt

React es una de las librerías y de los fra­me­wo­r­ks Ja­va­S­cri­pt más populares. La función .map() resulta útil para re­pre­se­n­tar listas en React, pero recuerda que React utiliza la sintaxis JSX.

import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);

En el anterior ejemplo se importan los módulos React y ReactDOM y se define un array llamado colors, el cual contiene di­fe­re­n­tes nombres de colores. La función de co­m­po­ne­n­te funcional de React, ColorsList, utiliza el método Ja­va­S­cri­pt map() para generar un elemento <li> para cada color. El atributo key permite que React pueda realizar ac­tua­li­za­cio­nes efi­cie­n­tes en el DOM sin tener que volver a re­n­de­ri­zar toda la lista. Por último, la co­m­po­ne­n­te ColorsList se renderiza en el DOM con ReactDOM.render y el resultado se añade al elemento del DOM con el ID root.

Formatear elementos en un array

El método .map() es una forma sencilla de formatear elementos como cadenas de texto según ne­ce­si­da­des es­pe­cí­fi­cas.

const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]

En este caso se combina .map() con el método toLowerCase() para convertir cada nombre en mi­nú­s­cu­las. El resultado es el nuevo array formattedNames, que contiene los nombres en mi­nú­s­cu­las. En el array original names no se produce ningún cambio.