Working with Set and Map in Javascript

Reading Time: 3 minutes

Introduction

In this blog, we will be understanding how we can work with Set and Map in Javascript and their comparison with arrays and objects respectively. Let’s dive into it.

Set in Javascript

The set allows us to store unique values of any type, be it primitive values or object references. You cannot duplicate any value in a set. You can iterate through the set items in the insertion order. In arrays, we use the index values to access elements but that is not the case with a Set.

Syntax

let mySet = new Set();

Here are some useful methods for a Set:

• add(item) – This method is used to add an item to a set.

mySet.add(1);
mySet.add(2);
mySet.add('a');

mySet.add(2);      //does not add another item

• size() -It returns the no. of items in the set.

mySet.size;      //returns 3

• delete(item) – This method deletes that particular item passed as the parameter.

mySet.delete('a');        //returns true and deletes ‘a’
mySet.delete(3);          //returns false

• has(item) – It returns a boolean value based on whether the item is present in the set or not.

mySet.has(2);                     //returns true
mySet.has(5);                    // returns false

• entries() – It allows you to iterate through the set items containing an array of [value,value].

for (let item of mySet.entries()) console.log(item)
[1, 1]
[2, 2]
[3, 3]

• values() – It allows you to iterate through the set items containing only the values.

for (let item of mySet.values()) console.log(item)
1
2
3

• clear() – This method removes all elements from the set.

mySet.clear();         //clears all the values in the set

Set vs Array

• The major difference is that arrays can hold duplicate values where as sets cannot.
• In arrays, values are accessed by index position and in case of sets the values are iterable in the order of insertion.
• To add elements in array, we use the push function and with sets we use the add function.
• Similarly to remove elements from set we have the delete function but in case of arrays if we need to remove the last element we use pop and for the first element we can use shift function.

Map

Map allows us to store key-value pairs. The elements of the map are accessed through the keys. The insertion order is always maintained in it.

Syntax:

let myMap = new Map();

Here are some useful methods for a Map:

• set(key, value) – This method adds the pair of key and value.

myMap.set(1, 'a');
myMap.set(2, 'b');
myMap.set(3, 'c');

• size() -It returns the no. of items in the set.

myMap.size;          //returns 3

• delete(key) – It deletes the pair of key-values for that particular key passed as parameter.

myMap.delete(3);            //returns true
myMap.delete(5);            //returns false

• get(key) – It returns the value associated with the key. If there is no such key then it returns undefined.

myMap.get(2);   //Returns ‘b’

• has(key) – It returns a boolean value based on whether the key is present in the set or not.

myMap.has(1);         //returns true

• entries() – This method returns an iterator that contains an array of [key,value] for each element in the map.

for (const [key, value] of myMap.entries()) {
  console.log(key + ' - ' + value)
}

1 - a
2 - b
3 - c

• values() – This method returns an iterator that contains value for each element in the map.

for (const key of myMap.values()) {
  console.log(key)
}

a
b
c

• keys() – This method returns an iterator that contains keys for each element in the map.

for (const key of myMap.keys()) {
  console.log(key)
}

1
2
3

• clear() – It removes all key-value pairs from the map.

myMap.clear();

Map vs Object

As we know, an object also allows us to store key-value pairs and retrieve them but there are some differences between a map and an object. Let us have a look at them:

• In object, the key is always a string or a symbol whereas in the case of map, you can use any type be it functions, objects or primitive types.
• In Map, you can check the number of elements with the help of size. Objects does not allows this.
• When you have a huge amount of data where you want to add or delete elements frequently, then in such a case the performance of maps is better than objects.
• A map is always ordered and iterable. But objects are not ordered and iterable.

Conclusion

In this blog, we learned how we can work with Set and Map in Javascript. Also, we learned the difference between a Set and Array as well as the difference between an Object and a Map. You can get a complete guide to Set and Map here.

Also, Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Also, you can comment and tell me how I can improve my content. Feel free to share your thoughts about this blog in the comments.