Objeto Map en JavaScript: introducción, métodos y ejemplos

Map es un constructor que ofrece una forma más cómoda y más eficiente de estructurar y consultar datos en ciertos casos de uso. 

En tres puntos, esto es lo que hace un objeto Map:

• Map guarda pares clave-valor donde las claves pueden ser de cualquier tipo de dato.

• Map recuerda el orden de inserción original de las claves.

• Map tiene una propiedad que representa su tamaño.

Métodos útiles del objeto Map de JavaScript

• clear() – elimina todos los elementos del objeto map.
•  delete(key) – elimina el elemento indicado por la clave. Devuelve true si el elemento estaba en el objeto Map, y false si no.
•  entries() – devuelve un nuevo objeto Iterator que contiene un array [key, value] por cada elemento del objeto map. El orden es el mismo que el de inserción.
•  forEach(callback[, thisArg]) – ejecuta un callback por cada par clave-valor del Map, en orden de inserción. El parámetro opcional thisArg define el valor de this en cada callback.
•  get(key) – devuelve el valor asociado a la clave. Si la clave no existe, devuelve undefined.
•  has(key) – devuelve true si existe un valor asociado a la clave, y false en caso contrario.
•  keys() –  devuelve un nuevo Iterator con las claves de los elementos, en orden de inserción.
•  set(key, value) – define el valor de la clave en el objeto map. Devuelve el propio objeto map, así que puedes encadenar este método con otros.
•  values() devuelve un nuevo objeto iterador con los valores de cada elemento, en orden de inserción.

Ejemplos de uso del objeto Map de JavaScript

Crear un nuevo objeto Map

Supongamos que tienes una lista de objetos de usuario como esta:

let pierre = {name: 'Pierre Lepez'},
    jean = {name: 'Jean Doe'},
    kevin = {name: 'Kévin Gomez'};

Y que necesitas crear un objeto Map con los usuarios y sus roles. En ese caso, el código es el siguiente:

let userRoles = new Map();

userRoles es una instancia del objeto Map y su tipo es un objeto, como muestra este ejemplo:

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true

Añadir elementos a un Map

Para asignar un rol a un usuario se usa el método set():

userRoles.set(kevin, 'admin');

El método set() asocia el usuario john al rol de administrador. Como set() es encadenable, puedes ahorrarte unas cuantas pulsaciones tal y como se ve aquí:

userRoles.set(pierre, 'éditeur')
          .set(jean, 'abonné');

Inicializar un objeto Map con un iterable

Como decíamos antes, puedes pasar un objeto iterable al constructor Map():

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

Obtener un elemento por clave

Si quieres ver los roles de Kévin, usa el método get():

userRoles.get(kevin); // admin

Si pasas una clave que no existe, el método get() devuelve undefined.

let foo = {name: 'Foo'};
userRoles.get(foo); //undefined

Comprobar si existe un elemento por su clave

Para saber si una clave existe en nuestro objeto Map, se usa el método has().

userRoles.has(foo); // false
userRoles.has(pierre); // true

Saber cuántos elementos contiene el objeto Map

La propiedad size devuelve el número de entradas del objeto Map.

console.log(userRoles.size); // 3

Recorrer las claves del objeto Map

Para obtener las claves de un objeto Map se usa el método keys(). El método keys() devuelve un nuevo objeto iterador con las claves de los elementos.

El siguiente ejemplo muestra el nombre de los usuarios del objeto map userRoles.

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

for (const user of userRoles.keys()) {
  console.log(user.name);
}

Salida:

Kévin Feige
Pierre Rocher
Jean Moulin

Recorrer los valores del objeto Map

De la misma forma, puedes usar el método values() para obtener un iterador con los valores de todos los elementos de tu objeto Map:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

for (const role of userRoles.values()) {
  console.log(role);
}

Salida:

admin
éditeur
abonné

Recorrer los elementos del objeto Map

Además, el método entries() devuelve un iterador que contiene un array [key,value] por cada elemento del objeto Map:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

for (const role of userRoles.entries()) {
  console.log(`${role[0].name}: ${role[1]}`);
}

Para que la iteración quede más natural, puedes usar la desestructuración:

let kevin = { name: 'Kévin Feige' },
  pierre = { name: 'Pierre Rocher' },
  jean = { name: 'Jean Moulin' };

let userRoles = new Map([
    [kevin, 'admin'],
    [pierre, 'éditeur'],
    [jean, 'abonné']
]);

userRoles.forEach((role, user) => console.log(`${user.name}: ${role}`));

Aparte del bucle for…of, también tienes el método forEach() del objeto map:

Convertir las claves o los valores del Map en un array

A veces te interesa trabajar con un array en lugar de con un iterable, en ese caso puedes recurrir al operador de propagación (spread operator).

El siguiente ejemplo convierte las claves de cada elemento en un array de claves:

var keys = [...userRoles.keys()];
console.log(keys);

Salida:

[ { name: 'Kévin Feige' },
  { name: 'Pierre Rocher' },
  { name: 'Jean Moulin' } ]

Y este otro convierte los valores de los elementos en un array:

let roles = [...userRoles.values()];
console.log(roles);

Salida:

[ 'admin', 'éditeur', 'abonné' ]

Eliminar un elemento por su clave

Para borrar una entrada del objeto Map se usa el método delete().

userRoles.delete(pierre);

Eliminar todos los elementos de un objeto Map

Para borrar todas las entradas del objeto Map se usa el método clear():

userRoles.clear();
console.log(userRoles.size); // 0

WeakMap

Un WeakMap se parece a un Map, salvo que las claves de un WeakMap tienen que ser objetos. Eso significa que, cuando la referencia a una clave (un objeto) queda fuera de alcance, el valor correspondiente se libera automáticamente de la memoria.

Un WeakMap solo dispone de un subconjunto de los métodos de un objeto Map:

• get(key)
• set(key, value)
• has(key)
• delete(key)

Estas son las diferencias principales entre un Map y un WeakMap:

• Los elementos de un WeakMap no se pueden recorrer.
• No se pueden borrar todos los elementos de golpe.
• No se puede consultar el tamaño de un WeakMap.

En este tutorial has aprendido a trabajar con el objeto Map de JavaScript y con sus métodos para manipular las entradas del objeto Map.