Ervin Santos
Ervin Santos
Full Stack Web Developer Freelancer
Ervin Santos

Blog

Objeto Map en JavaScript

Objeto Map en JavaScript

El objeto Map es una de las nuevas incorporaciones a la versión de Javascript ES6.

Se caracteriza porque almacena pares clave-valor y que cualquier valor puede ser utilizado tanto como clave o valor.

En los Map se incluyen elementos tanto de Object (un grupo único de pares clave-valor) como de Array (un grupo ordenado), pero conceptualmente son más parecidos a los Object. Esto se debe a que, si bien el tamaño y el orden de las entradas se mantiene como en un Array, las propias entradas son pares clave-valor como los Object.

Su sintaxis es similar a la de otros objetos de Javascript: tenemos que utilizar la palabra reservada new y a continuación, entre paréntesis, un iterable:

const map = new Map()

console.log(map); // => Un map vacío Map(0){}

En primer lugar, la propiedad más importante:

  • size: permite conocer el tamaño del Map.

Y además, veremos el funcionamiento de una serie de métodos:

  • get(clave): devuelve el valor asociado a una clave, o undefined si no tiene ninguno.
  • set (clave, valor): establece un valor para una clave.
  • has(clave): devuelve true o false si existe un valor asociado a la clave en el Map.
  • delete(clave): elimina los valores asociados a una clave pasada por parámetro.
  • clear: elimina todos los elementos del objeto Map.

Los tres iteradores propios de Map:

  • values: iterador con los valores para cada elemento de Map en orden de inserción.
  • keys: iterador con las claves para cada elemento de Map en orden de inserción.
  • entries: iterador con los pares clave-valor para cada elemento de Map en orden de inserción.

Y por si fuera poco, conoceremos WeakMap, una variante de Map con algunas pequeñas diferencias.

 

Añadir valores a un Map

Puede añadir valores a un Map con el método set(). En el primer argumento se representará la clave y en el segundo el valor.

A continuación, se añaden tres pares clave-valor a Map:

const map = new Map()

map.set('firstName', 'Luke')
map.set('lastName', 'Skywalker')
map.set('occupation', 'Jedi Knight')

console.log(map);

//  Output
// Map(3)
// 0: {"firstName" => "Luke"}
// 1: {"lastName" => "Skywalker"}
// 2: {"occupation" => "Jedi Knight"}

Aquí, empezamos a ver cómo en los Map se encuentran elementos tanto de Object como de Array. Como en el caso de un Array, tenemos un grupo con índice cero y también podemos ver la cantidad de elementos disponibles por defecto en el Map. En los Map se utiliza la sintaxis => para indicar los pares clave-valor como key => value:

Este ejemplo se parece a un objeto normal con claves basadas en cadenas, pero con los Map podemos usar cualquier tipo de datos como clave.

Además de establecer los valores manualmente en un Map, también podemos inicializarlo con estos ya incluidos. Esto se hace utilizando un Array de Array, con dos elementos que son cada uno pares clave-valor.

Usando la siguiente sintaxis, podemos volver a crear el mismo Map ya inicializado:

const map = new Map([
  ['firstName', 'Luke'],
  ['lastName', 'Skywalker'],
  ['occupation', 'Jedi Knight'],
])

 

Cuando utilizar un Map

En resumen, los Map son similares a los Object en el sentido de que almacenan pares clave-valor, pero tienen varias ventajas respecto de ellos:

  • Tamaño: los Map tienen una propiedad size, mientras que los Object no cuentan con una forma ya integrada de obtener su tamaño.
  • Iteración: los Map son directamente iterables, mientras que los Objects no.
  • Flexibilidad: los Map pueden tener cualquier tipo de datos (primitivo u Object) como clave para un valor, mientras que los Object solo pueden tener cadenas.
  • Ordenado: los Map retienen el orden de inserción, mientras que los objetos no tienen un orden garantizado.

Debido a estos factores, los Map son una poderosa estructura de datos que se debe tener en cuenta. Sin embargo, los Object también ofrecen ventajas importantes:

  • JSON: los Object funcionan sin problema con JSON.parse() y JSON.stringify(), dos funciones esenciales para trabajar con JSON, un formato de datos común que utilizan muchas API REST.
  • Funcionamiento con un solo elemento: si trabaja con un valor conocido en un Object, puede acceder a él de forma directa con la clave sin necesidad de usar un método, como el get() de Map.

Esta lista le servirá de ayuda para decidir si un Map u Object es la estructura de datos correcta para su caso de uso.

Agregar comentario