JonathanRayGarcia.com

Maps are datastructures in javascript that allow you to store key-value pairs. They are very similar to standard javascript objects, but they have unique differences that make them very helpful tools in certain scenarios.

The more interesting and useful feature of a Map is that you can use almost any data type as the key.

const myMap = new Map();

If you looked over the previous post about Set's, Map's have a very similar API. And similar to Sets we create a new Map with the new keyword.

Map's are different than Set's though, in that you can store any duplicated data in them. But what really makes them stand out is accessing a map value runs at constant time, because they are in essence a hash map.

The basic API features for Map that we will cover here are:

• .set - which allows us to set a key-value pair in the map
• .has - which allows us to check if a key exists in the map
• .get - which allows us to get a value from the map
• .delete - which allows us to delete a key-value pair from the map
• .clear - which allows us to clear all key-value pairs from the map
• .size - which allows us to get the size of the map
• .forEach - which allows us to iterate over the map

As you can see, there there are a few additional basic features that were not present when we went over Set's.

const myMap = new Map();
myMap.set('name', 'Jonathan');
myMap.set('favoriteColor', 'red');

In this example you can see how we add a new value to the may. We call the .set method on the map and pass in two properties, a key and a value associated with that key.

Now let's confirm we have the value in the Map by using the .has method.

const myMap = new Map();
myMap.set('name', 'Jonathan');

console.log(myMap.has('name')); // true
console.log(myMap.has('favoriteColor')); // false

In this example, we create a new Map and set a name property. Then we check if the Map .has that key. If the key exists in the Map we get a true value back, otherwise we get a false value.

Now let's see how we can actually access the value from the Map using the .get method.

const myMap = new Map();
myMap.set('name', 'Jonathan');
console.log(myMap.get('name')); // Jonathan
console.log(myMap.get('favoriteColor')); // undefined

You can see from this example that we can access the values in a Map by calling .get and passing in the key we are looking for. If the Map contains that key you will get the value back, otherwise you will get undefined.

Next, let's look at how to remove a single entry from the Map using the .delete method.

const myMap = new Map();
myMap.set('name', 'Jonathan');

console.log(myMap.delete('name')); // true
console.log(myMap.has('name')); // false

console.log(myMap.delete('favoriteColor')); // false
console.log(myMap.has('favoriteColor')); // false

In this example we again create a new Map and set a name property. Next we call .delete and pass the key of the key-value pair we wish to remove from the Map. Finally we can call .has to confirm that the item has been removed. A quick note here, when you .delete from a Map, the .delete call will return a boolean value indicating if the item existed in the Map or not. So if you try to delete a key that does not exist, you will get a false value back.

Now that we can .delete a single entry from a Map, let's see how we can remove everything from a Map.

const myMap = new Map();
myMap.set('name', 'Jonathan');
myMap.set('favoriteColor', 'red');

console.log(myMap.has('name')); // true
console.log(myMap.has('favoriteColor')); // true

myMap.clear();

console.log(myMap.has('name')); // false
console.log(myMap.has('favoriteColor')); // false

Here you can see that we again create a new Map and set two properties, name and favoriteColor. We then check that these values exist on the Map by calling .has with those to keys.
Once we have confirmed that the keys exist in the current Map, we call .clear to remove everything from the Map. Then we chack the Map with .has again to validate that everything has been removed from the Map.

Another useful feature of Map's is that you can get the size of the Map using the .size property. This will return the number of key-value pairs in the Map.

const myMap = new Map();
myMap.set('name', 'Jonathan');
myMap.set('favoriteColor', 'red');

console.log(myMap.size); // 2

myMap.delete('name');

console.log(myMap.size); // 1

myMap.clear();

console.log(myMap.size); // 0

Just like with Set's, the .size property is not a function but is an intrinsic property of the Map. We don't need to call a function but just need to access the size proptery. In the above example you can see that we creat a new Map and add two key-value pairs to the Map. Once we have added some data to the Map we then check the size of the Map, which at this point is 2. We then .delete one property and recheck the .size, which is now 1. Finally we call .clear to remove everything from the Map and check the size again, which is now 0.

Phew, now that we can add, remove, and check the size of a Map, let's look at a way to iterate over a Map useing .forEach.

const myMap = new Map();
myMap.set('name', 'Jonathan');
myMap.set('favoriteColor', 'red');
myMap.set('someOtherKey', 'someOtherValue');

myMap.forEach((value, key) => {
console.log(`Key: ${key}, Value: ${value}`);
});

Once again, this is very similar to the Set's .forEach method. We start again by creating a new Map and adding a few properties to it. Next we call .forEach and pass in a callback to access the key and value of each item in the Map. The callback function accepts two parameters, the value and the key that we have access to. We can then use the key and value in the callback to do whatever you need to do with those values.

With that done we have now covered the basic features of Map. Now it's time to get out there and start Mapping data!