Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 4 minutos Intermedio
como-usar-map-en-javascript

El tipo Map en JavaScript

Un Map es una colección que nos permite almacenar pares de clave-valor, introducida en el estándar ECMAScript 6.

A diferencia de los objetos (Object) (que también almacenan pares clave-valor) los Map ofrecen varias ventajas en términos de rendimiento y funcionalidad. Estas son.

  • Claves de cualquier tipo, las claves pueden ser de cualquier tipo (no solo strings o símbolos)
  • Orden, mantienen el orden de inserción.
  • Propiedad size, que indica cuántos pares clave-valor contiene.
  • Fácilmente iterable, podemos recorrer sus elementos fácilmente.
  • Mejor rendimiento, para operaciones de inserción y eliminación.

Si quieres aprender más sobre Maps (también llamados diccionarios)
consulta el Curso de Introducción a la Programación leer más

Creación de un Map

Para crear un Map, simplemente utilizamos el constructor de la clase:

const mapa = new Map();

Aquí hemos creado un Map vacío, listo para almacenar pares clave-valor.

También podemos inicializar un Map con una colección iterable de pares clave-valor:

const mapa = new Map([
  ['clave1', 'valor1'],
  ['clave2', 'valor2'],
  [3, 'valor3']
]);

Uso básico de Map

Añadir pares clave-valor

Para añadir elementos a un Map, utilizamos el método .set():

const miMapa = new Map();

// Agregamos claves y valores
miMapa.set("clave1", "valor1");
miMapa.set(2, "valor2");
miMapa.set({ objeto: "clave" }, "valor3");

console.log(miMapa);
// Map(3) { 'clave1' => 'valor1', 2 => 'valor2', { objeto: 'clave' } => 'valor3' }

Cada llamada a .set() sobrescribe el valor si la clave ya existe.

Acceder a los valores

Para obtener el valor asociado a una clave, usamos el método .get():

console.log(miMapa.get("clave1")); // 'valor1'
console.log(miMapa.get(2)); // 'valor2'

// Usar un objeto como clave
const objetoClave = { objeto: "clave" };
miMapa.set(objetoClave, "nuevo valor");
console.log(miMapa.get(objetoClave)); // 'nuevo valor'

Verificar si una clave existe

Podemos usar el método .has() para comprobar si una clave está presente en el Map:

console.log(miMapa.has("clave1")); // true
console.log(miMapa.has("claveInexistente")); // false

Eliminar elementos

Para eliminar un elemento específico, utilizamos .delete():

miMapa.delete(2);
console.log(miMapa); // Map(2) { 'clave1' => 'valor1', { objeto: 'clave' } => 'nuevo valor' }

Para eliminar todos los elementos, usamos .clear():

miMapa.clear();
console.log(miMapa); // Map(0) {}

Recorrer un Map

Los Map ofrecen varias formas de iteración:

Usando forEach()

El método .forEach() permite recorrer todos los pares clave-valor en un Map:

miMapa.forEach((valor, clave) => {
  console.log(`Clave: ${clave}, Valor: ${valor}`);
});
// Salida:
// Clave: a, Valor: 1
// Clave: b, Valor: 2
// Clave: c, Valor: 3

Usando un bucle for...of

También podemos usar un bucle for...of con los métodos .entries(), .keys() o .values():

// Recorrer entradas
for (const [clave, valor] of miMapa.entries()) {
  console.log(`Clave: ${clave}, Valor: ${valor}`);
}

// Recorrer claves
for (const clave of miMapa.keys()) {
  console.log(`Clave: ${clave}`);
}

// Recorrer valores
for (const valor of miMapa.values()) {
  console.log(`Valor: ${valor}`);
}

Ejemplos prácticos

Convertir un array de objetos a un diccionario

Supongamos que tienes un array de objetos con id y nombre, y deseas convertirlo en un diccionario donde el id sea la clave.

const personas = [
    { id: 1, nombre: 'Alice' },
    { id: 2, nombre: 'Bob' },
    { id: 3, nombre: 'Charlie' }
];

// Convertir a un Map
const personasMap = new Map(personas.map(persona => [persona.id, persona.nombre]));

console.log(personasMap); 
// Map(3) { 1 => 'Alice', 2 => 'Bob', 3 => 'Charlie' }

// Acceder a un valor por clave
console.log(personasMap.get(2)); // Bob

Contar la cantidad de apariciones de elementos

Imaginemos que queremos contar cuántas veces aparece cada palabra en un texto:

const texto = "mapas mapas en javascript son muy útiles";
const palabras = texto.split(" ");

const contador = new Map();

palabras.forEach((palabra) => {
  const frecuencia = contador.get(palabra) ?? 0;
  contador.set(palabra, frecuencia + 1);
});

console.log(contador);
// Map(6) { 'mapas' => 2, 'en' => 1, 'javascript' => 1, 'son' => 1, 'muy' => 1, 'útiles' => 1 }

Filtrar valores únicos de un array

Puedes usar un Map para filtrar duplicados basándote en una propiedad de los objetos.

const usuarios = [
    { id: 1, nombre: 'Alice' },
    { id: 2, nombre: 'Bob' },
    { id: 3, nombre: 'Alice' }, // Nombre duplicado
    { id: 4, nombre: 'Charlie' }
];

// Usar Map para filtrar por nombre
const usuariosUnicos = Array.from(
    new Map(usuarios.map(usuario => [usuario.nombre, usuario])).values()
);

console.log(usuariosUnicos);
// [
//   { id: 1, nombre: 'Alice' },
//   { id: 2, nombre: 'Bob' },
//   { id: 4, nombre: 'Charlie' }
// ]

Combinar varios mapas en uno solo

Este ejemplo muestra cómo unir varios mapas en uno.

const map1 = new Map([
    [1, 'Alice'],
    [2, 'Bob']
]);

const map2 = new Map([
    [3, 'Charlie'],
    [4, 'Diana']
]);

// Combinar mapas
const mapaCombinado = new Map([...map1, ...map2]);

console.log(mapaCombinado);
// Map(4) { 1 => 'Alice', 2 => 'Bob', 3 => 'Charlie', 4 => 'Diana' }

En esta página