Maps in JavaScript
Tags: Array Methods, Javascript Development, JavaScript, Arrays, Maps

Maps in JavaScript

What topics we are going to cover?

What are Maps? What are the methods used in it and how we can insert or retrieve values to it? How Maps works, behave with loops and what is happening behind the scenes?

What are Maps?

By the word Map, here I mean another new method which is being used these days in modern JavaScript. Here we are going to see the classic dataType of Map. Mostly Map is getting used in looping concepts that’s a great thing, but if you go directly for all those then you won’t be able to understand the classic dataType of Map.

So let’s fire up our code editor and understand the concepts of Map with some amazing examples.

var myMap = new Map();

This is almost kind of constructional approach, where we create an object from prototype and stuff like that.

What are the methods used in Maps?

Now Map has a lot of properties and I think you should take a look at it, at once. So whenever you gonna type myMap. then you can see a list of methods will be appearing on your screen like- get, set, forEach, values, and bunch of things. So one of the common methods which are being used widely is set and get method and by this time I guess from its name itself you might have guessed it like these are some default setters and getters means it can add values to them and retrieve values from them.

How to insert values in Maps?

Let’s go ahead and try with set() method and have some of the fun together:

Note: They work almost like objects but remember this, Maps are not like objects, they are completely different.

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) console.log(myMap);

Now if you try to run this code in your editor, then you gonna see an output like this on your screen.

Map(4) { 1 => 'Ricky', 2 => 'Monty', 3 => 'Henna', 4 => 'Monta' }

Notice here, how Maps by default itself is telling you that how many properties you are storing in it and one more thing you can see here they have used => these arrow between its key, value pair to differentiate, and make you understand that they are not your regular objects.

How to retrieve values from Maps?

So, the next thing will see how to grab values from these Maps. yes, there is no shortage of methods to get it but, first will try to get all the values from them, then we can go for more digging and see how to retrieve a single value.So let’s go and get started.

For…of loop:

The classic way is to use for...of loops in the Maps as well. Let’s see how we can make use of them.

Get Keys alone, using for…of loop:

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //console.log(myMap); //get all Keys

for(let key of myMap.keys()){ console.log(`key is ${key}`) }

Here we have declared a let key then we use of then myMap and to get all keys from myMap we have used a method on it keys(), notice this keys() is a method which we are calling on our Map like myMap.keys() . Then inside that loop, we simply log the variable key, which actually automatically loop every single key available in the Map then get the output print on our screen.

//Output:

key is 1

key is 2

key is 3

key is 4

Get Values alone, using for…of loop:

What if we just need the values from our Map? Then we just need to use the inbuilt method values() on our Map instead of keys() .How we gonna do that? Simply just follow along with me in the below code:

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //console.log(myMap); //get all values

for(let value of myMap.values()){ console.log(`value is ${value}`) }

Now here we have values alone, but now the issue is what if I need both of them together, I mean all keys and values together. Now here some of the confusion kicks in.

Get Keys, Values both, using for…of loop:

So, we can go with the same set of for..of loop, just need to do some adjustments in it, let's see it together.

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //get both keys,values for(let [key, value] of myMap){

console.log(`Key is: ${key} and Value is: ${value}`) }

Notice here we have declared the let in form of an array, with key-value pair in it like- let[key, value] and since we are grabbing both keys, values then we don’t need any method on our myMap it’s just myMap . Now you run it, you gonna see an output like:

//Output:

Key is: 1 and Value is: Ricky

Key is: 2 and Value is: Monty

Key is: 3 and Value is: Henna

Key is: 4 and Value is: Monta

Now, you might be asking hey what’s the confusion in that? it’s really very simple and easy.

Understanding Maps, with forEach() loop:

So, let me show you the confusing part as well. What happens if myMap has access to forEach() as well like:

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //testing with forEach

myMap.forEach( (key) => console.log(`${key}`));

When you run it you can see an output like:

//Output:

Ricky

Monty

Henna

Monta

Here, you come, you can see some results on your output window but notice I asked for key in the code but I am getting all values alone, why is that?

By classic way of approaching Maps, I mean with for...of loop we can easily get keys, but if we go with the modern approach, I mean with forEach() hereby default this forEach loop is designed is such a way that it assumes, you will be doing something with values alone and not the indexes. Here in the Maps, the keys are considered as indexes, that's why it doesn't give you directly the key. So it's not good to go with keys with forEach() loop, rather go with values alone.

NOTE: forEach() loop always gives you the value first.

Now, you got an idea that how inner working is going on. But, if you want both of them (key, value) then maybe you can pass two params in forEach() like:

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //testing forEach loop myMap.forEach( (value, key) => console.log(`The value is: ${value} and the key is: ${key}`));

Now, If you gonna run this, then you can see the values first and then the key from the myMap .

//Output The value is: Ricky and the key is: 1

The value is: Monty and the key is: 2

The value is: Henna and the key is: 3

The value is: Monta and the key is: 4

Tip: It’s very important to know what loop gonna give what thing first, like here for...of loop gonna give key first, but forEach() always gonna gives you the value first.

How to delete a value, in Maps?

Apart from this, we can have some more fun on Maps, like we can delete any of the pair from our Map, by just passing its key to the delete() method like:

var myMap = new Map();

myMap.set(1, "Ricky"); //myMap.set(any key, any value)

myMap.set(2, "Monty"); //myMap.set(any key, any value)

myMap.set(3, "Henna"); //myMap.set(any key, any value)

myMap.set(4, "Monta"); //myMap.set(any key, any value) //delete method

myMap.delete(2); console.log(myMap);

So In the output, you can see some differences.

//Output

Map(3) { 1 => 'Ricky', 3 => 'Henna', 4 => 'Monta' }

Yes, the key with value 2 is gone now.