Map, Set, WeakMap and WeakSet in Javascript

JavaScript collections have been quite limited but this has been remedied with ES6. Most of us didn’t see or used these new data structures yet. Till now, we’ve used only array and object. But that’s not enough for real life. That’s why Map, Set, WeakMap and WeakSet also exist.

Map

Map is a collection of keyed data items like a object.(is also an object like almost everything else in Javascript)
The Map holds key-value pairs. Remembers the original insertion order and any value (objects or primitive values) may be used a key or a value.

So why we should use Map?

While codding Javascript, we can already use objects in a simple way, but what is this Map? What benefit does it provide?

First of all, Objects have some problems. It doesn’t have its own Set and Get Functions. If we are going to use a value we have to type check. Because the value can be undefined.We even need to write a function to get the size of object also we don’t have to use String/Symbol as key value in Maps also brings different usage scenarios. Performance is also an important factor. Performs better in scenarios involving frequent additions and removals of key-value pairs. In short, Map provides us a simpler and easier use.

So what can we do with Map?

Methods and properties are:

new Map() – creates the map.

map.set(key, value) – stores the value by the key.

map.get(key) – returns the value by the key, undefined if key doesn’t exist in map.

map.has(key) – returns true if the key exists, false otherwise.

map.delete(key) – removes the value by the key.

map.clear() – removes everything from the map.

map.size – returns the current element count.

Map Iteration

If we have a plain object, and we’d like to create a Map from it, then we can use built-in method Object.entries(srcObject)

We can create a map from an object like this:

SET

The Set is also an object and keeps a value array. (without keys), where each value may occur only once.The Set is well optimized in performance to create a unique arrays

new Set(iterable) – creates the set, and if an iterable object is provided

set.add(value) – adds a value, returns the set itself.

set.delete(value) – removes the value, returns true if value existed at the moment of the call, otherwise false.

set.has(value) – returns true if the value exists in the set, otherwise false.

set.clear() – removes everything from the set.

set.size – is the elements count.

WeakMap and WeakSet

JavaScript engine keeps a value in memory while it is “reachable” and can potentially be used. (Javascript Garbage Collection can be researched to better understand WeakMap and WeakSet)

Usually, properties of an object or elements of an array or another data structure are considered reachable and kept in memory while that data structure is in memory.

WeakMaps have several popular use cases. They can be used to keep an object’s data private, and they can also be used to keep track of DOM nodes/objects.

WeakMap does not support iteration and methods keys(), values(), entries(), so there’s no way to get all keys or values from it. ( this mean there is no iteration)

WeakMap has only the following methods:

• weakMap.get(key)
• weakMap.set(key, value)
• weakMap.delete(key)
• weakMap.has(key)

Why we have this limitation? There is a technical reason for this. If an object has lost all other references, then it is to be garbage-collected automatically. But technically it’s not exactly just at that moment.

The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically, the current element count of a WeakMap is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access all keys/values are not supported.

WeakSet behaves similarly to WeakMap:
*Similar to Set, but we can only add objects (not primitive types).
*An object exists in the set as long as it can be accessed from elsewhere.
*Like set, it supports add, has, and delete, but not size, keys(), and iterations. (Because of the Garbage Collection effect I mentioned above)

Let’s see the list of JavaScript WeakSet methods:

• weakSet.add(key)
• weakSet.delete(key)
• weakSet.has(key)

So do we really need WeakMap? It can be useful if we want to keep an object only when it exists. Apart from that, since we keep the object in a structure, we do not force it to exist in memory.

Bonuses

Let’s create a use case. For example, we are on a page where we are showing Messages and we are showing unread messages as notifications. When a message is deleted, it will automatically be deleted from unread messages.

Also: