You can use any data type (primitives and objects) as either a key or a value. The Map object remembers the original order of insertion, although you’ll typically access values by their key.
In this article, you’ll learn about ten JavaScript Map methods that you should master today.
1. How to Create a New Map in JavaScript
You can create a new Map object using the Map() constructor. This constructor accepts one parameter: an iterable object whose elements are key-value pairs.
Output:
If you don’t supply the parameter, JavaScript will create a new empty Map.
Output:
If you try to create a Map with duplicate keys, each repeated key will overwrite the previous value with the new value.
Output:
Here, the value stored against the key2 key is newValue2, not the earlier value2.
You can also create a Map object that holds key-value pairs using mixed data types.
Output:
2. Add New Elements to a Map Object
You can add a new element to the Map object using the set() method. This method accepts a key and a value, then adds a new element to the Map object. The method then returns the new Map object with the added value. If the key already exists in the Map, the new value will replace the existing value.
Output:
You can also use variables or constants as keys or values:
Output:
The set() method supports chaining.
Output:
3. Remove All Elements From a Map Object
You can remove all elements from a Map object using the clear() method. This method always returns undefined.
Output:
4. Delete a Specific Element From a Map
You can remove a specific element from a Map object using the delete() method. This method accepts the key of the element to delete from the Map. If the key exists, the method returns true. Otherwise, it returns false.
Output:
5. Check if an Element Exists in a Map
You can check whether an element exists in a Map object using the has() method. This method accepts the key of the element as a parameter to test for presence in the Map object. This method returns true if the key exists. Otherwise, it returns false.
Output:
An element with key 1966 exists in the Map object, so the method returned true. But, since there’s no element with key 1977 in the Map object, the method returned false from the second call.
6. Accessing the Value for a Specific Key
The get() method returns a specific element from the Map object. This method accepts the key of the element as a parameter. If the key exists in the Map object, the method returns the value of the element. Otherwise, it returns undefined.
Output:
An element with key 1966 exists in the Map object, so the method returned the value of the element. There’s no element with key 1988 in the Map object, so the method returned undefined.
7. Access a Map’s Entries via an Iterator
According to the official MDN Web Docs:
You can access each element of the Map using this iterator and a for…of statement:
Output:
Or you can use the ES6 destructing assignment feature to access each key and value:
Output:
8. How to Iterate Over a Map’s Values
The values() method returns an Iterator object that contains all the values in a Map, and it does this in insertion order.
Output:
9. Iterate Over a Map’s Keys
The keys() method returns an Iterator object that contains all the keys in a Map, and it does this in insertion order.
Output:
10. Iterate Over Elements in a Map Using a Callback
The forEach() method invokes a callback function for each element of the Map object. The callback function takes two parameters: the key and value.
Output:
Now You Know About Maps in JavaScript
Now you have enough knowledge to master the concept of Maps in JavaScript. The Map data structure is widely used in many programming tasks. Once you’ve mastered it, you can move on to other native JavaScript objects like Sets, Arrays, and so on.
