Map and Set Data Structures in JavaScript

JavaScript provides several built-in data structures that help you manage and organize data efficiently. Two such structures, Map and Set, are essential when it comes to storing unique values and key-value pairs. These structures are part of ECMAScript 6 (ES6) and provide a more powerful and flexible way to handle data compared to traditional objects and arrays.

In this blog, we will explore Map and Set data structures in detail, how they work, and when to use them.

1. What is a Map?

A Map is a collection of key-value pairs where each key is unique. It allows you to associate a value with a key and retrieve the value using the key efficiently. Unlike plain JavaScript objects, keys in a Map can be of any data type, not just strings or symbols.

Features of a Map:

• Key-value pairs: It stores data in pairs, where each key is mapped to a value.
• Ordered: The elements in a Map are iterated in the order of their insertion.
• Key types: The keys can be any data type, including objects, arrays, or even functions.
• Size property: It has a size property that gives the number of key-value pairs in the map.

Creating and Using a Map

// Create a new Map
let map = new Map();
 
// Set key-value pairs
map.set("name", "John");
map.set("age", 30);
 
// Get value by key
console.log(map.get("name"));  // Output: John
 
// Check if a key exists
console.log(map.has("age"));   // Output: true
 
// Get the size of the map
console.log(map.size);         // Output: 2
 
// Delete a key-value pair
map.delete("age");
console.log(map.size);         // Output: 1
 
// Clear all entries
map.clear();
console.log(map.size);         // Output: 0

2. What is a Set?

A Set is a collection of unique values, meaning that no duplicates are allowed. It is useful when you want to store a collection of items but ensure that each item appears only once. Sets are similar to arrays, but with the added benefit of automatically removing duplicates.

Features of a Set:

• Unique values: Only one instance of each value can exist in the set.
• Ordered: Sets remember the insertion order of elements.
• No index: Unlike arrays, the values in a set don’t have an index, making access by index impossible.

Creating and Using a Set

// Create a new Set
let set = new Set();
 
// Add elements
set.add(1);
set.add(2);
set.add(3);
set.add(2);  // Duplicate value will be ignored
 
console.log(set);  // Output: Set { 1, 2, 3 }
 
// Check if a value exists
console.log(set.has(2));  // Output: true
 
// Get the size of the set
console.log(set.size);    // Output: 3
 
// Delete a value
set.delete(2);
console.log(set.size);    // Output: 2
 
// Clear all elements
set.clear();
console.log(set.size);    // Output: 0

3. When to Use Map and Set

• Use a Map when:

  • You need to store key-value pairs.
  • You need to store keys of any data type (not just strings).
  • You want to maintain the insertion order of the keys.
  • You want easy access to values using keys.

• Use a Set when:

  • You need to store unique values without duplicates.
  • You need to ensure no duplicates are added to your collection.
  • You want an unordered collection of items but still need them in the order of insertion.

4. Comparing Map vs. Object, and Set vs. Array

While Map and Set are powerful data structures, sometimes we can achieve similar results using objects and arrays. Here’s a comparison:

• Map vs Object:

  • In a Map, keys can be of any data type, whereas in an object, keys are always strings (or symbols).
  • Map preserves the insertion order of keys, whereas an object does not guarantee the order of keys (though modern engines do respect the insertion order for string keys).
  • Map has built-in methods like .get(), .set(), .has(), and .delete(), while objects require manual checking and manipulation.

• Set vs Array:

  • A Set automatically removes duplicates, while an array allows duplicate values.
  • Arrays are indexed by position, while a Set does not have indexes.
  • Set has a size property and simple methods for adding and deleting values, while arrays require more work to remove duplicates.

Example of Comparison:

// Using a Map
let mapExample = new Map();
mapExample.set("id", 1);
mapExample.set("name", "Alice");
 
// Using an Object
let objExample = {
  id: 1,
  name: "Alice"
};
 
// Using a Set
let setExample = new Set();
setExample.add(1);
setExample.add(2);
setExample.add(3);
setExample.add(2); // Duplicate value is ignored
 
// Using an Array
let arrExample = [1, 2, 3, 2]; // Duplicate values are allowed

5. Iterating over Map and Set

Both Map and Set provide methods to iterate through their elements in the insertion order.

Iterating over a Map:

let map = new Map([
  ["name", "John"],
  ["age", 30]
]);
 
for (let [key, value] of map) {
  console.log(key, value);  // Output: name John, age 30
}
 
// Using forEach on Map
map.forEach((value, key) => {
  console.log(key, value);  // Output: name John, age 30
});

Iterating over a Set:

let set = new Set([1, 2, 3, 4]);
 
for (let value of set) {
  console.log(value);  // Output: 1, 2, 3, 4
}
 
// Using forEach on Set
set.forEach(value => {
  console.log(value);  // Output: 1, 2, 3, 4
});

Conclusion

Both Map and Set are powerful data structures in JavaScript that help in organizing and managing data more efficiently. Map is perfect for key-value pair storage, while Set is great for storing unique values. Understanding when and how to use these structures will help you write cleaner and more effective JavaScript code.

Practice Code Snippet