A Map holds key-value pairs where the keys can be any datatype.
A Map remembers the original insertion order of the keys.
Essential Map Methods
| 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 |
How to Create a Map
You can create a JavaScript Map by:
- Passing an Array to
new Map() - Create a Map and use
Map.set()
The new Map() Method
You can create a Map by passing an Array to the new Map() constructor:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Result:
JavaScript Map Objects
Creating a Map from an Array:
500
The set() Method
You can add elements to a Map with the set() method:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Result:
JavaScript Map Objects
Using Map.set():
500
The set() method can also be used to change existing Map values:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Result:
JavaScript Map Objects
Using Map.set():
200
The get() Method
The get() method gets the value of a key in a Map:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Result:
JavaScript Map Objects
Using Map.get():
500
The size Property
The size property returns the number of elements in a Map:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
Result:
JavaScript Maps
Using Map.size:
3
The delete() Method
The delete() method removes a Map element:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
Result:
JavaScript Maps
Deleting Map elements:
2
The has() Method
The has() method returns true if a key exists in a Map:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
Result:
JavaScript Maps
Using Map.has():
true
Try This:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
Result:
JavaScript Maps
Using Map.has():
false
JavaScript Objects vs Maps
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
The forEach() method calls a function for each key/value pair in a Map:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value + "<br>"
})
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Map Objects
Using Map.forEach():
apples = 500
bananas = 300
oranges = 200
The entries() Method
The entries() method returns an iterator object with the [key, values] in a Map:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.entries()) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Result:
JavaScript Map Objects
Using Map.entries():
apples,500
bananas,300
oranges,200
Browser Support
JavaScript Maps are supported in all browsers, except Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |