Understanding Maps and Sets in JavaScript


Data structures are the backbone of any programming language. Examples include linked list, trees, stacks, queues, and charts. In this article, you will learn how to use the map and define data structures in JavaScript.

In 2015, JavaScript introduced ES6 to provide developers with an improved coding experience. ES6 introduced maps and sets so developers don’t have to create them using primitive data types. Let’s take a look at them in more detail.

Understanding Maps in JavaScript

Map is a type of data structure that stores key-value pairs. It is one of the most efficient methods to find and recover data. You can store all types of data in JavaScript maps.

Let’s take a look at some methods you can perform on JavaScript cards.

Related: How to Create Data Structures with JavaScript ES6 Classes

1 set ()

You can insert a key-value pair into a map by using the together() method. This method takes two arguments: the key and the value.

Check out the code below that shows you how to insert into a card.

let map = new Map();
map.set("fruit1", "Grapes");
map.set("fruit2", "Mango");
map.set("fruit3", "Strawberry");
map.set("fruit4", "Mango");


The output after printing the card:

Map {
'fruit1' => 'Grapes',
'fruit2' => 'Mango',
'fruit3' => 'Strawberry',
'fruit4' => 'Mango' }

2.remove ()

To remove an item from a map, use the wipe off() method. This method accepts one argument: the key of the data you want to delete. If the key exists, this method removes this entry from the map and returns true. Otherwise, it returns false.

console.log("Is the fruit1 deleted", map.delete("fruit1"));

The exit after the deletion of the fruit1:

Is the fruit1 deleted  true
Map {
'fruit2' => 'Mango',
'fruit3' => 'Strawberry',
'fruit4' => 'Mango' }

3. get ()

The to have() The method retrieves the value of the specified key. As the wipe off() method, it accepts one argument: the key.


Produces the following output:


4.size ()

The Cut() The method returns the number of key-value pairs present in the map.

let map = new Map();
map.set("fruit1", "Grapes");
map.set("fruit2", "Mango");
map.set("fruit3", "Strawberry");
map.set("fruit4", "Mango");
console.log("The size of the map is", map.size)

Give the following result:

The size of the map is  4

5.remove ()

To remove all items from the map, use the clear () method.


The release of menu after deleting all items:

Map {}

6.a ()

The To() The method helps you to check whether the key exists in a card or not. It returns a Boolean value based on the existence of an item in the map. This method accepts one argument: the key to search for.

console.log("The grapes exists:", map.has("fruit1"))

Produces the following output with our sample map:

The grapes exists:  true

7.keys ()

The keys () The method returns an iterator with all the keys it contains. You can browse them to access an individual key.

const keys = map.keys();

for (let k of keys) {

The output of the above code is:



The values() The method returns an iterator with all the values ​​it contains.

const values = map.values();

for (let v of values) {

The output of the above code is:


Understanding sets in JavaScript

The defined data structure has unique values, which means that no value can be repeated. You can store all kinds of values ​​in a set, including primitives and objects.

Related: How to Remove Duplicate Elements from an Array in JavaScript, Python, and C ++

Let’s see some methods from the set:

1.add ()

The add() The method helps you add data to the assembly. If you try to add duplicate data, the set will just ignore it.

let s = new Set();

Give the output:

Set { 1, 2, 3, 4 }

2.remove ()

The wipe off() The method removes the specified value from the set.


The exit after deletion 3:

Set { 1, 2, 4 }

3.a ()

The To() The methods help you to check whether or not a value exists in the set.


The output of the above code is true.

4.remove ()

The clear () The method helps you remove all items from the set.


The output after removing all items from the set:

Set {}

Learn more about ES6

Now that you’ve learned how to use maps and sets in JavaScript, it’s time for you to implement them in your projects. You can use them while solving data structure and algorithm problems. You can use a map to implement a hash algorithm.

Want to learn more about ES6? Check out the article below which will tell you all about it.


What is ES6 and what JavaScript programmers need to know

ES6 refers to version 6 of the ECMA Script programming language (Javascript). Now let’s take a look at some major changes ES6 has made to JavaScript.

Read more

About the Author


About Author

Leave A Reply