JavaScript .map(): todo sobre el método

El método .map() de JavaScript permite iterar a través de cada elemento en un array y ejecutar acciones específicas manteniendo el array original intacto.

¿Qué es JavaScript .map()?

El método .map() de JavaScript crea un nuevo array aplicando una función de devolución de llamada a cada elemento del array original. Este método transforma cada valor del array original guardando el resultado en un array independiente. Un aspecto clave es la inmutabilidad, lo que supone que el array original no se modifica de ningún modo durante el proceso.

El método .map() suele utilizarse para transformar todos los elementos de un array. Por ejemplo, puede elevar al cuadrado los elementos, formatear textos, filtrar objetos y realizar muchas otras adaptaciones. Por ello, resulta útil cuando se quiere realizar una modificación no destructiva de los datos. El método contribuye también a un código claro y fácil de entender.

La sintaxis de JavaScript .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 devolución de llamada que se pasa como argumento a JavaScript .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 JavaScript se pueden realizar muchas operaciones en los elementos de un array. A continuación, te describimos los escenarios más habituales:

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 divisibles por 2. El resultado intermedio es, por tanto, [2, 4]. A continuación utilizamos 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].

Renderizar listas en librerías de JavaScript

React es una de las librerías y de los frameworks JavaScript más populares. La función .map() resulta útil para representar 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 diferentes nombres de colores. La función de componente funcional de React, ColorsList, utiliza el método JavaScript map() para generar un elemento <li> para cada color. El atributo key permite que React pueda realizar actualizaciones eficientes en el DOM sin tener que volver a renderizar toda la lista. Por último, la componente 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 necesidades específicas.

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 minúsculas. El resultado es el nuevo array formattedNames, que contiene los nombres en minúsculas. En el array original names no se produce ningún cambio.