To get the length of a Map in JavaScript, you can use the Map.prototype.size method and Use for…of method. Let’s see how do it.
Map in JavaScript
In JavaScript, a map is a data structure that, like an object, lets you store key-value data. However, there is one thing that sets them apart:
- The key for an object can only be a string or a symbol.
- Any data type (string, number, boolean, NaN, object, etc.) can be used as a key in a map.
Syntax:
new Map([iterable]);
Parameter:
- iterable : is optional. When you don’t pass iterable, the Map will be empty and have no elements.
Code:
const myMap = new Map([["one", 1], ["two", 2]]);
console.log(myMap);Output:
So we have created a new Map with key-value pairs of “one”-1 and “two”-2, respectively.
Get the length of a Map in JavaScript
Use Map.prototype.size method
The size accessor property returns the number of elements in a Map object. With this method, we can directly access the length of the Map.
Syntax:
map.size;
Parameter: None.
Code:
<!DOCTYPE html>
<html>
<head>
<title>LearnShareIT</title>
</head>
<div>
<h2>LearnShareIT</h2>
<div>Length of a Map is :<h3 class="map-size"></h3></div>
<button class="btn-show">Show Map size</button>
</div>
<script>
const btn= document.querySelector(".btn-show");
const mapSize= document.querySelector(".map-size");
var exampleMap = new Map([
['age', 10],
['name', "John"]
]);
btn.onclick = ()=>{
mapSize.innerText=exampleMap.size;
}
</script>
</body>
</html>Output:
When you select the Show map size button, the program will use the Map.prototype.size method to get the size of the Map and return the screen to you.
Use for…of method
Syntax:
for (const item of Map){}
Parameter:
- Item: item of Map.
In this way, we will use a way of creating a loop that runs through the elements of the Map using the for (const item of Map) syntax. This way we can count the elements of the Map manually, and the variable length will increment by one when going through an element. Please take a look at the code below to learn more about it.
Code:
const btn= document.querySelector(".btn-show");
const mapSize= document.querySelector(".map-size");
var exampleMap = new Map([
['age', 10],
['name', "John"]
]);
var length = 0;
for (const item of exampleMap) {
length++;
}
btn.onclick = ()=>{
mapSize.innerText=length;
}As you have seen above, we use the length variable to store the length of the Map object and print it to the screen when the Show Map size button is pressed. So we can get the length of a Map in JavaScript. I hope these methods will be helpful to you.
Summary
To summarize, there are 2 ways to get the length of a Map in JavaScript. Let’s try these methods. Good luck for you!
Maybe you are interested:
- How to get a Value of a Map by its Key in JavaScript
- Sort a Map by Value in JavaScript
- Get the Min and Max Values in a Map in JavaScript
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs
