11. Map and WeakMap

ES6 introduces new set of data structures called Map and WeakMap. Now, we actually use maps in JavaScript all the time. In fact every object can be considered as a Map.

An object is made of keys (always strings) and values, whereas in Map, any value (both objects and primitive values) may be used as either a key or a value. Have a look at this piece of code:

  1. const myMap = new Map();
  3. const keyString = "a string",
  4.     keyObj = {},
  5.     keyFunc = () => {};
  7. // setting the values
  8. myMap.set(keyString, "value associated with 'a string'");
  9. myMap.set(keyObj, "value associated with keyObj");
  10. myMap.set(keyFunc, "value associated with keyFunc");
  12. myMap.size; // 3
  14. // getting the values
  15. myMap.get(keyString);    // "value associated with 'a string'"
  16. myMap.get(keyObj);       // "value associated with keyObj"
  17. myMap.get(keyFunc);      // "value associated with keyFunc"

WeakMap

A WeakMap is a Map in which the keys are weakly referenced, that doesn’t prevent its keys from being garbage-collected. That means you don’t have to worry about memory leaks.

Another thing to note here- in WeakMap as opposed to Map every key must be an object.

A WeakMap only has four methods delete(key), has(key), get(key) and set(key, value).

  1. const w = new WeakMap();
  2. w.set('a', 'b');
  3. // Uncaught TypeError: Invalid value used as weak map key
  5. const o1 = {},
  6.     o2 = () => {},
  7.     o3 = window;
  9. w.set(o1, 37);
  10. w.set(o2, "azerty");
  11. w.set(o3, undefined);
  13. w.get(o3); // undefined, because that is the set value
  15. w.has(o1); // true
  16. w.delete(o1);
  17. w.has(o1); // false