In JavaScript, map is a cluster that consists of some elements in the form of key-value pairs, whereas, a map object is an iterable object that stores these pairs and can be used to display the key-value pairs in the same order they were stored in.
There are multiple map object methods available in JavaScript that are used for tasks such as creating a new map, setting or displaying values in a map, etc. Here in this write-up, we have explained all of the JavaScript map object methods for you.
new Map()
The new map() method as the name suggests is used for creating a new map object.
Syntax
map = new Map([“key”, value]);
Example
In this example, we have demonstrated the working of new Map().
const map1 = new Map();
map1.set(‘a’,100);
map1.set(‘b’,200);
map1.set(‘c’,300);
console.log(map1.get(“a”));
As indicated in the code we are creating a new map by the name “map1”. Moreover we are assigning certain key-value pairs to the newly created map using set() method and lastly we are displaying the value stored in key ‘a’ by using get() method.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-26.png" data-lazy- height="197" src="data:image/svg xml,” width=”641″>
A new map was successfully created.
set()
For the purpose of adding or changing values to an existing map, the set() map object method is used.
Syntax
Example
Suppose you want to change a certain value in an existing map. Use the following code.
const map1 = new Map([
[“coffee”, 100],
[“sugar”, 200],
[“milk”, 300]
]);
map1.set(“coffee”, 150);
console.log(map1.get(“coffee”));
In the above code, a map is created which has certain keys and values stored in it. We are using the set() method to change the value of the first key in the existing map.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-28.png" data-lazy- height="251" src="data:image/svg xml,” width=”651″>
The value of the key “coffee” was changed to “150”.
get()
In order to get/fetch the value of a key in a map, the get() method is used.
Syntax
Example
Let’s display the value of a certain key in an existing map.
const map1 = new Map([
[“coffee”, 100],
[“sugar”, 200],
[“milk”, 300]
]);
console.log(map1.get(“milk”));
Here we have first created a map and by using the get() method we are display the value of the key “milk”.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-30.png" data-lazy- height="219" src="data:image/svg xml,” width=”665″>
The value of the key “milk” was successfully displayed.
size
For the purpose of knowing the number elements that are present in a map, the size property is used.
Syntax
Example
Suppose you want to display the number of elements present in map. Follow the code provided.
const map1 = new Map([
[“a”, 1],
[“b”, 2],
[“c”, 3]
]);
console.log(map1.size);
In the above code, we are creating a map and displaying its size using the size property.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-32.png" data-lazy- height="223" src="data:image/svg xml,” width=”767″>
The elements present in the map are 3.
delete()
For the purpose of deleting a certain element from a map, the delete() method is used.
Syntax
Example
Suppose you want to delete a specific element from a map:
const map1 = new Map([
[“coffee”, 1],
[“sugar”, 2],
[“milk”, 3]
]);
map1.delete(“sugar”);
console.log(map1.size);
In the above javaScript code, we are deleting the “sugar” element from the map and displaying the remaining number of elements using the size property.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-36.png" data-lazy- height="243" src="data:image/svg xml,” width=”574″>
After deleting the “sugar” element, the remaining number of elements are 2.
clear()
The clear() method is used for removing all the elements from a map.
Syntax
Example
Suppose you want to clear all the key-value pairs from a map and display the size of the map after clearing all the values. Use the code below.
const map1 = new Map([
[“a”, 1],
[“b”, 2],
[“c”, 3]
]);
map1.clear();
console.log(map1.size);
In the above code first we created a certain map, then used clear() method to remove all of its elements and displayed the map size using the size property.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-38.png" data-lazy- height="249" src="data:image/svg xml,” width=”659″>
All elements of map1 were removed.
has()
The has() method displays true if a specified key is present in a map and false if not.
Syntax
Example
To evaluate that a certain key is present in a map or not, use the following code.
const map1 = new Map([
[“coffee”, 500],
[“sugar”, 300],
[“milk”, 200]
]);
console.log(map1.has(“banana”);
In the above code, we have created a map and given it certain key-value pairs. Using the has() method we are going to check if there is any key present in the map by the name “banana”.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-40.png" data-lazy- height="217" src="data:image/svg xml,” width=”781″>
The has() method displayed false since there is no such key present in the map.
forEach()
For the purpose of executing a function for each of the elements present in a map, the forEach() method is used.
Syntax
map.forEach((function(value, key));
Example
Suppose you want to display all the key-value pairs present in a map and for doing so you want to execute a function for each of these pairs using the forEach() method.
const map1 = new Map([
[“coffee”, 150],
[“sugar”, 250],
[“milk”, 350]
]);
let txt = “”;
map1.forEach (function(value, key) {
txt = key ‘ = ‘ value “, “
})
console.log(txt);
In the above code, we are executing a function for each key-value pairs present in a map. This function will display each of these pairs.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-43.png" data-lazy- height="335" src="data:image/svg xml,” width=”771″>
Each of the key-value pairs present in the map have been displayed.
keys()
For the purpose of displaying all the keys in a map, the keys() method is used.
Syntax
Example
This example demonstrates the working of the keys() method.
const map1 = new Map([
[“coffee”, 150],
[“sugar”, 250],
[“milk”, 350]
]);
console.log(map1.keys());
In this code, we are using the key() method to get each key present in the map.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-46.png" data-lazy- height="222" src="data:image/svg xml,” width=”645″>
Each key in the map has been displayed successfully.
values()
For the purpose of displaying all the values in a map, the values() method is used.
Syntax
Example
This example demonstrates the working of the values() method.
const map1 = new Map([
[“coffee”, 150],
[“sugar”, 250],
[“milk”, 350]
]);
console.log(map1.values());
We are using the value() method to display each value present in the map.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-48.png" data-lazy- height="216" src="data:image/svg xml,” width=”689″>
All values in the map have been displayed.
entries()
In order to display all the keys as well as values present in a map, the entries() method is used.
Syntax
Example
Follow the example below to understand the working of the entries() method.
const map1 = new Map([
[“coffee”, 150],
[“sugar”, 250],
[“milk”, 350]
]);
console.log(map1.entries());
Here we are using entries() method to display all key-value pairs present in a map.
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-51.png" data-lazy- height="248" src="data:image/svg xml,” width=”885″>
The entries() method is working properly.
Conclusion
There are multiple JavaScript map object methods that allow you to create a new map, set or display values in a map, etc. These methods are set(), get(), delete(), clear(), has(), forEach(), keys(), values(), and entries(). All of these methods serve a different purpose which is explained in detail along with relevant example.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg6225492f0de76.jpg" height="112" src="data:image/svg xml,” width=”112″>
Naima Aftab
I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.
