Welcome back to my Javascript series (newly created)

As you all know, objects are used to store multiple values ​​as a complex data structure.

An object, when created, is usually surrounded by two pointy marks {...} accompanied by a list of properties. A property is a key – value pair in which the key is always a string , and the value can carry any type .

And arrays are an ordered array and contain data of any type. Arrays are usually initialized with square brackets [...] , and duplicates in arrays are allowed.

Until ES6 (ECMAScript 2015), in JavaScript objects and arrays are the two most important data structures for handling data, which we do on a daily basis. these two guys.

However, it also has a few inconveniences to use:

• The objects key has only types of string .
• When you insert elements, the objects will not be able to maintain the order of elements .
• It is not possible to calculate the length of an object easily.
• Arrays are sets of elements that allow duplication. Support for arrays only has separate elements and forces us to add processing logic.

And to solve the shortcomings of the Map and Set was born. In this article, I will together with you to learn both and how to use them in different cases.

Map:

Map is a collection of key – value pairs in which the key can be of any type. Map remembers the original insertion order of its elements, meaning that data can be retrieved in the correct order it was inserted.

We can initialize Map as follows:

Can also initialize with initial Value:

To add value for Map we do the following:

As you can see above, I used set (key, value) to add value to the map .

set (key, value) has two parameters passed as key and value , key and value can be any type of value (boolean, string, number, …) or an object.

NOTE: If you set an additional value with the same key, it won’t add new, but rather insert that value on top of the old value.

How to get value out of Map:

Simply put, you do the following:

About Map keys:

Map keys can be of any type. This is also one of the differences of Map with regular JavaScript objects (keys can only be a string).

For example :

Properties and methods of Map:

The map has built-in properties and methods to use:

• To know the size, we use the size :

• If we want to find an element, we use has with the parameter passed as the key of that element, has will return true if there is that element and vice versa:

• To remove an element, we use delete with param still key:

• To delete all elements in the Map, we use clear :

MapIterator: keys (), values ​​(), and entries ():

The methods keys () , values ​​( ) and entries () return a MapIterator, which is very useful in accompanying for-of or foreach.

We create a new Map as follows:

• Get all the keys we do as follows:

• Similarly want to retrieve all values:

• Finally, to get all the keys and values ​​we use entries ():

Use in conjunction with for-of and foreach:

How to convert an Object into a Map?

Want to convert back is also easy:

Converting a Map into an Array?

Conclusion of part 1: When to use Map, when to use Object:

Map has properties of both object and array . However, Map is more like an object than an array due to the nature of storing data in key-value form .

In my opinion, you should use Map when:

• When you want your returned data is not simple, and you want to create your keys is not a String .
• The returned data is the elements that are ordered. Objects cannot maintain order.
• With very useful methods like has () , values ​​() , delete () , or a size , the Map makes it much easier for you to perform operations. This helps us to minimize the use of third party support packages like lodash .

And Objects when:

• You do not have a need as above =))

Above is my research about the Map, if it feels good, please follow and upvote for me so that I can be active when I continue to write part 2 (Part 2 will talk about Set).