Javascript’s ES6 has nothing quite new in our eyes without syntax differences, or syntactic sugar. But this time we will discuss something completely new. Yes this thing has been added to ES6 completely new. It never existed in any previous version of JavaScript. That’s the map Map.

Do not mistake this map Mapas a map map. The reason mapis a method. But the map we Mapwill talk about here today is a data structure. The new introduction has been introduced to developers in the ES6 version of JavaScript. But this is a bit different from the object type data structure. It has its own method, its own properties. The map can also access all kinds of functions, booleans, integers, characters, strings. So we will discuss this in detail today.

Map ( Map)create:

Taking a new map: If we want to take a new map data structure, we can take it like this:

const bName = new Map()

Diameter! There bNamea map called. Now inside the map there are keys and values. If we want to put any new value inside this map:

bName.set('fullName', 'Bipon Biswas');

Now if you want to access any data from the map, there is another method. Want to know bName fullName

bName.get('fullName')

Again we can also check if there is a specific value in our map:

bName.has('fullName');

Since our map fullNameis what it is, it will be true:

Now if that is not the case then it will be false:

bName.has('something');

Now we can delete any such pair from the map if we want. First, we have not added another new pair:

bName.set('sajib', 'biswas')

Now if you want to double check whether the new pair has been added to the map:

bName.has('sajib');

Now we want sajibdelete this removal:

bName.delete('sajib');

Diameter! Deleted. Now if I check this is sajibthere:

bName.has('sajib');

That would be a lie, because we’ve already deleted it from our map

Now we bNamecan clear the entire map if we want :

bName.clear();

Now if you check bName, nothing can be found inside:

console.log(bName);

Suppose we have a map like the following with a few elements:

const boxItem = new Map();

Now put some elements inside it:

boxItem.set('name', 'Bipon Biswas');
boxItem.set('job', 'student');
boxItem.set('color', 'blue')
boxItem.set('os', 'windows')
boxItem.set('mobile', 'iOS')
boxItem.set('city', 'dhaka')

Now you will find boxItem all the data inside this map:

console.log(boxItem);

If we want to know how many elements inside the map we can find the properties of the map size: Now we can also loop in the map if we want:

console.log(boxItem.size);

boxItem.forEach((value, key) => console.log(`Key is: ${key} and the value is: ${value}`));

forEach In the second argument in the method, we usually get the index but here in the case of the map we get the key of the map:

Likewise, we can for…ofalso run a loop:

for(let [key, value] of favorite.entries()) {
   console.log(`Key is: ${key} and the value is: ${value}`);
}

Note: One of the important differences is also that you’re able to use anything for the keys. You’re not just limited to primitive values like symbols, numbers, or strings, but you can even use functions, objects and dates – too. Keys won’t be casted to strings like with regular objects, either.

var map = new Map()
map.set(new Date(), function today () {})
map.set(() => 'key', { pony: 'foo' })
map.set(Symbol('items'), [1, 2])

This is how we can use the newly introduced map in JavaScript ES6. Now, is there more to it than other data structures? Yes this is

In the Map Data Structure:

1. We can easily run the loop.

2. We can find out the size of the map

3. Finally, it is much easier to insert or delete data from the map.

Reference Source