Understanding the Javascript Map

Introduction to Map in Javascript

A map object holds key-value pairs where values of any type can be used as either keys or values. We can create a new map by using the following syntax:

The Map() method accepts an optional iterable object as an argument, whose elements are key-value pairs

Handy Map Methods

• clear() - removes all elements from the map object.
• delete(key) - removes the element with the specified key from the map object.
• entries() - returns a new Iterator object that contains the [key, value] pairs for each element in the map object.
• forEach(callback[, thisArg]) - calls a function for each [key, value] pair in the map object.
• get(key) - returns the value associated with the specified key.
• has(key) - returns true if the map object contains the specified key.
• keys() - returns a new Iterator object that contains the keys for each element in the map object.
• set(key, value) - adds or updates an element with a specified key and value to the map object.
• values() - returns a new Iterator object that contains the values for each element in the map object.

Example: Create a new Map Object

If we have a list of user objects as follows:

We can create a map of user roles by writing the following:

the userRoles is an instance of the Map object

Add elements to the map

We can use the set() method to add elements to the map.

The set() method accepts two arguments, the key and the value. The method maps the user john with the admin role. Also, since set() is a chainable method, we can add more elements to the map.

Initialize a map with an iterable object

In the following example, we create a map object with an iterable object.

Get a value from the map by its key

If the key is present in the map, the get() method returns the value associated with the key, otherwise, it returns undefined.

Check if a key is present in the map

Get the number of elements in the map

Iterate over map keys

To get all the keys on the map, we can use the keys() method. The keys() method returns a new Iterator object that contains the keys for each element in the map object.

Iterate over map values

To get all the values in the map, we can use the values() method. The values() method returns a new Iterator object that contains the values for each element in the map object.

Iterate over map entries

To get all the entries in the map, we can use the entries() method. The entries() method returns a new Iterator object that contains the [key, value] pairs for each element in the map object.

We can also use the forEach method to iterate over the entries of a Map. We can also use the forEach method to iterate over the entries of a Map.

Convert map keys or values to an array

We might want to work with the keys of a map as an array. We can convert the keys of a map to an array by using the keys() method.

We can convert the values of a map to an array by using the values() method.

Delete an element from the map

Delete all elements from the map