Memory-Efficient Metadata with WeakMap

Snippet

Memory-Efficient Metadata with WeakMap

WeakMap allows associating private metadata with DOM nodes without preventing garbage collection. Unlike a standard Map, if the DOM node is removed and no other references exist, the metadata is automatically cleaned up, which is vital for preventing leaks in dynamic UIs.

snippet.js
javascript
const nodeMetadata = new WeakMap();
 
export function enhancedAction(node, params) {
  nodeMetadata.set(node, { 
    initialWidth: node.offsetWidth, 
    observer: new ResizeObserver(() => handle(node))
  });
 
  return {
    destroy() {
      nodeMetadata.get(node).observer.disconnect();
      nodeMetadata.delete(node);
    }
  };
}

svelte

Breakdown

const nodeMetadata = new WeakMap();

Creates a weak-reference collection where keys (DOM nodes) can be garbage collected.

nodeMetadata.set(node, { ... });

Stores complex objects linked to the node without modifying the node object itself directly.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Memory-Efficient Metadata with WeakMap

Related