In this post, I would like to share my research on Map, a newly introduced JavaScript collection type in ES6. Recently, I am considering refactoring my JavaScript code in the hope of improving optimization level of my web application. Replacing old objects with Map could be one way of achieving the goal.
It is inevitable to discuss Map without comparing Object because they are very similar like brothers and sisters in that both hold key-pairs in their collection. In most cases, they can be used interchangeably.
However, if you are serious about optimizing your application and maintaining your codes as concise as possible, you better consider replacing some old Objects on your code with Maps. Especially, if your application handles a large set of data, frequently adding and removing data, Map may improve your application in many ways.
1. Map.size vs Object.keys(object).length
Map’s “size” property is powerful in counting the length of itself. It can be used just like the “length” property of Array.
On the other hand, counting Object’s size is not as straight-forward as Map. You should first get a keys-array converted by Object.keys(object) and then count the length of the array.
Which is faster? I had searched the answer online. But, I failed. I decided to create an experiment code and ran the code myself to find out the answer.
The blow is the experiment code. The code measures and compares millionth-second elapsed during counting the size of Map and Object.
And this is the result of the experiment.
As shown on the result table, Map.size is much faster. Especially, as the size grows, it performs exponentially better. Surprisingly, the result of Map.size is irrelevant to its size. It can be inferred that Map.size does not iterate itself while counting whereas Object.keys(object).length does.
Map.has(key) vs Object.keys(object).includes(key)
Another convenient method of Map is “has(key)”. The method looks up if a Map has specific key and returns true if it does or false if it does not.
On the other hand, Object does not have such direct method. In order to do the same job on Object, you should get keys-array first and check if the keys-array includes specific keys.
It seems that Map.has() is cleaner and I guess it performs better for the same reason it performed better in counting its size. I have not run a test though though.
Map.delete(key) vs delete object[key]
Map has “delete(key)” method that removes specific key-value. It returns true if the map had had the key and the key-value was successfully removed. It returns false if the map did not have the key so nothing was removed.
On the other hand, you can remove a key-value set in object by delete operator.
However, “delete” operator is known to be very slow and unsafe. Sometimes it causes unexpected errors so it should be used cautiously and generally not recommended.
Map is iterable
The other important feature of Map is its iterability. The simplest way to iterate Map is to use “for…of” as follows.
In addition to for…of, Map has more methods to iterate itself like Map.keys() and Map.values(). Both return new iterables either with only values or with only keys.
- Map.keys()
This returns a map iterator. The value is not accessible keys[0] like in array. The value is only accessible by looping through the iterator.
2. Map.values()
This is the same as Map.keys() except that it returns an iterable with values.
Relation with Array
Map and Array are convertible to/from each other very flexibly.
There are several ways of converting Map to Array. The easiest one is to use the spread syntax.
Merge multiple Maps
Using the spread syntax, multiple maps can be merged.
If different Maps have the same key, the only last repeated key survives. In the code below, both maps have Kim, but only Kim(74000) in employeSalaryMap2 remains.
Browser Supports
As of writing this post, most major browsers, except for IE, support Map.
Conclusion
After a brief research, I found out that generally Map is better than Object in terms of conciseness and optimization. I decided I replace Object in my JavaScript code with Map gradually.
