Map and Set in JavaScript

Working with strings is something every JavaScript developer does daily. But if you’ve ever used traditional string concatenation, you know it can quickly become messy and hard to read.

What is Map

Map in JavaScript is a built-in data structure that stores data in a key-value pair, which is flexible to to access. It is similar to objects but more powerful.

It's each key is unique and can store any data ( number, string, Boolean, etc. ).

const map = new Map();

map.set("name", "Rahul");
map.set(1, "Number Key");
map.set(true, "Boolean Key");

console.log(map.get("name")); // Output is Rahul

Map's key can be of any datatype which objects cannot do it properly.

const objKey = { id: 1 };

map.set(objKey, "Object Value");

Maps have built-in methods

map.set(key, value);   // add
map.get(key);          // get value
map.has(key);          // check key
map.delete(key);       // remove
map.size;              // total items

It maintain insertion order where output will be in same order a->b->c....

map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

What is Set

Set is a built-in data structure which stores collection of unique value. Here values are unique and value can be of any datatype

const set = new Set();

set.add(1);
set.add(2);
set.add(2); // duplicate value will be ignored automatically

console.log(set); // {1, 2}

It ignores duplicate values automatically

const set = new Set([1, 2, 2, 3]);
console.log(set); // {1, 2, 3}

Store any type of data

set.add("hello");
set.add(true);
set.add({ id: 1 })

Maintain insertion order

const set = new Set([3, 1, 2]);
console.log(set); // {3, 1, 2}

We also have few built in methods of set

set.add(value);     // add value
set.delete(value);  // remove value
set.has(value);     // check existence
set.size;           // total elements

Difference between Map and Objects

We have few differences between Maps and objects like before ES6 developers have to lied on objects but after map it becomes easier for developers because map has built-in methods, it is easy to maintain insertion, it follows the insertion order whereas the objects coverts the values in string, it has limited built-in methods, it follows traditional key-value storage. Objects has no guarantee that it will follow the insertion order.

Difference between Set and Arrays

Set is a built in data structure which stores a collection of values. It has it's own built-in method where values are unique and the duplicate values are ignored automatically. It can store values of any datatype but Arrays stores ordered set of values and can have duplicates and it has indexes to access but Set don't have. Arrays are slower in searching but because set has .has method which makes the searching easy.

When to use map and set

When we have to store values in key-value pair we use map but if we have collection of data where no duplicity is needed and have unique value we use set. If need to fast lookup the value by the keys we use map and when we have to track visited items we use set