Map vs Object in JavaScript

01 Feb, 2022
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 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.
Few basic differences are as follows:
In Object, the data-type of the key-field is restricted to integer, strings, and symbols. Whereas in Map, the key-field can be of any data-type (integer, an array, even an object!)In the Map, the original order of elements is preserved. This is not true in case of objects.The Map is an instance of an object but the vice-versa is not true.
In Object, the data-type of the key-field is restricted to integer, strings, and symbols. Whereas in Map, the key-field can be of any data-type (integer, an array, even an object!)
In the Map, the original order of elements is preserved. This is not true in case of objects.
The Map is an instance of an object but the vice-versa is not true.
Example:
<script>    var map = new Map([        [5, 4],        [7, 9]    ]);      //output:true    console.log(map instanceof Object);       //output:false    var obj = new Object();    console.log(obj instanceof Map); </script>
Output:
true
false
Let’s dive deep into some more concepts which makes Object different than Map.
Declaration:In JavaScript, there are many ways to create an object. For example:By using direct literal:var obj = {};var obj = {1:"Object Name", 2:"Test"};console.log(obj);Output:ObjectUse of constructor:var obj = new Object(); //Empty objectvar obj = new Object;console.log(obj);Output:ObjectUsing object.createfunction fruits() {        this.name = 'fruit 1';        this.season = 'summer';        }          function apple() {        fruits.call(this);        }          apple.prototype = Object.create(fruits.prototype);        const app = new apple();        console.log(app.name);        console.log(app.season);fruit 1
summerOn the other hand, the Map has only one way of creation.var map = new Map();//Emptyconsole.log(map);var map = new Map([[1, "Sam"], [2, "John"]]); // 1-> Sam, 2->Johnconsole.log(map);Output:Map(0)
Map(2)Accessing Element:Map uses its inbuilt get() method for accessing its elements.map.get(1);Object simply uses the ‘key’ name with a dot operator to access its elements.obj.id;
obj[id];Check if a key already exists:Map uses it’s inbuilt has() function for this.map.has(1);//returns boolean value true or false.Object uses ‘===’ operator for performing the task.var doExist = obj.1 === undefined; //returns boolean value.Adding new Element:Map uses set() method to add new element.map.set(4, 5); //{5->4, 7->9, 4->5}In object, it is done directly.obj["Demo"]="Map vs Object"; //{1->Object Name, 2->Test, Demo->Map vs Object}Getting the size:Map automatically updates its size and get the easiest.console.log(map.size);In object, the size needs to be calculated manually with the help Object.keys().console.log(Object.keys(obj).length);
Declaration:In JavaScript, there are many ways to create an object. For example:By using direct literal:var obj = {};var obj = {1:"Object Name", 2:"Test"};console.log(obj);Output:ObjectUse of constructor:var obj = new Object(); //Empty objectvar obj = new Object;console.log(obj);Output:ObjectUsing object.createfunction fruits() {        this.name = 'fruit 1';        this.season = 'summer';        }          function apple() {        fruits.call(this);        }          apple.prototype = Object.create(fruits.prototype);        const app = new apple();        console.log(app.name);        console.log(app.season);fruit 1
summerOn the other hand, the Map has only one way of creation.var map = new Map();//Emptyconsole.log(map);var map = new Map([[1, "Sam"], [2, "John"]]); // 1-> Sam, 2->Johnconsole.log(map);Output:Map(0)
Map(2)
By using direct literal:var obj = {};var obj = {1:"Object Name", 2:"Test"};console.log(obj);Output:Object
var obj = {};var obj = {1:"Object Name", 2:"Test"};console.log(obj);
Output:
Object
Use of constructor:var obj = new Object(); //Empty objectvar obj = new Object;console.log(obj);Output:Object
var obj = new Object(); //Empty objectvar obj = new Object;console.log(obj);
Output:
Object
Using object.createfunction fruits() {        this.name = 'fruit 1';        this.season = 'summer';        }          function apple() {        fruits.call(this);        }          apple.prototype = Object.create(fruits.prototype);        const app = new apple();        console.log(app.name);        console.log(app.season);fruit 1
summer
function fruits() {        this.name = 'fruit 1';        this.season = 'summer';        }          function apple() {        fruits.call(this);        }          apple.prototype = Object.create(fruits.prototype);        const app = new apple();        console.log(app.name);        console.log(app.season);
fruit 1
summer
On the other hand, the Map has only one way of creation.
var map = new Map();//Emptyconsole.log(map);var map = new Map([[1, "Sam"], [2, "John"]]); // 1-> Sam, 2->Johnconsole.log(map);Output:Map(0)
Map(2)
var map = new Map();//Emptyconsole.log(map);var map = new Map([[1, "Sam"], [2, "John"]]); // 1-> Sam, 2->Johnconsole.log(map);
Output:
Map(0)
Map(2)
Accessing Element:Map uses its inbuilt get() method for accessing its elements.map.get(1);Object simply uses the ‘key’ name with a dot operator to access its elements.obj.id;
obj[id];
Map uses its inbuilt get() method for accessing its elements.map.get(1);
map.get(1);
Object simply uses the ‘key’ name with a dot operator to access its elements.obj.id;
obj[id];
obj.id;
obj[id];
Check if a key already exists:Map uses it’s inbuilt has() function for this.map.has(1);//returns boolean value true or false.Object uses ‘===’ operator for performing the task.var doExist = obj.1 === undefined; //returns boolean value.
Map uses it’s inbuilt has() function for this.map.has(1);//returns boolean value true or false.
map.has(1);//returns boolean value true or false.
Object uses ‘===’ operator for performing the task.var doExist = obj.1 === undefined; //returns boolean value.
var doExist = obj.1 === undefined; //returns boolean value.
Adding new Element:Map uses set() method to add new element.map.set(4, 5); //{5->4, 7->9, 4->5}In object, it is done directly.obj["Demo"]="Map vs Object"; //{1->Object Name, 2->Test, Demo->Map vs Object}
Map uses set() method to add new element.map.set(4, 5); //{5->4, 7->9, 4->5}
map.set(4, 5); //{5->4, 7->9, 4->5}
In object, it is done directly.obj["Demo"]="Map vs Object"; //{1->Object Name, 2->Test, Demo->Map vs Object}
obj["Demo"]="Map vs Object"; //{1->Object Name, 2->Test, Demo->Map vs Object}
Getting the size:Map automatically updates its size and get the easiest.console.log(map.size);In object, the size needs to be calculated manually with the help Object.keys().console.log(Object.keys(obj).length);
Map automatically updates its size and get the easiest.console.log(map.size);
console.log(map.size);
In object, the size needs to be calculated manually with the help Object.keys().console.log(Object.keys(obj).length);
console.log(Object.keys(obj).length);
Hence we can see Map is having better performance and less to write code structure which gives it an edge over Object. However, there are some scenarios which requires object to be used. Let us see.WHEN AND WHERE TO USE OBJECT:
Objects are a great choice for situations where we need simple structure to store data and the type of keys needed is either an integer, strings or symbols.
Scenarios which needs the application of separate logic to individual property element, the object is definitely the choice.
JSON gives direct support for object but not with map(yet).
Map is completely hash whereas Object is more than that.
Although Map tends to have more advantages over objects, at the end the day it depends on the kind of data being used and the operation needs to be performed.However, of all the advantages of map over object, map cannot replace object in JavaScript because Object is much more than a hash table. It shouldn’t be used just for the purpose of hashing if there exists another choice.
shivamnayak
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.