W3docs

JavaScript Map y Set

Aprende sobre Map y Set en JavaScript: estructuras de datos que amplían las capacidades del lenguaje y simplifican tareas comunes.

Este capítulo cubre dos colecciones con clave introducidas en JavaScript moderno: Map (pares clave-valor) y Set (valores únicos). Aprenderás qué hacen, cuándo elegirlos en lugar de objetos simples y arrays, cómo iterarlos y los patrones que usarás en el día a día, como eliminar duplicados de un array o construir un contador de frecuencias.

JavaScript Map

Un Map es una colección de pares clave-valor, similar a un object simple, pero con diferencias importantes que lo convierten en la mejor opción en muchas situaciones.

Map vs. object simple: cuándo usar un Map

Elige un Map sobre un object simple cuando:

  • Las claves no son strings. Las claves de un object siempre se convierten en strings (o símbolos). Un Map te permite usar cualquier valor como clave: objetos, funciones, números, incluso NaN.
  • Agregas y eliminas entradas con frecuencia. Los Maps están optimizados para inserciones y eliminaciones frecuentes, y map.size devuelve el recuento directamente (los objetos necesitan Object.keys(obj).length).
  • Necesitas un orden de iteración garantizado. Un Map siempre itera en el orden de inserción.
  • Quieres evitar colisiones con el prototipo. Un object simple hereda claves como toString y constructor; un Map no tiene esas claves integradas, por lo que las claves proporcionadas por el usuario nunca pueden colisionar con ellas.

Usa un object simple cuando los datos tienen una forma fija y conocida (un registro), o cuando necesitas serialización JSON — JSON.stringify funciona con objetos pero no con Maps.

Crear y manipular Maps

Para crear un Map, usa new Map(). Admite estos métodos y propiedades:

  • map.set(key, value): Agrega o actualiza un par clave-valor. Devuelve el Map, por lo que las llamadas se pueden encadenar.
  • map.get(key): Obtiene el valor de una clave (undefined si no existe).
  • map.has(key): Devuelve true si la clave existe.
  • map.delete(key): Elimina un par clave-valor.
  • map.clear(): Elimina todo.
  • map.size: El número de pares clave-valor.

Como set() devuelve el Map, puedes encadenar llamadas:

javascript— editable

Usar cualquier valor como clave

A diferencia de los objetos, un Map conserva las claves tal como son. El número 1 y el string "1" son claves diferentes, y los objetos o funciones pueden ser claves (comparados por referencia):

javascript— editable

Iterar sobre un Map

Un Map itera en orden de inserción y ofrece tres métodos iteradores más forEach:

  • map.keys() — un iterable de claves.
  • map.values() — un iterable de valores.
  • map.entries() — un iterable de pares [key, value] (este es el valor predeterminado, por lo que for...of map funciona directamente).
  • map.forEach((value, key) => ...) — ejecuta un callback para cada entrada.
javascript— editable

Convertir entre Map y object

Un Map puede construirse a partir de las entradas de un object y convertirse de vuelta en uno:

javascript— editable

JavaScript Set

Un Set es una colección de valores únicos — cada valor solo puede aparecer una vez. Está estrechamente relacionado con un array, pero sin duplicados y sin acceso por índice.

Set vs. array: cuándo usar un Set

Elige un Set sobre un array cuando:

  • La unicidad importa. Un Set rechaza automáticamente los duplicados, por lo que nunca necesitas verificar antes de agregar.
  • Compruebas la pertenencia con frecuencia. set.has(value) es rápido y se lee con claridad, mientras que array.includes(value) recorre todo el array cada vez.

Usa un array cuando necesites acceso por índice, duplicados o métodos de array como map/filter/reduce. (Siempre puedes convertir entre los dos.)

Trabajar con Sets

  • new Set(iterable): Crea un Set, opcionalmente desde un array o cualquier iterable.
  • set.add(value): Agrega un valor (devuelve el Set, por lo que las llamadas se encadenan). Los duplicados se ignoran.
  • set.has(value): Devuelve true si el valor está presente.
  • set.delete(value): Elimina un valor.
  • set.size: El número de valores.
  • set.clear(): Elimina todo.
javascript— editable

Eliminar duplicados de un array (el uso #1)

La razón más común para usar un Set es eliminar duplicados de un array. Convierte el Set de vuelta en un array con [...new Set(arr)]:

javascript— editable

Iterar sobre un Set

Los Sets iteran en orden de inserción y admiten for...of y forEach:

javascript— editable

Unión, intersección y diferencia

Los Sets facilitan las operaciones clásicas de conjuntos. Los motores modernos también proporcionan métodos integrados set.union(), set.intersection() y set.difference(), pero aquí está el enfoque portable usando arrays:

javascript— editable

Un escenario real: contador de frecuencia de palabras

Este ejemplo muestra por qué un Map suele ser mejor que un object simple. Contamos cuántas veces aparece cada palabra en una oración. Con un Map, las claves permanecen como valores de string reales, size es inmediato y no hay riesgo de que una palabra colisione con el nombre de una propiedad heredada:

javascript— editable
Información

Tanto Map como Set son iterables, por lo que funcionan con for...of, el operador spread (...) y la desestructuración. Además, JavaScript proporciona WeakMap y WeakSet, que permiten que sus claves sean recolectadas por el recolector de basura. Aprende más en nuestra página de JavaScript WeakMap y WeakSet.

Hoja de referencia de métodos

Map

OperaciónCódigo
Crearnew Map() o new Map(Object.entries(obj))
Agregar / actualizarmap.set(key, value) (encadenable)
Leermap.get(key)
Verificarmap.has(key)
Eliminarmap.delete(key)
Contarmap.size
Iterarfor (let [k, v] of map), map.keys(), map.values(), map.entries(), map.forEach()
A objectObject.fromEntries(map)

Set

OperaciónCódigo
Crearnew Set() o new Set(array)
Agregarset.add(value) (encadenable, ignora duplicados)
Verificarset.has(value)
Eliminarset.delete(value)
Contarset.size
Iterarfor (let v of set), set.forEach()
Deduplicar array[...new Set(array)]

Regla general: usa un Map cuando necesites datos con clave que tengan claves no string, actualizaciones frecuentes u orden garantizado; usa un Set cuando necesites una colección de valores únicos con comprobaciones de pertenencia rápidas. Para todo lo demás, los objects y arrays simples siguen siendo las herramientas adecuadas.

Práctica

Práctica
¿Cuáles son algunas propiedades de JavaScript Map y Set?
¿Cuáles son algunas propiedades de JavaScript Map y Set?
Was this page helpful?