Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Javascript Map vs Object — What and when?
The JavaScript Map is the data structure that helps us to store the data in the form of pairs. The pairs consist of a unique key and value mapped to the key. It helps to prevent duplicity.
The JavaScript Object also follows the same concept as that of a map i.e. key−value pairs for storing data. But there are slight differences that make the map a better performer in certain situations
Let us look into these differences between a Map and an Object further in this article.
Map vs Object
Following are the major differences between Map and Object −
Type of the entities
In an object, the data type of the key field is restricted to integers, strings, and symbols. Although in Map, the key property can be of any data type (integer, array, and object).
Value of the elements
In the map, the original order of elements is preserved. whereas it is not true in the case of objects.
Instance of
Example
The map is an instance of an object but the object is not an instance of the map. In the following example, we are checking the instanceof conditions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Instanceof</title>
</head>
<body>
<p>Map is the instanceof the object: true</p>
<p>Object is the instanceof Map: false</p>
<script>
var map = new Map([
[2, 3],
[8, 9],
]);
document.write(map instanceof Object, “<br>”); // true
var obj = new Object();
document.write(obj instanceof Map); //false
</script>
</body>
</html>
Declaration
Example
In JavaScript, there are many approaches to creating an Object In the following example, we are trying to create an object and a map directly by passing values to literals.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Instanceof</title>
</head>
<body>
<script>
//Creating an object by passing literals
var obj = {1:"name of object", 2:"demo"}
document.write(JSON.stringify(obj), "<br>");
//Using constructor Object
var obj = new Object(12575);
document.write(JSON.stringify(obj), "<br>");
//Using the create method
function user(){
this.name = "tutorialspoint";
}
function aman(){
user.call(this);
}
aman.prototype = Object.create(user.prototype);
const use = new aman();
document.write(use.name);
</script>
</body>
</html>
Example
Whereas, the Map has only one way of creation. Following is an example of this −
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<script>
var map1 = new Map(); //empty Map
var map2 = new Map([
[1, "Aman"],
[2, "Akash"],
]);
map2.forEach (function(value, key) {
document.write(""+ key+":"+value,"<br>");
})
</script>
</body>
</html>
Accessing Elements
The map uses its in−built get() Method for accessing its elements.
Map.get(1);
The object simply uses the key name with a dot operator to access it elements.
Obj.id; Obj[id];
Check if a key already exists
The Map uses its in-built function has() for this.
map.has(1); // return true or false
object uses '===' operator for performing.
var exist = obj.1 === undefined; //returns Boolean value.
Adding new element
The map uses set() method to add a new element.
Map.set(1,2);
Object it is done directly.
Obj["Demo"] = "object value";
Getting the size
Map automatically updates its size and gets the easiest way.
console.log(map.size);
In the object, the size needs to be calculated manually with the help
Object.keys() Console.log(object.keys(obj).length);
Hence we can see the map is having better performance and less to write code structure which gives it an edge over Objects.
257 Views
