A map is like a dictionary. It pairs keys with values. Keys can be any type of data.
A map keeps track of the order in which keys were first added.
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 make a map by giving an array to the new Map() constructor.
The set() Method
You can put things into a Map using the set() method.
You can update values in a Map by using the set() method.
The get() Method
The get() method gets the value of a key in a Map:
The size Property
The size property tells you how many elements are in a Map.
The delete() Method
To remove an element from a Map, you can use the delete() method.
The has() Method
The has() function tells you whether a key is present in a Map, returning true if it is.
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
You can use the forEach() method to execute a function for every key/value pair in a Map.
The entries() Method
The entries() method gives you an iterator containing pairs of [key, values] from a Map.
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
HTML
CSS
Javascript
Jquery