Before we begin...
What is a Map? The map() function in JS should not be confused with the Map objects. Map are objects that hold elements in key-value pairs. What does this mean? It means every entry in a Map has a key and each key is associated with a certain value.
The Map object remembers insertion order and any type of value can be used as either keys or values.
What Would the Code Look Like?
To start off we would need to instantiate a Map object. To do that we use the new operator with the Map keyword.
let map = new Map;
Basic Functions
Ok so we have our new Map object. Since it is empty let's try adding some key/value pairs to it.
Map.set( )
map.set(0,1);
map.set("a", 56);
map.set("obj",{1:23, 2:78});
map.set("anything here", 01110);
To add values to a Map we use the built in set( ) function. This function takes in two parameters, the key and its value respectively. As mentioned before both of the values passed to this function could be of any type.
console.log(map);
Map.get( )
We can also return the value of a key in a Map using the get( ) function. This function returns the value of the key if the Map has the key and returns undefined if the key doesn't exist within the Map.
console.log(map.get(0));
console.log(map.get('b'));
Map.has( )
Another important function is the has( ) function. This function returns a Boolean function based on the existence of a key in the Map. If the key exists within the Map then it returns true if not it returns false.
console.log(map.has('obj');
console.log(map.has('notObj');
Functions for Deleting Elements
Now that we have covered the most basic Map functions let's take a look at other function we can use on a Map.
Map.delete( )
The delete( ) function takes one parameter. By passing in the value of a key, you can delete that specific key and it's associated value.
map.delete(0);
console.log(map);
Map.clear( )
As the name suggests this function completely clears a Map and leaves it empty.
map.clear( );
console.log(map);
Functions for Getting Iterator Objects
Let us first start by creating a new Map object and adding a few values to it.
let map2 = new Map;
map2.set(0,1);
map2.set(1,2);
map2.set(2,1);
map2.set(3,2);
map2.set(4,1);
map2.set(5,3);
The following functions return iterator objects when called.
Map.entries( )
The entries( ) function returns an iterator object that has each key and value in its own separate array. This means the object returned will have a collection of arrays each consisting of individual keys and their associated values.
console.log(map2.entries( ));
Map.keys( )
This function is very similar to the function above. The only difference is that while the entries( ) function returns both the key and value as a pair, the keys( ) function return only the keys as an iterator object.
console.log(map2.keys( ));
Map.values( )
Again this function is very similar to the entries( ) and the keys( ) functions. While the entries( ) function returns a collection of key/value pairs and the keys( ) function returns a collection of all the keys, the values( ) function returns a collection of all the values as an iterator object.
console.log(map2.values( ));
The use of the iterator objects is that you can iterate through them using a for...of loop.
for(let i of map2.keys()){
console.log(i);
}
Well done! Now you know the basics of Maps in Javascript to dive deeper take a look here.
