Descubre cómo usar WeakMap() en JavaScript

Aprende a utilizar la función de mapa débil para mejorar tu programación

WeakMap() es una función útil en JavaScript que permite almacenar pares clave-valor en un objeto. A diferencia de otros tipos de objetos, WeakMap() utiliza referencias débiles a objetos para almacenar los valores. Esto significa que si el objeto al que se hace referencia se recolecta y se elimina, también se eliminará la entrada del mapa.

La principal ventaja de usar WeakMap() es que no afecta la memoria ni el rendimiento de tus proyectos. Es especialmente útil en situaciones donde necesitas almacenar información adicional sobre un objeto sin afectar su propia referencia o su contenido.

Ejemplo 1: Guardar referencias a objetos fuertes

const objeto = { nombre: 'Juan', edad: 25 };
const weakMap = new WeakMap();
weakMap.set(objeto, 'Información adicional sobre Juan');

console.log(weakMap.get(objeto)); // 'Información adicional sobre Juan'

En este ejemplo, se utiliza WeakMap() para guardar información adicional sobre un objeto específico. La referencia al objeto se pasa a weakMap.set(), que almacena la información en el WeakMap y devuelve undefined. Luego, se puede recuperar la información utilizando weakMap.get() con la referencia al objeto original.

Ejemplo 2: Almacenamiento de objetos HTML

const elemento = document.getElementById('miElemento');
const weakMap = new WeakMap();
weakMap.set(elemento, 'Clase personalizada: mi-clase');

elemento.classList.add(...weakMap.get(elemento).split(' '));

En este ejemplo, se utiliza WeakMap() para almacenar una clase personalizada asociada a un elemento HTML específico. La referencia al objeto DOM se pasa a weakMap.set(), que almacena la clase en el WeakMap y devuelve undefined. Luego, se puede agregar la clase a la lista de clases del elemento utilizando elemento.classList.add() con weakMap.get() y split().

Ejemplo 3: Almacenamiento de configuraciones personalizadas

const objeto = { nombre: 'Juan', edad: 25 };
const weakMap = new WeakMap();
weakMap.set(objeto, { preferencias: { tema: 'claro', idioma: 'español' } });

console.log(weakMap.get(objeto).preferencias); // { tema: 'claro', idioma: 'español' }

En este ejemplo, se utiliza WeakMap() para almacenar configuraciones personalizadas asociadas a un objeto específico. La referencia al objeto se pasa a weakMap.set(), que almacena la configuración en el WeakMap y devuelve undefined. Luego, se puede recuperar la configuración utilizando weakMap.get() con la referencia al objeto original.

Ejemplo 4: Almacenamiento de datos asociados a un canvas

const canvas = document.getElementById('miCanvas');
const weakMap = new WeakMap();
weakMap.set(canvas, { ancho: 500, alto: 300 });

console.log(weakMap.get(canvas).ancho); // 500

En este ejemplo, se utiliza WeakMap() para almacenar datos asociados a un canvas específico. La referencia al objeto DOM se pasa a weakMap.set(), que almacena los datos en el WeakMap y devuelve undefined. Luego, se puede recuperar el ancho del canvas utilizando weakMap.get() con la referencia al objeto original y accediendo al atributo correspondiente.

Ejemplo 5: Almacenamiento de datos asociados a un AudioContext

const audioContext = new AudioContext();
const weakMap = new WeakMap();
weakMap.set(audioContext, { volumen: 0.5 });

console.log(weakMap.get(audioContext).volumen); // 0.5

En este ejemplo, se utiliza WeakMap() para almacenar datos asociados a un AudioContext específico. La referencia al objeto AudioContext se pasa a weakMap.set(), que almacena los datos en el WeakMap y devuelve undefined. Luego, se puede recuperar el volumen del AudioContext utilizando weakMap.get() con la referencia al objeto original y accediendo al atributo correspondiente.

Conclusión

WeakMap() es una herramienta poderosa para los desarrolladores de JavaScript. Al usarla en tus proyectos, puedes almacenar información adicional sobre objetos sin afectar la memoria ni el rendimiento. Asegúrate de entender su funcionamiento y cómo se comporta con referencias débiles para aprovechar al máximo sus beneficios.