JavaScript

Maps in JavaScript | Explained

Maps in JavaScript are also a type of structured data storing similar to objects and arrays. However, Maps bring out the best of objects and arrays. Maps store data in key-value pairs much like an object with the difference being that the key in Maps can be of various data types. Map stores data in a preserved order, making it similar to an array with the difference being key-value pairs instead of indexed values.

Maps were released in the ES6 version of JavaScript which is also known as the ES2015 Js. Maps are mostly used because they provide flexibility to the programmer.

Syntax of Maps

To initialize a new map, you will use the following syntax:

var map = new Map();

As you can see, we create a new Map by calling its constructor function by using the keyword “new”.

How to work with Maps?

Let’s create a new map variable by using the following line:

var dataSet = new Map();

You have created new dataSet in which you can store various types of information, to put values inside a map you use the set method. The syntax of the map’s set method is as:

map.set( key ,"value") ;

Now you know the syntax, so let’s try putting in some values inside the map with the following lines of code:

dataSet.set(1, "English");
dataSet.set(2, "Spanish");
dataSet.set(3, "French");

As you can see, you have added three key-value pairs inside the map, you can verify it by printing out the map using the console.log() function like:

console.log(dataSet);

The whole code snippet is as

var dataSet = new Map();

dataSet.set(1, "English");
dataSet.set(2, "Spanish");
dataSet.set(3, "French");

console.log(dataSet);

After running this code, you will see the following output on your console:

Note that there is an interesting thing inside the output that differentiates a map from an object, In Objects, key-value pairs are separated by a colon “:” while in the case of Maps, the key-value pairs are separated by an arrow “=>”.

Iterating through a Map

You have multiple ways of iterating through the map, one of the traditional ways is to use the for-of map.

Fetching Keys of the Map

You can iterate through the keys of the map by using the following lines of code:

for (keys of dataSet.keys()) {
  console.log(`Keys are : ${keys}`);
}

The output is as

Fetching Values of the Map

To iterate through the values of the map, you can use the following lines of code:

for (Values of dataSet.values()) {
  console.log(`Values are : ${Values}`);
}

The output is as

Fetching keys and values as a pair

if you want to get both keys and values as a pair, well you can do that by using the following lines of code:

for ([keys, values] of dataSet) {
  console.log(`Key is : ${keys} and Value is : ${values}`);
}

Getting a specific value from a specific key

You can even get a specific value from a map using the get method, try the following line of code:

console.log(dataSet.get(1));

You will get the following output:

As you can see, you were able to get the value of a specific key using the get method.

Various Types of Keys

As mentioned above, that a map can have various types of keys which is the main feature that differentiates a map from a simple object. Let’s take the same map that we have been using in all the above examples, but let’s add some key-value pairs, with different types of keys:

String as a key
You can have keys of string data types like showing in the following line:

dataSet.set("Coms", "Pretty Good");

Boolean as a key
You can have a key of boolean data types like the following line of code:

dataSet.set(true, 1);
dataSet.set(false,0);

Objects as a key
You can even pass objects as keys, try the following lines of code:

var person1 = { Name: "John Doe", Age: 25, height: "6 ft 2" };
dataSet.set(person1, "Member");

To verify all of the above code, you can simply call a console.log() function to print out the map onto the console as:

console.log(dataSet);

The complete code snippet is as

var dataSet = new Map();

dataSet.set(1, "English");
dataSet.set("Coms", "Pretty Good");
dataSet.set(true, 1);
dataSet.set(false, 0);

var person1 = { Name: "John Doe", Age: 25, height: "6 ft 2" };
dataSet.set(person1, "Member");

console.log(dataSet);

After running the above code you get the following output:

As you can see, every key was added into the dataSet along with its value, and that is how maps work in JavaScript.

Conclusion

Maps are a collection of key-value pairs that are stored in a preserved order thus making the map mimic the behavior of both the object and an array. Maps can have any data type of key and any data type of value while maintaining the order of the key-value pairs just like in arrays. You can add key-value pairs inside the map using the set() method of the map, you can get a specific value using the get() method, and to iterate through the whole map you can use the for-of loop. Maps are used because they provide more flexibility and freedom to the programmer.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.