Javascript Map, WeakMap and Set

Published in

Webtips

4 min readJun 25, 2020

In this post, you will learn about JavaScript Map, WeakMap, Set related interview questions you may face, and few exercises.

Maps

Map uses key value pairs and keeps the original insertion order of the keys. Any value may be used as key.

Properties and Methods of Map (only Size is property)

Size — We can get the size of the maps
Clear — We can clear out the map completely
Delete — Can delete specific items of the map
Entries — Can get the entries of the map
forEach — For iterating through them
Get — Can get the value based on key
Set — Can add the key and value
Has — Can check if map has a certain value
Keys — We can also get all the keys
Values — We can get all the values of the map

Iterating Over Maps

For iterating over maps, we have 3 methods

keys() — iterable of keys.
values() — iterable of values.
entries() — returns iterable of entries[key, value] it is used in for….of loop, which we have shown below

Another example to show Maps.entries() in for…of and how the sorting can be done on Maps.

When we are trying to execute this first item we will always be the first item in the map because it does preserve the order and one of the disadvantages of this like array.sort(), Maps does not have sort method.

All of a sudden it doesn’t feel good to use Maps but no need to worry we can use spread operator. The spread operator works on the map the same as in array. The difference is that it returns pairs instead of single key values.

…filters or […filters] // output [‘color’, ‘black’], [‘breed’, ‘labrador’]

I hope this has given an idea of how to solve a sorting issue.

WeakMaps

Keys should be used as objects and also WeakMaps are not iterable. WeakMaps will be garbage collected when they are not in use and WeakMaps are not enumerable, which means they cannot be fully counted. But for WeakMaps we can use only Delete, Get, Set, Has methods. In below example will show you how to create a WeakMaps, set the value and how garbage is collection is effects the WeakMaps and Maps

Understanding the Differences Between Maps and Objects

KEY FIELD: In the Objects keys must be simple data types like Integer, String, and Symbols, But whereas in Maps, the key can strings, numbers, boolean, objects. Example: (‘YEAR’, 2020) as string, (404, ‘NOT FOUND’) as numbers, (‘{YEAR: 2020}’, 2020) as objects, (true, 1) as boolean.
ORDER: Another difference is that Iteration of order from array to maps. When we try to iterate an array there is no guarantee that will go in order which we have inserted it. If we wanted to go through that order sometimes it will jump and sometimes we may get in that order, But with Maps, there is a guarantee that it will go in the order and will go through one by one and all the values in order. How it happens is that will preserve the creation order for string and symbols
INHERITANCE: A map is inherited from an object that means as a map I can get the methods and properties of an object, but the object is not a child of a map.
OTHER FUNCTIONAL DIFFERENCES:

Set

What Set helps us is that it enables us to store unique values of any type whether its a primitive values or object references and remember Set will be without keys only values we can add.

It provides a few methods like Maps:

new Set() — Creates the Set.
add — adds the values and it returns the set itself.
delete — removes the value
has — checks if the value is present.
clear — removes all the entries.
size — returns the count of the set

One of the main features of the set is that if we are adding multiple entries with the same value it doesn’t take. Example

Few Assignments You Can Work On

Create a method that should return a unique array when we pass an array of duplicate elements. (can use set)
Again, create a method to return a unique array when we pass an array of words with the same letters but in different orders.

Example

[‘we’, ‘love’, ‘arsenal’, ‘ew’, ‘ovel’, ‘rsenala’]

It should return

[‘we’, ‘love’, ‘arsenal’] OR [‘ew’, ‘ovel’, ‘rsenala’]

We can use both maps and set.

Possible Interview Questions

What’s the difference between ES6 Map and WeakMap?
What’s the difference between ES6 Map and Objects?
What’s the difference between ES6 Map and Set?

Originally published at http://www.allaboutjavascriptworld.com on June 25, 2020.