Javascript Map, WeakMap and Set
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.