JavaScript Map VS Object

We have to deal with the key-value pairs in JavaScript repeatedly. When talking about key-value pairs, the most used strategy is utilizing Objects to store key-value pairs, but ECMAScript 2015 introduced a feature called map, which is also utilized to store key-value pairs.

We will understand the JavaScript Map VS object in this article. In JavaScript, Map and Object are utilized to keep data as dynamic collections of key-value pairs. Let us understand maps and objects separately.

What is a map?

ES6 is a standard for scripting languages that bring into being a method called "Map". The Map is a data structure that is utilized in JavaScript to keep the collection of distinct data in the form of key-value pairs, which also means that a map cannot store the same data.

Following is the syntax for constructing a JavaScript Map:

const product = new map();
prod.set('name', 'Laptop');
prod.set('price', 55000);

What is an Object?

The Object is kind of similar as that of a map, i.e., a data structure that is used to store unique data in the form of key-value pairs. There is a bit of distinction between an Object and a map which we will learn further in this article.

Following is the syntax for constructing a JavaScript Object:

const product = {
name: 'Laptop';
price: 55000;

Map VS Object

1. Based on construction

Constructing a Map:

The Map can be created in only one way which is as follows:

Code:

var map = new Map([ [6, 8], [5, 4] ]); 
console.log(map instanceof Object); 
var obj = new Object(); 
console.log(obj instanceof Map); 

Output:

Constructing an Object:

There are various ways in which we can create an Object in JavaScript which are as follows:

Constructor: We can create an Object utilizing a constructor.

Code:

var ob = new Object();
var ob = new Object; 
console.log(ob);

Output:

We can witness an empty object in the output below.

Direct literal: We can create an Object utilizing a direct literal.

Code:

var ob = {}; 
var ob = {1:"Object Name", 2:"Sample"}; 
console.log(ob);

Output:

An Object has been created as we can witness the output below.

create: We can create an Object utilizing a direct literal.

Code:

function products() { 
		this.name = 'product 1'; 
		this.price = 25000; 
		} 

		function refrigerator() { 
		products.call(this); 
		} 

		refrigerator.prototype = Object.create(products.prototype); 
		const app = new products(); 
		console.log(app.name); 
		console.log(app.price);

Output:

We can witness the Object created in the outcome downwards.

2. Based on how to access the element:

Map utilizes the get() function which is an inbuilt function used to access elements.

Syntax:

Object utilized the name of "key" with a "dot" operator to access elements of Object.

Syntax:

obj.id;
obj[id];

3. Based on the type of key:

Map consists of a key-value pair in which the key can be of any type such as primitive type, function or object.
Object contains a key-value pair in which the key can be of one string type. If you define a key of any other type then also it will be converted into a string.

4. Based on how to check whether a key exists already or not:

Map utilizes the has() function which is an inbuilt function used to check the existence of a key.

Syntax:

The has() function returns a boolean value, i.e., true or false.

Object utilizes the "===" operator for doing tasks.

Syntax:

It returns boolean value either true or false.

5. Based on how to add a new element:

Map utilizes the set() function for adding a new element.

Syntax:

Object adds a new element directly.

Syntax:

6. Based on how to get size:

Although Map automatically updates size but we can utilize the following syntax to get size.

Syntax:

Object utilizes Object.keys() to get size.

Syntax:

It returns the size of the elements.

7. Based on how to delete an element:

Map utilizes the delete() function to remove an element.

Syntax:

Object utilizes a delete keyword to delete only the property of the element.

Syntax:

delete obj.property; or
delete obj.[property];

8. Based on how to read key and value pairs:

Map utilizes the keys() function to obtain the list of keys, the values() function is utilized to obtain the list of values and the entries() function is utilized to obtain the key-value pairs.

Syntax:

const map = new Map([[1, "Apple"], [2, "Mango"]]);

console.log(map.keys());
console.log(Array.from(map.keys()));

console.log(map.values());
console.log(Array.from(map.values()));

console.log(map.entries());
console.log(Array.from(map.entries()));

Output:

Object utilizes a keys() method to get the keys, values() method is utilized to get the values and entries() method is utilized to get the key-value pairs.

Syntax:

const fruits = { 1: "Apple", 2: "Mango" };
console.log(Object.keys(fruits));
console.log(Object.values(fruits));
console.log(Object.entries(fruits));

Output:

9. Based on iteration:

There are various ways for iterating the element but we will utilize the for() loop and forEach() loop to iterate over the elements in a map.

Syntax of using the for() loop:

for (const [ key, value ] of map) {
	console.log(value);
};

Syntax of using the forEach() loop:

There are many ways for iterating the element but we will utilize the for() loop and forEach() loop to iterate over the elements in an object.

Syntax of using the for() loop:

for (const [key, value ] of Object.entries(obj)) {
	console.log(value);
};

Syntax of using the forEach() loop:

10. Based on the conversion of them into JSON:

Map does not support JSON because Map is a hash table, which is why a parser is created to convert Map into JSON.
Object support JSON and permits to convert the Objects into JSON directly.

We can say that Map is preferred over Object because of the reasons which we have already discussed-above.

Conclusion:

We have understood the JavaScript Map VS Object in this article. Both Map and Object are utilized to store data in key-value pairs but they are different in a way. The key difference between Map and Object is that the Map utilizes complex data types as keys whereas Object utilizes only string data type.

Next TopicComposition in JavaScript

← prev next →