Map and Set in JavaScript
Map()
Map() Objects were introduced in ES6 (ECMAScript 2015) to address the limitations of using plain Objects for data storage and management.
What is Map()
A JavaScript Map() object is a collection of key-value pairs where keys can be of any data type (objects, functions, or primitives), unlike standard objects. They maintain insertion order, have a size property, and are optimized for frequent additions/removals.
When is it introduced?
The Map object, used for storing key-value pairs where keys can be any data type, was introduced in ES6 (ECMAScript 2015). Unlike standard objects, a Map maintains the original insertion order of its keys.
How to create a Map()
const myMap = new Map();
console.log(myMap);
Output:
Map(0) {}
How to insert elements into a Map()
myMap.set("name", "Tauseef");
myMap.set(1, "number Value");
myMap.set(true, "boolean Value");
Or you can chain the insert elements
myMap.set("name", "Tauseef").set(1, "number Value").set(true, "boolean Value");
output:
Map(3) {
'name' => 'Tauseef',
1 => 'number Value',
true => 'boolean Value'
}
How to Read, Update elements in a Map()
As we already have a key "name" whose value is "Tauseef" if we want to update the value from "Tauseef to Zahid", we use set method.
myMap.set("name", "Tauseef").set(1, "number Value").set(true, "boolean Value");
myMap.set("name", "Zahid");
console.log(myMap);
The output value of name has been updated.
Map(3) {
'name' => 'Zahid',
1 => 'number Value',
true => 'boolean Value'
}
You can also use get method to get the value of any key
myMap.set("name", "Tauseef").set(1, "number Value").set(true, "boolean Value");
myMap.set("name", "Zahid");
console.log(myMap.get("name"));
Output:
Map(0) {}
Zahid
How to Delete element from a Map()
To delete an element from a Map() object you used delete method. You have to pass the key which you want to delete and it will return the Boolean.
myMap.set("name", "Tauseef").set(1, "number Value").set(true, "boolean Value");
const success = myMap.delete(1);// 1 is a key
console.log(success);
console.log(myMap);
Output:
true
Map(2) { 'name' => 'Zahid', true => 'boolean Value' }
Useful Methods of Map()
Beyond basic CRUD operations, Map() offers built-in properties and methods to manage your data efficiently:
size: A property that returns the number of elements in the Map.
has(key): Returns a boolean indicating whether an element with the specified key exists.
clear(): Removes all elements from the Map object.
keys() / values() / entries(): Returns iterators for the keys, values, or [key, value] pairs respectively.
JavaScript
console.log(myMap.size); // Returns the count of items
console.log(myMap.has("name")); // Output: true
myMap.clear(); // Empty the map
Set()
Set() objects were also introduced in ES6 to handle collections of unique values, providing a much-needed alternative to using arrays when duplicates aren't allowed.
What is Set()
A JavaScript Set() is a collection of unique values. Each value can occur only once in a Set. Like Maps, Sets maintain insertion order and can store any data type, whether primitive values or object references.
When is it introduced?
The Set object was introduced in ES6 (ECMAScript 2015). It was designed to provide an efficient way to check for the existence of an item and to automatically handle duplicate data without manual filtering.
How to create a Set()
const mySet = new Set();
console.log(mySet);
Output:
Set(0) {}
How to insert elements into a Set()
To add values, we use the add method. If you try to add the same value twice, the Set will simply ignore the second request.
mySet.add("JavaScript");
mySet.add(100);
mySet.add(true);
// Chaining also works here
mySet.add("React").add("Node");
Output:
Set(5) { 'JavaScript', 100, true, 'React', 'Node' }
How to Read and Check elements in a Set()
Unlike Maps, Sets do not have "keys," so you cannot "get" a specific value by index or key. Instead, we typically check for existence using the has method.
console.log(mySet.has("JavaScript"));
Output:
true
How to Delete elements from a Set()
To delete an element, use the delete method. Like Map, it returns true if the element existed and was removed, and false otherwise.
const isDeleted = mySet.delete(100);
console.log(isDeleted);
console.log(mySet);
Output:
Plaintext
true
Set(4) { 'JavaScript', true, 'React', 'Node' }
Conclusion
Both Map() and Set() are powerful additions to the JavaScript language that bring more flexibility than traditional Objects and Arrays.
Use Map when you need a dictionary-style structure with non-string keys or when the order of elements matters.
Use Set when you need to ensure that every item in your collection is unique and you want to avoid the overhead of manually checking for duplicates.
By integrating these into your workflow, you can write cleaner, more performant, and more semantic code.
Happy coding! 💕
