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 Objectobj['id'] = 1;                         //Assignment or Addition to Objectobj['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: 1map.get("name");                          // output: "Sacesta"Objectobj.id;                                   // output: 1obj.name;                                 // output: 2

Removing/Deleting an element

Object

delete obj.id;                             // {"name":"Sacesta"}Mapmap.delete("id");  

Getting the size

Object

Object.keys(obj).length;                               //output: 1Mapmap.size'                                               //output: 1

Iterating

Map

map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));ObjectObject.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 :- [email protected].

javascript #webdevelopment #reactjs #nodejs #webdesign