As JavaScript programmers, we are all familiar with the object data type, as it is commonly used in our daily work. In essence, an object can store data in key-value pairs, but the data is stored in an unordered manner. However, in ES6, we were introduced to the Map data type, which is similar to an object but has a few differences. In this discussion, we will explore the differences and advantages of Map and learn how to create a new Map and delete an item from it.

1. What is Map?
2. Creating new Map
3. Map methods
4. Deleting item from Map

The Map data type also allows us to store data in key-value pairs, as we mentioned earlier. However, there are some notable differences between Map and objects. Firstly, in objects, we are limited to using strings only as keys. Even if we use a number as a key, it will be automatically converted to a string.

However, this limitation is removed in Map. We can use any data type, such as strings, numbers, etc., as keys. Additionally, Map preserves the original insertion order, which is not the case for objects. Although there are other differences, they are not the main topic of this article.

Now, let's discuss how to create a new Map with the help of the following example:

    var nameMap = new Map([
        ["firstname", "kowcher"],
        ["lastname", "chy"],
    ]);
    
   console.log(nameMap ) // Map { 'firstname' => 'kowcher', 'lastname' => 'chy' }

To create a new Map, there is only one way: by calling its constructor, new Map([iterable]). This means that we need to use another array in which we set the values like this: [key, value]. If we put it all together, the basic syntax will look like this: new Map([[key, value]]).

Another characteristic of Map is that we can use each key only once. In other words, keys in Map are unique and cannot be duplicated. If we try to do so, we will only get the last key used.

Once we have created a new Map, we can add a new key-value pair to it by using set(key, value). Now, let's add a new pair to our existing nameMap.

nameMap.set("website", "shoutsdev")
console.log(nameMap ) // Map { 'firstname' => 'kowcher',
  'lastname' => 'chy',
  'website' => 'shoutsdev' }

We can chain multiple Map.set() methods to add more than one key-value pair at a time. Additionally, Map has many helper functions that we can use. For example, we can use Map.has('key') to check if a Map has a particular key. Similarly, we can use get('key') to access a particular value.

In Map, we can also use Map.keys(), Map.values(), and Map.entries() to iterate and access the key-value pairs. Even though Map looks like an object, we can still use Map.forEach and for...of loops with it. How cool is that?

console.log(nameMap.get('firstname')); // kowcher
console.log(nameMap.has('firstname')); // true
console.log(nameMap.has('name')); // false

 To delete a entry from map we can simply use  .delete('key'). where key will be passed as parameter.

nameMap.delete('lastname')
console.log(nameMap); // Map { 'firstname' => 'kowcher', 'website' => 'shoutsdev' }

But what if we want to delete n-th item of this Map? In that case, we need to convert our Map to an Array just like this. 

const nameArray = Array.from(nameMap); // create a new array from nameMap
console.log(nameArray); // [ [ 'firstname', 'kowcher' ], [ 'website', 'shoutsdev' ] ]

const deleteElm = nameArray[1]; // selecting a item
nameMap.delete(deleteElm[0]) // [0] is used to select key then deleting that by that key 

console.log(nameMap); // Map { 'firstname' => 'kowcher' }

In this article, we have provided an overview of Map and compared it to its similar counterpart, the object data type. We discussed the differences between Map and objects, how to create a new Map, and how to add key-value pairs to it. We also touched upon some of the helper functions available in Map and its iteration methods.

We hope you found this article informative and enjoyable. If you have any difficulties understanding the topic or would like us to cover any other topic, please feel free to leave a comment.