El objeto Map de Javascript fue añadido para resolver algunas de las limitaciones con las que contaba Javascript. ¡Descubre todas sus características!

Recientemente publiqué una receta “javascriptera” en la que hablaba de algunos de los usos que podemos dar al objeto Map y cuáles son sus ventajas con respecto a emplear objetos planos de Javascript.

Dado que el formato “receta” se queda corto he decidido escribir este artículo profundizando más en detalle tanto en el objeto Map de Javascript como en el objeto WeakMap, el cual tiene interesantes implicaciones a nivel de rendimiento.

¡Vamos allá!

El objeto Map

Antes de ver las diferencias de Map con los objetos planos, veamos primero la forma de crear este tipo de objetos y emplearlos.

Lo primero de todo podemos crear un Map del siguiente modo:

const map = new Map();

const initialValues = [["key1", "value1"], ["key2", "value2"]];
const map = new Map(initialValues);

• has(key) para comprobar si existe una clave.
• get(key) para recuperar el valor de una clave.
• set(key, value) para añadir una nueva clave con su valor correspondiente o sobrescribir un valor ya existente.

const map = new Map([['foo', 1], ['bar', 2]]);
console.log(map.keys()); // MapIterator {"foo", "bar"}

[...map.keys()];

Y hablando de iteración, los objetos Map nos permiten iterar directamente sobre ellos bien empleando su método forEach :

map.forEach((key, value) => { /* do something */ });

for ([key, value] of map2) { 
  console.log(`${key} ${value}`); 
}

Ahora que ya conocemos el objeto Map cabe preguntarse en qué momentos tiene sentido emplearlo en vez de los objetos planos que proporciona el lenguaje.

La primera y más es importante es la posibilidad de usar más tipos de valores para definir claves. En Javascript, cuando empleamos objetos las claves que identifican a sus propiedades tienen que ser bien strings o Symbol . En el momento en que tratemos de usar otro tipo de valores, Javascript tratará de convertirlos directamente a string:

const a = {};
const b = {[a]: 'foo'};
console.log(b); // {[object Object]: "foo"}

const a = {};
const b = true;
const fn = () => {};
const map = new Map();
map.set(a, 'foo');
map.set(b, 'bar');
map.set(fn, 'zeta');
console.log(map.get(a)); // 'foo'
console.log(map.get(b)); // 'bar'
console.log(map.get(fn)); // 'zeta'

const map = new Map([['foo', 1], ['bar', 2]]);
console.log(map.size); // 2

Finalmente, y en lo que se refiere a rendimiento, la documentación de MDN propone emplear objetos Map en vez de objetos planos cuando necesitamos realizar numerosas inserciones y borrados de claves.

El objeto WeakMap

Ahora que ya conocemos el objeto Map , creo que es muy interesante mencionar su versión “Weak”, es decir, un tipo de Map que establece un enlace débil con las claves empleadas de modo que pueden ser recolectadas por el “garbage collector” cuando no existen más referencias a ellas.

♻️ ¿Garbage collector?

Javascript cuenta con un mecanismo por el cual aquellos objetos que hayamos declarado pero que tras un cierto tiempo ya no se usan en ninguna parte de nuestra aplicación (es decir, no existe ninguna referencia a ellos) , son eliminados de la memoria. Esto ayuda a controlar que no colapsemos la memoria del dispositivo que ejecuta el programa.

Características de los WeakMaps

Un objeto WeakMap sólo puede tener objetos como claves (de modo que tenga sentido permitir que el “garbage collector” los pueda eliminar algo que no puede suceder con valores primitivos como “strings” o “numbers”).

Que tengamos que usar objetos como claves para un WeakMap tiene otra implicación: es necesario que todavía poseamos una referencia a ese objeto para poder acceder a su valor dentro del WeakMap:

const a = {};
const weakMap = new WeakMap();
weakMap.set(a, 'foo');
// if we loose a, we loose the abject to 'foo'

• No tiene acceso a la propiedad size a diferencia de lo que sucedía con Map .
• No son iterables ni podemos obtener una lista de sus claves.

Con las “limitaciones” mencionadas anteriormente, ¿cuándo tiene sentido usar un WeakMap ? Veamos algunos casos interesantes.

1️⃣ Puesto que un valor en un WeakMap sólo existirá en tanto en cuanto el objeto que actúa como clave existe, podemos emplear un WeakMap para almacenar características extra de un objeto sin vernos obligados a modificarlo:

const person = {name: 'Gerardo'};
const weakMap = new WeakMap();
weakMap.set(person, 'some interesting property of person';

function calculateShipping(item) {
  /* some expensive operations */
}
const itemInCart = {...};
const map = new WeakMap();
map.set(itemInCart, calculateShipping(itemInCart));

Como veis, tanto los Map como los WeakMap nos pueden resultar muy útiles para determinados casos. Por eso siempre os animo a no quedaros en la superficie de un lenguaje (en este caso Javascript) sino que profundicéis en todas las características que ofrece ya que pueden resultar muy muy útiles para resolver problemas que nos costaría mucho tiempo resolver si no contáramos con estas herramientas.

Apóyame en Patreon

Gracias a: Ktron, Joseba, Alex y Jorge.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: