Introduction to Maps in javascript with a simple example

This article explains the concepts of maps in javascript in details with some real world example. Introduction to Maps in javascript with a simple example.

Maps data structure was introduced in Javascript ES6 to solve some problem that comes when we use javascript objects.

What is Maps

Maps are key/value pair data structure in javascript. maps are similar to javascript objects except the fact that it can contain any data type as key.

Maps key can be of any data type, it can be string,number or an object itself.

there are other different characteristics also between object and Maps.

  • Key Field - Key Field can be of any type. it can be string, number or an object or array too.
  • Element Orders - Map data structure maintains the order of elements.
  • Instance of - Basically, Map is an instance of object whereas object is not an instance of Map.
1let data = new Map()
3let val = {
4 id: 1,
7console.log(data instanceof Object)
9console.log(val instanceof Map)

So, the output will be like,

Screenshot 2019 11 09 at 5 14 07 PM

Creating Map in Javascript

map can be created using keyword new with Map.

1let data = new Map()

this is an initialization of map which is stored in the variable data.

Adding items to Map

you can add items to Map using a method set() which basically sets the value to key.

1data.set(1, {
2 address: {
3 country: "India",
4 postal: 123456,
5 },
7data.set(2, {
8 address: {
9 country: "US",
10 postal: 123456,
11 },

So, it sets the value to data with key 1 and 2.

Screenshot 2019 11 09 at 5 31 32 PM

Getting item using key

you can get the value from map using the key in Map data structure. Map uses method get() which returns the value from the key.


Screenshot 2019 11 09 at 5 35 36 PM

Deleting a item using key

you can delete an item from map using key. delete() is a method used to delete an item from map.


Screenshot 2019 11 09 at 5 40 19 PM

Deleting all items

you can delete all items in map using the method clear().

1//deleting all items in the map

Iterating over map keys

you can iterate over all the keys in the map using map.keys()

1//iterating over map keys
2for (const k of data.keys()) {
3 console.log(k)

Screenshot 2019 11 09 at 5 43 21 PM

Iterating over map values

Similarly, you can iterate over all the values in the map using map.values().

1//iterating over map values
2for (const k of data.values()) {
3 console.log(k)

So, it will output like,

Screenshot 2019 11 09 at 5 45 54 PM

Iterating over map key,value pairs

1//iterating over map key,value pairs
2for (const [k, v] of data) {
3 console.log(k, v)

Screenshot 2019 11 09 at 5 47 32 PM

Complete Code

WeakMaps in Javascript

WeakMap is also a Map except the fact that it has garbage collection. if a key lost the reference, then particular value from the WeakMap will be garbage collected.

Let's see an example to understand the concept,

1let user = {
2 name: "Steve",
5let weakMap = new WeakMap()
6weakMap.set(user, "check")
8user = null // overwrite the reference
10console.log(weakMap) //it will be removed from the memory

can you guess what is the output of it?.

Screenshot 2019 11 09 at 5 57 24 PM

Here, we have user variable which is basically a key for weakmap. if you null the user variable, weakMap lost the reference for key.

it will be garbage collected automatically in WeakMap.


To sum up, These are all the concepts of Maps and WeakMaps in Javascript.

Recent Articles

How to Run MongoDB as a Docker Container in Development

To Read More

Modern React Redux Toolkit - Login ...

User Authentication is one of the common workflow in web applications. In this t...

Building Nodejs Microservice - A Cl...

This Article explains everything about how to build Nodejs Microservices in clou...

I Accidentally wiped the entire dat...

One of the tragic accident in my job turned out to be good learning for me in re...