La estructura Map en JavaScript

La estructura Map de JavaScript se usa para crear mapas de datos asociados a sus respectivas claves. Antes de su aparición se usaban objetos en su lugar, asociando cada objeto o valor con su respectiva clave.

Qué es una estructura Map

La estructura de datos Map es una estructura que ayuda a almacenar datos, permitiendo asociar valores de tipos primitivo u objetos con sus respectivas claves.  Cada par consiste en una clave única y un valor que se asocia con dicha clave. Es un tipo de estructura relativamente reciente, ya que se agregó con la versión ES6 de JavaScript, junto a otras estructuras como la estructura Set. Antes de la aparición de esta estructura, los mapas solían representarse como objetos corrientes.

A pesar de su similitud, una estructura Map difiere de un objeto en varias cosas. Mientras que en un objeto la clave solamente puede ser un número entero, una cadena o un símbolo, un mapa también acepta un objeto como clave. Además, a diferencia de los objetos, en la estructura Map se conserva el orden de los elementos. Finalmente, una estructura Map es una instancia de un objeto, pero un objeto no es una instancia de una estructura Map.

Cómo crear un mapa Map

La estructura Map dispone de su propio constructor, por lo que para crear una nueva instancia tendremos que usar la sentencia new:

const mapa = new Map();

Además, también es posible inicializar la estructura Map con pares de clave y valor cuando instancias un nuevo mapa. El constructor de la estructura Map acepta un array, que contendrá una lista de arrays formados por pares de clave y valor:

const mapa = new Map([
  ['nombre', 'Edu'],
  ['apellido', 'Lazaro'],
  ['edad', 35]
]);

Métodos de la estructura Map

A continuación vamos a ver cuáles son los métodos más utilizados de la estructura Map.

Método set

El método set permite agregar elementos a un mapa, aceptando un clave y un valor como parámetros:

const mapa = new Map();

mapa.set('nombre', 'Edu');
mapa.set('edad', 35);

Método get

El método get permite obtener un elemento de un mapa, aceptando una clave como parámetro. Si el elemento no existe en el mapa, el método get devolverá undefined:

const mapa = new Map();
mapa.set('nombre', 'Edu');
 
const nombre = mapa.get('nombre');
console.log(nombre); // Edu

console.log(mapa.get('branquias')); // undefined

Método has

El método has sirve para comprobar si un elemento está en el mapa o no, devolviendo true si está o false de lo contrario. Podrás establecer cualquier elemento como clave, incluyendo objetos o incluso el propio valor que establecemos:

const mapa = new Map();
mapa.set('nombre', 'Edu');

const existeNombre = mapa.has('nombre');
console.log(existeNombre); // true

const existeEdad = mapa.has('edad');
console.log(existeEdad); //false

Sin embargo, debes tener cuidado con las claves o índices que escoges. Por escoger, hasta podrías escoger el valor NaN, que significa «not a number»:

const mapa = new Map()
mapa.set(NaN, 'elemento')
mapa.get(NaN) // elemento

Atributo size

El atributo size devuelve el número de elementos del mapa:

const mapa = new Map();
mapa.set('nombre', 'Edu');

console.log(mapa.size):

Método delete

El método delete sirve para eliminar un elemento de un mapa. Acepta la calve del elemento que queremos eliminar como parámetro:

const mapa = new Map();

mapa.set('nombre', 'Edu');
mapa.delete('nombre');

Método clear

El método clear sirve para eliminar todos los elementos de un mapa:

const mapa = new Map();
mapa.set('nombre', 'Edu');

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

Método keys

El método keys nos permite iterar las claves de una estructura Map usando un iterador:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

for (const clave of mapa.keys()) {
  console.log(clave);
}

Método values

El método values nos permite iterar los valores de una estructura Map mediante un iterador:

const conjunto = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

for (const valor of conjunto.values()) {
  console.log(valor);
}

Método entries

El método entries nos permite iterar tanto las calves como los valores de un mapa:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);
 
for (const [clave, valor] of mapa.entries()) {
  console.log(clave, valor);
}

Método forEach

El bucle forEach es un tipo de bucle de JavaScript que se ejecuta para cada uno de los elementos del mapa:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

mapa.forEach((clave, valor) => {
  console.log(clave, valor);
});

Cómo usar la estructura Map

Veamos a continuación cómo realizar algunas de las tareas más comunes que se suelen usar con las estructuras Map:

Itera los elementos de un mapa Map

Para recorrer los elementos de un conjunto Set puedes usar un bucle for de toda la vida:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

for (const [clave, valor] of mapa) {
  console.log(clave, valor);
}

Tal y como ya hemos visto, el método forEach también es una opción:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

mapa.forEach( (clave, valor) => { console.log(clave, valor); });

También podrías recorrer sus elementos mediante un iterador, usando los métodos keys o values. O también utilizando el método entries, usando el método next del iterador para avanzar al siguiente elemento:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

const iterador = mapa.entries();

console.log(iterador.next()); // {done: false, value: ["nombre", "Edu"]}
console.log(iterador.next()); // {done: false, value: ["apellido", "Lazaro"]}
console.log(iterador.next()); // {done: false, value: ["edad", 35]} 

Convierte un mapa Map en un array

Cuando queramos convertir una estructura Map en un array tendremos que escoger entre convertir las claves del mapa o convertir sus valores.

Para convertir las claves de un mapa en un array, primero las obtendremos con el método keys y luego usaremos el operador de propagación spread ..., para asignar sus valores a un nuevo array:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

const arr = [...mapa.keys()];

Si lo que quieres es convertir los valores de un mapa en un array, primero debes obtener los valores  del mapa usando el método values. Luego debes usar el operador de propagación spread ... para asignar sus valores a un nuevo array:

const mapa = new Map([['nombre', 'Edu'], ['apellido', 'Lazaro'], ['edad', 35]]);

const arr = [...mapa.values()];

Mapas WeakMap

Un WeakMap es una estructura similar a un mapa en la que, a diferencia de las estructuras Map, los elementos pueden ser recogidos por el recolector de basura. Todas las claves de un WeakMap son objetos, por lo que en caso de perder la referencia al mismo, el recolector procederá a a eliminar dicho elemento.

Un WeakMap se crea igual que una estructura Map:

const mapa = new WeakMap();

Para agregar elementos a un WeakMap se usa también el método set:

const mapa = new WeakMap();

const clave1 = {elemento: 'valor'};
const clave2 = {elemento: 'valor'};

mapa.set(clave1, 'Edu');
mapa.set(clave2, 'Lazaro');

Para obtener un elemento siempre tendrás que pasar un objeto al método get:

console.log(mapa.get(clave1)); // 'Edu'

Existen más diferencias entre un Map y un WeakMap. No es posible iterar ni las claves, ni los valores ni los pares de clave y valor de un WeakMap. Tampoco podrás vaciarlo por completo usando el método clear ni obtener su tamaño mediante el atributo size

Con un WeakMap solamente podremos usar los métodos get, set, has y delete.

El uso de los WekMaps no está demasiado extendido, ya que su utilidad es muy limitada, siendo solamente útiles para crear sistemas de caché que no interfieran con la recolección de basura o también para encapsular ciertos elementos.

Y esto ha sido todo.

---