Map y Set en JavaScript

Unos días antes de escribir este artículo me hicieron la siguiente pregunta en una entrevista:

¿Sabes qué es un Map y un Set y las diferencias con Object y Array?

Sinceramente, no supe responder y me dio rabia porque sentí que debía saberlo y que quizás me estaba perdiendo un tipo no primitivo que me pudiese ser útil en ciertas casuísticas 😣.

Es por esto por lo que hago este artículo, para que a nadie le pase como a mí, y además para yo aclarar mis conceptos sobre el tema.

Antes de empezar con estos dos tipos que aparecieron en el ES2015, repasemos brevemente los 7 tipos de datos primitivos en JavaScript: string, number, bigint, boolean, undefined, symbol, y null (este último con un poco de controversia).

Map

Un Map es simplemente un par clave-valor parecido a un Object en JavaScript. Las claves de un Map pueden tener cualquier valor (incluidas funciones, objetos o cualquier primitiva). Veamos algunos ejemplos de uso de con Map.

Diferencias con Object

Las principales diferencias con respecto a Object son:

• Map tiene mejor performance concretamente para añadir y eliminar elementos.
• Al declarar una variable con un Object vacío este realmente no está vacío ya que tiene Prototype, es decir, hay claves por defecto en tu objeto que pueden entrar en conflicto con tus claves. Esto en Map no sucede porque al inicializarse carece de propiedades.
• Se respeta el orden en el que se añaden las keys al Map.
• Para calcular el número de propiedades podemos utilizar un método explícito (size) en lugar de utilizar el método length()en los arrays generados con Object.entries() / Object.values() / Object.keys().

Set

El objeto Set permite almacenar valores únicos de cualquier tipo, ya sean valores primitivos o referencias a objetos.

Diferencias con Array

La principales diferencias entre una Array y un Set son:

• Los Arrays pueden tener valores duplicados, mientras que los Sets no.
• Los datos en un Array están ordenados por índice, mientras que los Sets usan claves y los elementos son iterables en el orden en el que se añadieron.
• Dado que Set se basa en claves, no podemos acceder a elementos usando un índice como lo hacemos con un Array.

Conclusión

Debemos saber cuándo es el mejor momento para usar Map frente a Object, o Setfrente a Array, ya que en la mayoría de casos los tipos Array y Object son más que suficiente, es por eso que hay que tener claro la diferencia entre los tipos.

Si te preguntan igual que a mi, ¡seguro que ya sabrás responder! 😀😀

Bibliografía

Midudev explicando el tipo Map: https://www.youtube.com/watch?v=-HjvUAP2Zvg

Map - JavaScript | MDN

Set - JavaScript | MDN

JavaScript: Arrays vs Sets