In JavaScript, different data structures like arrays and objects are used to store the collections of data. In JavaScript, key-value pairs can be stored in the objects. ECMAScript 2015 offers a new iterable object named maps that provides more flexibility by means of storing the elements as key-value pairs.
This post will present a detailed overview of the Map object and it will be organized as follows:
- What is a Map object?
- How to create a map object?
- Map object Methods in JavaScript.
- How to delete map elements?
- How to get the key’s value in a map?
- How to get number of map elements?
- How to retrieve keys from a map object?
What is a Map object?
The below listed points will assist you to understand the concept of map object:
- It is a collection of items/elements.
- It can hold/store the key-value pairs.Â
- It maintains the insertion order of the key-value pair.Â
- Keys in a Map object can be of any data type such as numbers, strings, objects, etc.Â
How to create a map object?
A map object can be created either using a new map() constructor or the set() method. We will understand the working of each method one by one.
How to create a map object using the New map() constructor?
In JavaScript, we can create a map object using a new map() constructor. To do so, we have to pass an array of elements to the new map() method:
1 2 3 4 5 6 7 8 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); console.log(stdDetails); |
Now, let’s execute the above code to see what will be the resultant output:
This is how the new map() method works in JavaScript.
How to create a map object using the set() method?
Another way of creating a map object is set() method that allows us to add elements to a map.
1 2 3 4 5 6 7 | var stdDetails = new Map() stdDetails.set(1, "Alex"), stdDetails.set(2, "Dean"), stdDetails.set(3, "Joanes"), stdDetails.set(4, "John"), stdDetails.set(5, "Joe"), console.log(stdDetails); |
The above given piece of code will produce the below given result:
The output clarified that the map object with five elements had been created successfully.
Map object Methods in JavaScript
The below-given table will illustrate the map methods and their working in JavaScript:
| Method | Description |
|---|---|
| new Map() | It is used to create a new map object. |
| set() | The set() method sets the key’s value in a Map. |
| get() | This method is used to get a value linked with a specific key in the Map. |
| delete() | It deletes a Map element associated with some specific key. |
| clear() | It deletes/clears all the map elements. |
| forEach() | It invokes a callback for every single key/value pair present in the Map |
| has() | It is used to check if a specific key exists in the Map. |
| keys() | This method is used to get the Map keys. |
| entries() | It returns an iterator object that consists of a [key, value] pair present in a Map. |
| values() | This method returns an iterator object containing all Map values. |
Once the map object is created, you can use any of the above-mentioned methods to achieve various functionalities.
How to delete map elements?
In JavaScript, the delete method can be used to remove map element as shown in the following code snippet:
1 2 3 4 5 6 7 8 9 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); stdDetails.delete(3); console.log(stdDetails); |
In this example, we passed 3 to the delete() method, which will remove the map element that has id 3:
This is how we can delete a specific map element, however, in JavaScript, the clear() method can be used to delete all map elements:
1 2 3 4 5 6 7 8 9 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); stdDetails.clear(); console.log(stdDetails); |
Here is the output for the clear() method:
How to get the value of a key in a map?
In JavaScript, the get() method can be used to get a value associated with a key in the Map as shown in the below-given code snippet:
1 2 3 4 5 6 7 8 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); console.log(stdDetails.get(5)); |
The get() method will produce the following output:
How to get the size/number of map elements?
In JavaScript, the map object has a property named size that can be used to get the number of elements in a map.
1 2 3 4 5 6 7 8 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); console.log(stdDetails.size); |
The size property will generate the following output:
This is how you can get the size of a map.
How to retrieve keys from a map object?
In JavaScript, the key() method can be used to get the keys of a map object:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var stdDetails = new Map([ [1, "Alex"], [2, "Ambrose"], [3, "John"], [4, "Clarke"], [5, "Jones"] ]); var string = ""; for (var items of stdDetails.keys()) { string += items + "\n"; } console.log(string); |
Now, let’s execute the above code to see what will be the resultant output:
This is how we can utilize any map() object method to achieve different functionalities.
Conclusion
Map object in JavaScript is a collection of elements that can hold/store the key-value pairs. Keys in a Map object can be of any data type such as numbers, strings, objects, etc. The Map object maintains the order of the key-value pair. The map object offers numerous methods that are used for various purposes. This post explained what exactly the map object is and how to use the map object methods to achieve different functionalities.
