A map is a collection of key-value pairs, where the keys can be of any data type.
A map keeps track of the order in which keys were first added.
A map has a characteristic that shows how big the map is.
Map Methods
| Method | Description |
|---|
| new Map() | Generates a fresh Map object. |
| set() | Assigns a value to a specific key in a Map. |
| get() | Retrieves the value associated with a specific key in a Map. |
| clear() | Deletes all items from a Map. |
| delete() | Deletes a Map item identified by a specific key. |
| has() | Determines whether a specific key is present in a Map. |
| forEach() | Triggers a function for every key/value combination in a Map. |
| entries() | Produces a tool that iterates through the [key, value] pairs within a Map. |
| keys() | Produces an iterator that contains the keys of a Map. |
| values() | Produces a sequence of values from a Map. |
| Property | Description |
|---|
| size | Returns the count of Map elements. |
How to Create a Map
You can make a JavaScript Map by:
- Using an array with
new Map().
- Build a map and employ the
Map.set() method.
new Map()
To make a map, you can use an array with the new Map() constructor.
Map.set()
You can put things into a Map by using the set() method.
You can use the set() method to modify values in an existing Map.
Map.get()
The get() method is used to retrieve the value associated with a specific key in a Map.
Map.size
The size property tells you how many elements are in a Map.
Map.delete()
The delete() method is used to get rid of a Map element.
Map.clear()
The clear() method eliminates all elements from a Map.
Map.has()
The has() function tells you if a specific key is present in a Map.
Maps are Objects
typeof tells us that the result is an object.
instanceof Map will give a result of true.
JavaScript Objects vs Maps
Differences between JavaScript Objects and Maps:
| Object | Map |
|---|
| Not easily looped through. |
Directly iterable |
| The size property is absent. |
Include a "size" attribute. |
| Key values need to be either Strings or Symbols. |
Keys can have various types of data. |
| The keys are not properly arranged. |
Keys are arranged based on when they are added. |
| Use the default keys. |
Avoid using preset keys. |
Map.forEach()
The forEach() method calls a function for every key/value pair in a Map.
Map.entries()
The entries() method gives back an iterator object containing [key, values] pairs from a Map.
Map.keys()
The keys() method gives back a list of keys from a Map in the form of an iterator object.
Map.values()
The values() method gives back an iterator object containing the values within a Map.
You can employ the values() method to add up the values in a Map.
Objects as Keys
Using objects as keys is a crucial feature in Map functionality.
Note: The important thing is an aboject (apples), not just a string ("apples").
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits instanceof Map;
</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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
text += x + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
text += x + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let total = 0;
for (const x of fruits.values()) {
total += x;
}
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Being able to use objects as keys is an important Map feature:</p>
<p id="demo"></p>
<script>
// Create Objects
const apples = {
name: 'Apples'
};
const bananas = {
name: 'Bananas'
};
const oranges = {
name: 'Oranges'
};
// Create a Map
const fruits = new Map();
// Add the Objects to the Map
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 id="demo"></p>
<script>
// Create Objects
const apples = {
name: 'Apples'
};
const bananas = {
name: 'Bananas'
};
const oranges = {
name: 'Oranges'
};
// Create a Map
const fruits = new Map();
// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery