- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
What is the use of map object in javascript?
A Map holds key−value pairs where the key can be of any type. A map can remember the original insertion order of the key. A map has the properties to get the size of the map. A map can be used for any value both an object or primitive data type.
In general, an object can also be used as a key in the map. This is not the case for JavaScript objects it only allows primitive data types to be used as a key.
A key in the map may only occur once, it is unique in the map collection. A map object is iterated by key-value pairs a for…of loop returns a two-member array of [key, value] for each iteration.
Creating a Map
You can create a JavaScript map by −
1. Passing an array ay to the constructor new map()
Const name-of-variable (object) = new Map();
2. Create a map and use the map.set()
name-of-variable(object).set();
Map Methods
Following are the various methods provided by JavaScript.
S.No | Method and Description |
---|---|
1 | new map() Creates a new map object |
2 | Set() Set the value for a key in the map |
3 | Get() Get the value for a key in the map |
4 | Clear() Removes all the elements from a map |
5 | Delete() Removes a map element specified by a key |
6 | Has() Returns true if a key exists in a map |
7 | ForEach() Invokes a call back for each key/value pair in a map |
8 | Entries() Returns an iterator object with the [key, value] pairs in a map |
9 | Keys() Returns an iterator object with the keys in a map |
10 | Values() Returns an iterator object of the values in the map |
The JavaScript Map class also has a property “size” which Returns the number of map elements.
Example 1
In the following example, we are creating a map by passing an array to the constructor of the Map class.
<!DOCTYPE html> <html lang="en"> <head> <title>Map function</title> </head> <body> <h4>Creating a map from an array:</h4> <p id="demo"></p> <script> const myMap = new Map([["Rahul", 22],["Akash", 23],["Aman", 23]]); document.getElementById("demo").innerHTML = myMap.get("Aman"); </script> </body> </html>
Example 2
In the following example, we have created an empty map and set the map value using the Map.set() method.
<!DOCTYPE html> <html lang="en"> <head> <title>Map function</title> </head> <body> <h4>using Map.set()</h4> <p id="demo"></p> <script> const myMap = new Map(); //creating empty map //set the value of the map myMap.set("Aman", 23); myMap.set("Akash", 22); myMap.set("Rahul", 21); document.getElementById("demo").innerHTML = myMap.get("Akash"); </script> </body> </html>
Example 3
In the following example, we are getting the size of the map and deleting the element from the map. After deleting we are again checking the size.
<!DOCTYPE html> <html lang="en"> <head> <title>Map Function</title> </head> <body> <h4>using Map.delete()</h4> <p id="demo"></p> <p>After Deletion</p> <p id="del"></p> <script> //creating empty map const myMap = new Map(); //set the value of the map myMap.set("Aman", 23); myMap.set("Akash", 22); myMap.set("Rahul", 21); document.getElementById("demo").innerHTML = "Size of Map " + myMap.size; //Deleting one element myMap.delete("Aman"); document.getElementById("del").innerHTML = "Size of Map " + myMap.size; </script> </body> </html>
Example 4
In the following example, we are demonstrating the Map.has() method.
<!DOCTYPE html> <html lang="en"> <head> <title>Map function</title> </head> <body> <h4>using Map.has()</h4> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <script> const myMap = new Map(); //creating empty map //set the value of the map myMap.set("Aman", 23); myMap.set("Akash", 22); myMap.set("Rahul", 21); document.getElementById("demo1").innerHTML = myMap.has("Aman"); //true document.getElementById("demo2").innerHTML = myMap.has("Akash"); //true document.getElementById("demo3").innerHTML = myMap.has("Rahul"); //true document.getElementById("demo4").innerHTML = myMap.has("Anil"); //false because anil is not available on the map. </script> </body> </html>
- Related Articles
- What is the use of Map in JavaScript?
- What is the use of proxy() object in JavaScript?
- Map object in JavaScript.
- Javascript Map vs Object — What and when?
- What is the use of the map function in Python?
- Object to Map conversion in JavaScript
- How to use my object like an array using map function in JavaScript?
- Convert object to a Map - JavaScript
- What is the use of Object Cloning in Java?
- What is the difference between Map and WeakMap in JavaScript?
- JavaScript map value to keys (reverse object mapping)
- What is the use of OBJECT.assign() in javascript?
- What is the use of Atomics in JavaScript?
- What is the use of window.location in javascript?
- What is the use of sentry in javascript?
