What is the difference between WeakSet, WeakMap and Set, Map?

WeakSet and WeakMap are collection types in JavaScript, similar to Set and Map, but they have important distinctions. Below are the key differences between WeakSet/WeakMap and Set/Map:

Difference between WeakSet and Set:

1. Weak References:

   • WeakSet: Only contains weak references to objects. This means that if no other references point to the object, it can be garbage collected.
   • Set: Can contain strong references to any values, including primitives or object references. As long as the Set exists, its elements will not be garbage collected.

2. Element Type Restrictions:

   • WeakSet: Only stores objects; it cannot store primitive data types (e.g., strings, numbers, booleans).
   • Set: Can store any type of value, whether primitive or object.

3. Iterability:

   • WeakSet: Not iterable; it lacks a size property and has no method to clear the collection.
   • Set: Iterable; it has a size property to retrieve the collection size and provides a clear method to empty the collection.

4. Use Cases:

   • WeakSet: Ideal for storing collections of objects with no other references, often used to manage object lifecycles and prevent memory leaks.
   • Set: Suitable for scenarios requiring unique values, especially when iteration or size retrieval is needed.

Difference between WeakMap and Map:

1. Weak References for Keys:

   • WeakMap: Only accepts objects as keys, and these keys are weak references. If no other references point to the key object, the key-value pair can be garbage collected.
   • Map: Can accept any type of value as keys, including primitives and objects, and these keys are strong references.

2. Key Type Restrictions:

   • WeakMap: Keys must be objects; they cannot be primitive data types.
   • Map: Keys can be any type of value, including primitives and objects.

3. Iterability:

   • WeakMap: Similarly not iterable; it has no size property and cannot clear the entire collection.
   • Map: Iterable; it has a size property and provides a clear method.

4. Use Cases:

   • WeakMap: Often used for caching or storing associations between objects and data without interfering with object garbage collection.
   • Map: Suitable for scenarios requiring explicit key-value mapping, where keys need to be enumerated, size counted, or the mapping cleared.

Example:

Suppose we are developing an application that needs to track whether a set of DOM elements has been clicked. We can use WeakSet to store these DOM elements, as follows:

javascript
let clickedElements = new WeakSet();

document.addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    clickedElements.add(event.target);
    // ...perform some operations...
  }
});

// Due to WeakSet's properties, when DOM elements are removed and no other references exist, they are automatically removed from the WeakSet, preventing memory leaks.

In this example, using Set instead of WeakSet would retain DOM elements in the collection even after they are removed from the DOM, potentially causing memory leaks.