The missing JavaScript guide for selecting between objects and maps.
Why Map vs Object but not Map vs Array or Object vs Set, you might be wondering. You may compare the two, of course, but Map and Object, unlike others, have extremely similar use-cases, so we need to know more about them to determine which is best when. And it is the topic of this.
What Is Map and Object in #Javascript?
*Map *
Map is a data structure which helps in storing the data in the form of pairs. The pair consists of a unique key and a value mapped to the key. It helps prevent duplicity.
Object
Object follows the same concept as that of map i.e. using key-value pair for storing data. But there are slight differences which makes map a better performer in certain situations.
In JavaScript, objects are handy. They allow us to easily group multiple pieces of data together. After ES6, we got a new addition to the language - Map. In a lot of aspects, it seems like a more capable Object with a somewhat clumsy interface. However, most people still reach for objects when they need a hash map and only switch to using Map when they realize the keys can't just be strings for their use cases. As a result, Map remains underused in today's JavaScript community.
How To Use
Declaration and Assignment
Object
const obj = new Object() //Declaration of Object
obj['id'] = 1; //Assignment or Addition to Object
obj['name'] = "Sacesta"; //Assignment or Addition to Object
Map
const map = new Map(); // Declaration of Map
map.set("id",1); //Assignment or Addition to map
map.set("name","Sacesta"); //Assignment or Addition to map
Accessing element
Map
map.get("id"); // output: 1
map.get("name"); // output: "Sacesta"
Object
obj.id; // output: 1
obj.name; // output: 2
Removing/Deleting an element
Object
delete obj.id; // {"name":"Sacesta"}
Map
map.delete("id");
Getting the size
Object
Object.keys(obj).length; //output: 1
Map
map.size' //output: 1
Iterating
Map
map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));
Object
Object.keys(obj).forEach((key)=> console.log(`key: ${key}, value: ${obj[key]}`));
When to use Map / Object
Use Object for records where you have a fixed and finite number of properties/fields known at author time, such as a config object. And anything that is for one-time use in general.
In scenarios where there is a need to apply separate logic to individual property/element(s), then Object is definitely the choice.
JSON has direct support for Object, but not with Map (yet). So in certain situation where we have to work a lot with JSON, consider Object as preferred option.
In addition, Map preserves the order of its keys — unlike Object, and Map was built with iteration in mind, so in case iteration or elements order are highly significant, consider Map — it will ensure stable iteration performance in all browsers.
Map tends to perform better in storing large set of data, especially when keys are unknown until run time, and when all keys are the same type and all values are the same type.
Use Map for dictionaries or hash maps where you have a variable number of entries, with frequent updates, whose keys might not be known at author time, such as an event emitter.Map is indeed more performant than Object on insertion, deletion and iteration speed, and it consumes less memory than an object of the same size.
Follow, Sacesta Technologies For more Tips and knowledge about Javascript.
Connect for queries or help related to Web Development :- contact@sacesta.com.
Top comments (1)
JavaScript doesn't exactly preserve insertion order. Numbers keys are in ascending order, then comes string keys in insertion order, then symbols in insertion order.