Cómo usar mapas en JavaScript

Introducción

Desde el clásico bucle for hasta el método forEach(), existen diversas técnicas y métodos para iterar un conjunto de datos en JavaScript. Uno de los métodos más populares es el método .map(). .map() crea un array invocando una función específica en cada elemento del array padre. .map() es un método sin mutación que crea un nuevo array de JavaScript, a diferencia de los métodos con mutación, que solo modifican el array que lo invoca. Este método puede tener múltiples usos al trabajar con arrays. En este tutorial, verá cuatro usos destacados de .map() en JavaScript: invocar una función desde elementos del array, convertir cadenas en arrays, renderizar listas en bibliotecas de JavaScript y reformatear objetos de array.

Requisitos previos

Este tutorial no requiere codificación, pero si quieres seguir los ejemplos, puedes usar el REPL de Node.js o las herramientas para desarrolladores del navegador.

Cómo llamar a una función JS para cada elemento de una matriz

.map() acepta una función de devolución de llamada como uno de sus argumentos, y un parámetro importante de dicha función es el valor actual del elemento procesado por ella. Este parámetro es obligatorio. Con este parámetro, puede modificar cualquier elemento de un array y devolverlo como el miembro modificado del nuevo array.

Aquí tenéis un ejemplo:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)

Esta salida se registra en la consola:

Output
[ 4, 6, 8, 10, 70 ]

Esto se puede simplificar para que quede más limpio con lo siguiente:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

La misma salida se registra en la consola:

Output
[ 4, 6, 8, 10, 70 ]

Tener un código como sweetArray.map(makeSweeter) hace que su código sea un poco más legible.

Cómo convertir una cadena JS en una matriz

map() pertenece al prototipo del array. En este paso, lo usarás para convertir una cadena en un array. No desarrollarás un método para cadenas. En su lugar, usarás el método especial .call().

En JavaScript, todo es un objeto, y los métodos son funciones asociadas a estos objetos. Call() permite usar el texto de un objeto en otro. Por lo tanto, se puede copiar el texto de .map() en un array a una cadena.

A Call() se le pueden pasar argumentos de contexto y parámetros a los argumentos de la función principal.

Aquí tenéis un ejemplo:

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

Esta salida se registra en la consola:

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

Aquí, utilizó la función .map() en una cadena y pasó el argumento de función que .map() espera.

Esto funciona como el método split() de una cadena, excepto que cada carácter individual de la cadena se puede cambiar antes de ser devuelto en una matriz.

Cómo renderizar listas en bibliotecas de JavaScript

Las bibliotecas de JavaScript como React usan .map() para representar los elementos de una lista. Sin embargo, esto requiere sintaxis JSX, ya que el método .map() está encapsulado en sintaxis JSX.

Aquí hay un ejemplo de un componente React:

import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Este es un componente de React sin estado que renderiza un div con una lista. Los elementos individuales de la lista se renderizan usando .map() para iterar sobre un array de nombres. El componente se renderiza usando ReactDOM en el elemento DOM con el ID raíz.

Cómo reformatear objetos de matriz de JavaScript

.map() permite iterar sobre los objetos de un array, modificando el contenido de cada uno y devolviendo un nuevo array de forma similar a los arrays tradicionales. Esta modificación se basa en lo que se devuelve en la función de devolución de llamada.

Aquí tenéis un ejemplo:

const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);

Esta salida se registra en la consola:

Output
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]

Aquí, ha modificado cada objeto de la matriz mediante la notación de corchetes y puntos. Este caso de uso permite procesar o comprimir los datos recibidos antes de almacenarlos o analizarlos en una aplicación front-end.