JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Maps
- A Map stores key-value pairs, where the keys can be of any datatype.
- A Map remembers the original insertion order of the keys.
- A Map consists of a property that represents the size of the map.
Map Methods
Method | Description |
new Map() | Creates a new Map object |
set() | Sets the value for a key in a Map |
get() | Gets the value for a key in a Map |
clear() | Removes all the elements from a Map |
delete() | Removes a Map element specified by a key |
has() | Returns true if a key exists in a Map |
forEach() | Invokes a callback for each key/value pair in a Map |
entries() | Returns an iterator object with the [key, value] pairs in a Map |
keys() | Returns an iterator object with the keys in a Map |
values() | Returns an iterator object of the values in a Map |
Property | Description |
size | Returns the number of Map elements |
How to Create a Map
You can create a JavaScript Map by:
- Passing an Array to a new Map()
- Create a Map and use Map.set()
new Map()
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>
Output
JavaScript Map Objects
Creating a Map from an Array:
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>
Output
JavaScript Map Objects
Using Map.set():
200
Map.get()
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>
Output
JavaScript Map Objects
Using Map.get():
500