Map vs Object in JavaScript

“Map” and “Object” are two common data structures in JavaScript used to store key-value pairs. A Map is utilized when you need a data structure that can store any data type as a key or value and need an ordered collection of key-value pairs. While Object is used when you only need to store string keys.

This post will explain the difference between Map and Object in JavaScript.

How to Define an Object in JavaScript?

In JavaScript, an object is a collection of properties, each with a key-value pair. The “key” is the “name”, and a “value” is the “value” against the key. Objects can represent real-world objects, like a car, a person, or a bank account. They can also represent more abstract objects, like a mathematical point in space, a color, or a date.

Syntax

An object can be created using literal object notation {} brackets or the Object constructor. Using the literal notation or brackets, use the syntax below:

const object= {
key: value,
key: value
}

Creating an object using the Object constructor or the “new” keyword, use the following syntax:

const object= new Object();

object.key = value;

Note: Keep in mind the keys or names of the object properties must be a string.

Example 1: Create an Object Using Literal Notation in JavaScript

In the following example, we will create an object called “stdObject” using literal notation or brackets:

var stdObject = {
name: 'John',
age: 18,
rollno: 25,
standard: 9
}

Print the object on the console:

console.log(stdObject);

Output

Example 2: Create an Object Using Object Constructor in JavaScript

Here, we will create an object using the Object constructor utilizing the “new” keyword:

const stdObject = new Object();

Now, add the properties (key-value) of objects using the dot(.) notation:

stdObject.name = 'Jodan';

stdObject.age = 19;

stdObject.rollno = 15;

stdObject.standard = 10;

Lastly, display the object on the console using the “console.log()” method:

console.log(stdObject);

Output

How to Define Map in JavaScript?

In JavaScript, a “Map” is a data structure that holds key-value pairs similar to an object. It allows you to associate data with keys and retrieve the data later by using the keys. Maps can be utilized to implement dictionaries, hash tables, and other data structures that map keys to values.

Syntax

To initialize a Map use the following syntax:

const map = new Map([

['key', 'value'],

['key', 'value']

]);

You can also create a Map using the Map constructor or by using the new operator, and set values utilizing the “set()” method:

const map = new Map();

map.set('key', 'value');

Example: Create a Map in JavaScript

In the given example, we will create a Map using both syntax.

Create a Map using the initialization method. Here, we will set keys as a string while you can set keys in a Map in any type:

const mapStd = newMap([
['name', 'John'],
['age', 18],
['rollno', 25],
['standard', 9],
]);

Or create a Map by calling the Map constructor or the new keyword/operator:

const mapStd = new Map();

Set values in Map in a key-value pair using the “set()” method:

mapStd.set('name', 'John');

mapStd.set('age', 18);

mapStd.set('rollno', 25);

mapStd.set('standard', 9);

To print the map on the console, use the “entries()” method with the “for-of” loop:

for (const [key, value] of mapStd.entries()) {

console.log(`${key}: ${value}`);

}

Or for accessing the value of any specific key/property, use the “get()” method:

console.log("The rollno of " + mapStd.get('name') + " is " + mapStd.get('rollno'));

The output indicates all properties of the Map and the value of the specific property:

Map vs Object in JavaScript

The primary difference between Map and the Object is as follows:

Map	Object
It was introduced in ECMAScript 6 in 2015.	JavaScript introduced the Object data type in its first version (ECMAScript 1) released in 1997.
Map allows keys of any data type (e.g., objects, functions, numbers, etc.).	Object keys must be strings.
The properties of a Map can be accessed utilizing the get() method.	Object properties can be accessed utilizing dot notation or square bracket notation.
Map has a built-in size property to return the number of key-value pairs	Object does not have this feature.
Map is iterable. It allows looping through all key-value pairs using some built-in methods such as forEach(), keys(), values(), and entries().	The Object is not iterable. There is a need to use “for-in” loops or Object.entries() method for iterating key-value pairs.
Map is ordered.	Object is unordered.

When working with small data sets, the performance difference between Maps and objects is negligible, but when working with larger data sets, Maps can be faster as they are optimized for performance.

When Does Map Prefer Over Objects In JavaScript?

When you need to store key-value pairs in an ordered form or the value as a key be any data type, such as numbers, objects, or symbols, use the “Map” data structure. Objects will be used when you need to use strings as keys and when you don’t need any of the features of Maps. The performance difference between Maps and objects is negligible while working with small data sets, but when working with larger data sets, Maps can be faster as they are optimized for performance.

Conclusion

Map and Object are both used to store data as key-value pairs in JavaScript, but they have some differences. Map is a more powerful and flexible data structure than Object, and is the preferred choice when you need to store key-value pairs that need to be ordered, have keys of different data types, or have a size property. This post explained the difference between Map and Object in JavaScript.

Map vs Object in JavaScript

How to Define an Object in JavaScript?

Example 1: Create an Object Using Literal Notation in JavaScript

Example 2: Create an Object Using Object Constructor in JavaScript

How to Define Map in JavaScript?

Example: Create a Map in JavaScript

Map vs Object in JavaScript

When Does Map Prefer Over Objects In JavaScript?

Conclusion

About the author

Farah Batool