Map and Set in JavaScript

While working in Javascript, you have mostly worked with objects and arrays. But there are some limitations when used for large data or applying complex operations.

Problems in Objects

• Object must have a key as a string. If you use a number, it will automatically be used as a string.

• Objects inherit properties from their prototypes. For example: Object.keys is a predefined property that should not be used as a key. This may lead to unexpected bugs.

• You cannot directly iterate over the object's values/keys. You have to use object.keys() or object.entries() to do iteration.

• Order of insertion is not maintained.

Problems with Arrays

• Removing a specific value from an array requires another iteration to find the position of the value in the array.

• The array might have duplicate values. In some cases the developer doesn't want to insert duplicate values into the array. To achieve the same, they need to iterate over the whole array to check if the value already exists.

Understanding Map and Set

What is Map?

Map is a built-in datatype in Javascript. It is used to store key-value pairs. It is like an object with some extra powers.

1. Key can be of any type (string, number, array...)

2. Key should be unique

3. Maintain insertion order. This means if you iterate over a map, it will be the same order in which they are inserted.

Map Methods:

1. Insert value,
   To insert a value in map, use map.set(key, value).
   Examples:

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   

2. Get a value
   To get a value, use map.get(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   const employeeName = employee('name');
   
   console.log(employeeName); // Rahul
   

3. Check if value exisits, use map.has(key), return boolean state.

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   console.log(employee.has('name'));   // true
   console.log(employee.has('salary')); // false
   

4. Delete a value, use map.delete(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   employee.delete("id");
   
   console.log(employee.has("id")); // false
   

What is Set?

A set is also a built-in datatype in Javascript used to store unique values. It is more like an array, but with the power of uniqueness.

• Store unique values

• Store only values, not keys

• Maintain insertion order

Set methods:

1. Insert a value, use set.add(value).

   const set = new Set();
   
   set.add(42);
   set.add(42);
   set.add(13);
   
   for (const item of set) {
     console.log(item);
     // Expected output: 42
     // Expected output: 13
   }
   

2. Check if the value exists, use set.has(key), return a boolean state.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.has(42));   // true
   console.log(set.has(40)); // false
   

3. Delete a value, use set.delete(value), returns a boolean value indicating if the value is deleted successfully.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.delete(42)); // true
   console.log(set.delete(40)); // false
   
   console.log(set) // Set(1) {13}
   

Both Map and Set have other methods like values, entries, size and forEach for iteration. Here I have explained to you the necessary methods for insertion and deletion of values.

Comparison between Map and Object

Feature	Map	Object
Key Types	Any Type	String only
Order of values	Maintained	Not guaranteed
Performance	Optimized for insertion and removal	No optimization
Iteration	Has in-built methods	Need other methods

Comparison between Set and Array

Features	Set	Array
Unique Values	Yes	No
Maintained Order	Yes	Yes
Search	Faster with has method	Slower with includes method

When to Use Map?

Use Map when:

• You need key-value storage

• Keys are not just strings

• Frequent add/remove operations

• You care about insertion order

Example:

• Caching data

• Storing user sessions

• Mapping objects to values

When to Use Set?

Use Set when:

• You need unique values

• You want to remove duplicates

• Fast lookup is required

Example:

• Unique tags

• Removing duplicate IDs

• Tracking visited items

Conclusion

• Use Map when you need a better version of objects

• Use Set when you need uniqueness without extra logic

• Avoid forcing everything into Objects & Arrays

Follow Javascript series for more updates 🙂