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

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...