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.
Key can be of any type (string, number, array...)
Key should be unique
Maintain insertion order. This means if you iterate over a map, it will be the same order in which they are inserted.
Map Methods:
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");
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
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
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.
Set methods:
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
}
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
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:
When to Use Set?
Use Set when:
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 🙂
