Cómo usar .map() en JavaScript

JavaScript admite varios métodos para iterar sobre arrays. Los desarrolladores suelen usar el bucle for tradicional y el método menos común .forEach(). Sin embargo, el método más popular es .map(). Este método crea un nuevo array llamando a una función en cada elemento del array original. Evita mutaciones y genera arrays verdaderamente “limpios”.

Esto es diferente de los métodos basados en mutación, que inevitablemente modifican el array original de alguna manera. En este artículo, exploraremos cuatro formas de usar .map() en JavaScript (aunque existen muchas más).

Método 1: Llamar funciones en elementos individuales del array

Cuando se usa .map() en JavaScript, la función de callback se trata como un argumento. El valor del elemento del array en el momento de la ejecución se convierte en un parámetro obligatorio de esta función. Puedes usarlo para modificar valores o crear funciones.

Ejemplo:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Salida:

[12, 14, 22, 26, 40]

Puedes simplificar y hacer el código más limpio:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Salida:

[12, 14, 22, 26, 40]

Usar sweetArray.map(makeSweeter) hace que el código sea más legible en comparación con la primera versión.

Método 2: Convertir cadenas en arrays

Puedes usar el método .map() del prototipo de Array para convertir cadenas. En lugar de trabajar directamente con arrays, usamos .call() para aplicar .map() a una cadena. Ten en cuenta que en JavaScript, las cadenas pueden tratarse como arrays de caracteres, lo que permite acceder a algunos métodos de array.

Ejemplo:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Salida:

["He", "oe", "se", "te", "me", "ae", "ne"]

En este ejemplo, .map() se utiliza para transformar cada carácter de la cadena añadiendo una “e”. Esto funciona de manera similar a .split() y otros métodos que operan sobre los caracteres de una cadena antes de transformarlos nuevamente en un array.

Método 3: Renderizar listas en bibliotecas de JavaScript

Este caso de uso es común en frameworks de JavaScript como React. Aquí necesitarás la sintaxis JSX, ya que .map() se utiliza dentro de ella. Por ejemplo:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

En este ejemplo, el componente de React renderiza un <div> que contiene una lista. El método .map() de JavaScript se utiliza para iterar sobre el array de nombres y generar elementos de lista individuales. El renderizado se realiza mediante ReactDOM.render en un elemento del DOM con el ID root.

Método 4: Transformar formatos de objetos de un array

Otro uso de .map() en JavaScript es transformar cada objeto de un array y devolver un nuevo array con los objetos modificados. Esto funciona de forma similar al procesamiento de datos tradicional.

Ejemplo:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Salida:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

En este ejemplo, cada objeto del array se modifica utilizando notación de corchetes y asignaciones de propiedades de objeto. Este enfoque es útil para transformar y condensar datos antes de usarlos en aplicaciones del lado del cliente.

Conclusión

Revisamos cuatro formas principales de usar el método .map() en JavaScript. Puedes ampliar sus capacidades combinándolo con otros métodos. Para más información detallada, consulta la documentación oficial.