Map is one of the important pieces of knowledge when using JavaScript. In this tutorial, we will introduce you to JavaScript Maps in detail.
What is JS Maps
In JS, Map can be considered as a data structure stored in the form of Key – Value. This may cause some users when learning to confuse Map and Object. However, when distinguished, the object will only accept String or Symbol values as Key. While Map can accept all data types.
How to create JS Maps
Two commonly used ways when you want to create a Map in JS are:
Using new Map(): we will pass new Map() a valid array.
For example:
const cars = new Map([
["Chevrolet", 200],
["Toyota", 300],
["BMW", 300]
]);
or
const students = new Map(); // an empty map
Using Map.set(): Add element values directly to Map via set(). This way you can also change the values in the Map.
For example:
cars.set("Chevrolet", 200);
cars.set("Toyota", 300);
cars.set("BMW", 300);
Commonly used methods in JS Maps
Method | Description |
new Map() | creates a Map with an iterable object parameter (optional) with each element of the form [key, value]. |
set() | stores the value by key and returns a map. |
get() | returns the value by key, if the key does not exist, returns undefined. |
delete() | deletes the value corresponding to the key and returns true if the key exists, otherwise returns false. |
has() | returns true if the key exists, false otherwise. |
forEach() | Use when you want to call a function for a key-value pair in a map. |
map.size | Returns the number of elements in Map |
Add element to Map
To add an element to a Map in JavaScript, you can use the set method, with the syntax:
map.set(key, value);
This method assigns a value to the key key inside the Map.
If the key does not exist, Map creates a new element with the corresponding Key. Otherwise, if the key already exists, Map will assign a new value to it.
Get the value of an element in Map
To get the value corresponding to the key of the map in JavaScript, you can use the map.get(key) method as follows:
cars.get("BMW"); // Returns 300
If the key exists in the Map, the map.get(key) method returns the corresponding value, otherwise it returns undefined.
Get the number of elements in Map
To get the number of Map elements in JavaScript, you use the map.size() method, for example:
cars.size; // Return 3
// empty map
const students = new Map();
console.log(students.size);
// 0 - empty array
Check element exists in Map
To check if an element in a Map exists – essentially checking if a key value exists, you can use the has method as follows:
map.has(key);
If there is a key in the Map, the map.has(key) method returns true, otherwise it returns false.
For example:
const cars = new Map([
["Chevrolet", 200],
["Toyota", 300],
["BMW", 300]
]);
cars.has("BMW"); // True
cars.has("Audi"); // False
Delete an element in Map
To delete an element in a Map, you use the delete method:
map.delete(key);
If the Key exists in the Map, the element corresponding to the Key will be removed from the Map. The map.delete(key) method returns true if the key exists, false otherwise.
const cars = new Map([
["Chevrolet", 200],
["Toyota", 300],
["BMW", 300]
]);
// delete element with key "BMW" - exists
cars.delete("BMW"); // true
// after deleting, map does not exist BMW element
cars.has("BMW"); // False
Remove all elements in Map
Above is how to remove an element from a Map. To remove all elements from the Map, you use the clear() method:
const cars = new Map([
["Chevrolet", 200],
["Toyota", 300],
["BMW", 300]
]);
// delete all elements
cars.clear();
// map becomes empty
console.log(cars); // Map(0) {}
Iterate elements in Map
The following are ways to iterate over Map elements in JavaScript.
Using for…of
Map is an iterable object. Therefore, you can use for…of to iterate over the elements of a Map.
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
for (const item of mymap) {
console.log(item);
}
/*
* [5, "x"]
* [4, "y"]
* [3, "z"]
*/
Using the forEach method
You can also use forEach to iterate over the elements of the map as follows:
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
mymap.forEach((value, key, map) => {
console.log(value, key, map);
});
/*
* x 5 Map(3) {5 => "x", 4 => "y", 3 => "z"}
* y 4 Map(3) {5 => "x", 4 => "y", 3 => "z"}
* z 3 Map(3) {5 => "x", 4 => "y", 3 => "z"}
*/
map.keys() method
Returns an iterable object containing the key values of the elements in insertion order.
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
for (const key of mymap.keys()) {
console.log(key);
}
/*
* 5
* 4
* 3
*/
map.values() method
Returns an iterable object containing the values of the elements in insertion order.
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
for (const value of mymap.values()) {
console.log(value);
}
/*
* x
* y
* z
*/
entries() method
Returns an iterable object whose corresponding element is an array [key, value].
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
for (const item of mymap.entries()) {
console.log(item);
}
/*
* [5, "x"]
* [4, "y"]
* [3, "z"]
*/
Convert Map to Array
Here are some ways to convert a map in JavaScript to an array using spread syntax.
Convert Map keys to Array
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
const keys = [...mymap.keys()];
console.log(keys);
// [5, 4, 3]
Convert Map values to Array
const mymap = new Map([
[5, "x"],
[4, "y"],
[3, "z"],
]);
const values = [...mymap.values()];
console.log(values);
// ["x", "y", "z"]
Common situations when working with Maps
- Get the Min and Max Values in a Map in JavaScript
- Get the Length of a Map in JavaScript
- How to check if a Map is Empty in JavaScript
- How To Merge Maps In JavaScript
- Sort a Map by Value in JavaScript
- Iterate over a Map in Reverse Order using JavaScript
- How to Filter a Map in JavaScript
- How to get a Value of a Map by its Key in JavaScript
- How to Convert a Map to JSON using JavaScript
- How to Get the First Element of a Map in JavaScript
- Check if a Value exists in a Map using JavaScript
- Sort the Keys in a Map using JavaScript
- Convert a Map to an Object in JavaScript
- How to iterate a Map using JavaScript
- Check if a Map has an Object Key using JavaScript
Summary
In conclusion, we’ve covered each specific method when working with JavaScript Maps. Hope the above article will be useful to you. To learn more about JavaScript you can visit our LearnShareIT website. Thanks for reading!

Hi guys, wellcome to LearnShareIt. I’m Tiffany and I’m also who responsible for the quality of this website’s content. I previously worked on software development projects for ten years as a developer. Hopefully, our project will bring a lot of value to the community.
Job: Programmer/Project management
Major: IT
Programming Languages: Python, C, HTML, MySQL, SQL Server, C#, C++, Javascript, CSS, Java, VB