HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A Map holds key-value pairs where the keys can be any datatype
| Method | Description |
|---|---|
| new Map() | Creates a new Map |
| set() | Sets the value for a key in a Map |
| get() | Gets the value for a key in a Map |
| delete() | Removes a Map element specified by the key |
| has() | Returns true if a key exists in a Map |
| forEach() | Calls a function for each key/value pair in a Map |
| entries() | Returns an iterator with the [key, value] pairs in a Map |
| Property | Description |
| size | Returns the number of elements in a Map |
You can create a JavaScript Map by:
new Map()Map.set()You can create a Map by passing an Array to the new Map() constructor:
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
You can add elements to a Map with the set() method:
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
The set() method can also be used to change existing Map values:
fruits.set("apples", 200);
The get() method gets the value of a key in a Map:
fruits.get("apples"); // Returns 500
The size property returns the number of elements in a Map:
fruits.size;
The delete() method removes a Map element:
fruits.delete("apples");
The has() method returns true if a key exists in a Map:
fruits.has("apples");
fruits.delete("apples");
fruits.has("apples");
Differences between JavaScript Objects and Maps:
| Object | Map | |
|---|---|---|
| Iterable | Not directly iterable | Directly iterable |
| Size | Do not have a size property | Have a size property |
| Key Types | Keys must be Strings (or Symbols) | Keys can be any datatype |
| Key Order | Keys are not well ordered | Keys are ordered by insertion |
| Defaults | Have default keys | Do not have default keys |
The forEach() method calls a function for each key/value pair in a Map:
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
The entries() method returns an iterator object with the [key, values] in a Map:
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
JavaScript Maps are supported in all browsers, except Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |