Map and Object in Javascript

Recently, while developing an application for my startup in React Native, I encountered a strange issue. My firebase query was giving a sorted result, which I was storing in an Object. But while retrieving the data from that object, the order was not the same. After lots of googling, I finally realized, I chose the wrong data structure. In this article, we are going to discuss in deep about two very similar,  yet very different data structures, Map and Object in Javascript.

I, like many others,  used to think that Map and Object in Javascript are exactly the same things. In fact, I never had to use Map, I just made an object, added some attributes and it did everything for me that a map could have. Or so I thought. Unless I ran into the bug I described above. Let’s dive into the basics, study each of them in detail.

Object

Almost everything in Javascript is an object. An object in javascript is a key-value store. We have a key and a corresponding to that key, we have a value, a unique value. In technical terms, the key is called Attribute or Property of the object. An object is recognized by its attributes.

Apart from this, Object also is a built-in prototype. Prototypes are javascript’s way of providing inheritance. Any object you make is an instance of that build-in prototype Object. 

For example, if you make an object t, it will be an instance of the built-in prototype Object.  Almost everything you initialize in Javascript is an instance of the built-in type Object. And this is why the first statement of this section said almost everything in Javascript is an Object.

Objects can use simple data types as keys, like integer, string, or at max symbols. Nothing more. Objects are also not iterable. You cannot iterate over an object. And objects never maintain the order of the keys. (this is how I came to know about maps).

Map

Maps are a gift from ES6. They were introduced in ES6 to do what Objects could not. Superficially, they are exactly like objects, keys, and values associated with the keys. However, you look deeply and you will see the stark differences.

Maps also are an instance of the built-in prototype Object. (Almost everything in a Javascript is an object !) . Unlike objects, maps can use complex data types (like objects, arrays, etc) as their keys. Maps also, unlike objects, are iterable. And they preserve the ordering of their keys.

How to use a Map

As already discussed above, maps were introduced as part of ES6. They can be constructed or initialised by using the new Keywork and Map constructor.

// To make an empty map
const mp = new Map();

// Initiaize a map with values
const mp = new Map([['a', 'apple'], ['b','ball']]); // a => apple, b => ball

To set a value in the map after initialization, ES6 provides a setter method.

mp.set('c', 'cat'); // c => cat

And to retrieve the value, it provides a get method.

mp.get('c'); // cat

As said earlier,  maps in Javascript, unlike the objects are iterable. We can use forEach to iterate over a map.

mp.forEach((v,k) => console.log(`key ${k} => ${v}`));

Map and Objects in Javascript, when to use what?

As said above, objects and maps have a lot of similarities.  How to decide when to use an object and when to use the map.

• Objects are more efficient performers than Maps. In case you are sure that only primitive data types are to be used and you don’t need to maintain the order, you should definitely use Objects since they are faster.
• Objects allow you to have separate logic for each attribute. So if you have to assign functions to attributes,  objects should be used.
• If you need iterating, go with maps.
• If you want the order of items to be preserved, again, go with maps.

Conclusions

Map and Object in Javascript provide two ways of implementing almost similar functionality.  In the end, it depends on the data you are handling, and how you want to use that data. Till very recently, I object was the goto structure for any kind of hashing logic.

Maps are just hash maps, whereas objects are much much more. Maps cannot do everything that an object does, but maps can do some of the work of objects in a better way.