April 25, 2023

What is the Difference Between Map and WeakMap in Javascript

By Krishnaa JavaScript Questions 0 Comments

In Javascript, both Map and WeakMap are key-value data structures that allow you to store and retrieve data efficiently. However, there are some important differences between them that you should be aware of. In this tutorial, we’ll explain the difference between Map and WeakMap in Javascript.

Map in Javascript

A Map is an object that allows you to store key-value pairs where both keys and values can be of any type. The keys can be primitive values, objects or functions. It maintains the insertion order of the elements, and allows you to iterate over the keys and values in the order they were inserted.

Here’s an example of how to use a Map in Javascript:

const myMap = new Map();
const key1 = "hello";
const key2 = {};
const key3 = function() {};

myMap.set(key1, "world");
myMap.set(key2, 123);
myMap.set(key3, true);

console.log(myMap.get(key1)); // "world"
console.log(myMap.get(key2)); // 123
console.log(myMap.get(key3)); // true

console.log(myMap.size); // 3

WeakMap in Javascript

A WeakMap is similar to a Map, but with a few key differences. Like a Map, it also allows you to store key-value pairs. However, the keys must be objects, and the values can be of any type. It does not maintain the insertion order of the elements, and you cannot iterate over the keys or values.

The biggest difference between Map and WeakMap is that in a WeakMap, the keys are weakly referenced. This means that if the only remaining reference to a key is from the WeakMap, the key will be garbage collected. This makes WeakMap useful for scenarios where you need to associate some data with an object without affecting the lifetime of the object.

Here’s an example of how to use a WeakMap in Javascript:

const myWeakMap = new WeakMap();
const key1 = {};
const key2 = {};
const key3 = {};

myWeakMap.set(key1, "hello");
myWeakMap.set(key2, 123);

console.log(myWeakMap.get(key1)); // "hello"
console.log(myWeakMap.get(key2)); // 123

key1 = null; // remove the reference to the key object
// the key-value pair will be removed automatically

In the example above, we’ve created a WeakMap and added two key-value pairs. We then remove the reference to the first key object by setting it to null, and since there are no other references to this object, it will be garbage collected. As a result, the key-value pair associated with this key will be automatically removed from the WeakMap.

In summary, Map and WeakMap are both key-value data structures in Javascript, but they have some important differences. Map allows you to store key-value pairs where both keys and values can be of any type, and the keys are strongly referenced. WeakMap allows you to store key-value pairs where the keys must be objects, and the keys are weakly referenced. WeakMap is useful in scenarios where you need to associate some data with an object without affecting the lifetime of the object.

Map in Javascript

WeakMap in Javascript

You May Also Like: