Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Keyed collections in JavaScript
Keyed collections are data structures in JavaScript where elements are organized by keys rather than indices. The two main keyed collections are Map and Set objects, which maintain insertion order and provide efficient key-based operations.
Map Collection
A Map object holds key-value pairs and remembers the original insertion order of the keys. Unlike objects, Map keys can be of any type.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Collection Example</title>
</head>
<body>
<h3>Map Collection Demo</h3>
<div id="mapResult"></div>
<script>
// Create a new Map
let userMap = new Map();
// Add key-value pairs
userMap.set('name', 'John Doe');
userMap.set('age', 30);
userMap.set('city', 'New York');
userMap.set(1, 'First Entry'); // Number as key
let result = document.getElementById('mapResult');
result.innerHTML += '<strong>Map Contents:</strong><br>';
// Iterate through Map
for (let [key, value] of userMap) {
result.innerHTML += `Key: ${key}, Value: ${value}<br>`;
}
result.innerHTML += `<br>Map size: ${userMap.size}`;
</script>
</body>
</html>
Map Contents: Key: name, Value: John Doe Key: age, Value: 30 Key: city, Value: New York Key: 1, Value: First Entry Map size: 4
Set Collection
A Set object stores unique values of any type, maintaining insertion order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Collection Example</title>
</head>
<body>
<h3>Set Collection Demo</h3>
<div id="setResult"></div>
<script>
// Create a new Set
let uniqueNumbers = new Set();
// Add values (duplicates ignored)
uniqueNumbers.add(10);
uniqueNumbers.add(20);
uniqueNumbers.add(30);
uniqueNumbers.add(20); // Duplicate - won't be added
let result = document.getElementById('setResult');
result.innerHTML += '<strong>Set Contents:</strong><br>';
// Iterate through Set
for (let value of uniqueNumbers) {
result.innerHTML += `Value: ${value}<br>`;
}
result.innerHTML += `<br>Set size: ${uniqueNumbers.size}<br>`;
result.innerHTML += `Contains 20: ${uniqueNumbers.has(20)}`;
</script>
</body>
</html>
Set Contents: Value: 10 Value: 20 Value: 30 Set size: 3 Contains 20: true
Comparison: Map vs Object vs Set
| Feature | Map | Object | Set |
|---|---|---|---|
| Key Types | Any type | String/Symbol only | N/A (values only) |
| Size Property | map.size | Object.keys(obj).length | set.size |
| Iteration Order | Insertion order | Not guaranteed | Insertion order |
| Use Case | Key-value pairs | Records/dictionaries | Unique values |
Common Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyed Collections Methods</title>
</head>
<body>
<h3>Common Methods Demo</h3>
<div id="methodsResult"></div>
<script>
let result = document.getElementById('methodsResult');
// Map methods
let map = new Map([['a', 1], ['b', 2]]);
result.innerHTML += '<strong>Map Methods:</strong><br>';
result.innerHTML += `get('a'): ${map.get('a')}<br>`;
result.innerHTML += `has('b'): ${map.has('b')}<br>`;
map.delete('a');
result.innerHTML += `After delete('a'), size: ${map.size}<br><br>`;
// Set methods
let set = new Set([1, 2, 3]);
result.innerHTML += '<strong>Set Methods:</strong><br>';
result.innerHTML += `has(2): ${set.has(2)}<br>`;
set.delete(1);
result.innerHTML += `After delete(1), size: ${set.size}`;
</script>
</body>
</html>
Map Methods:
get('a'): 1
has('b'): true
After delete('a'), size: 1
Set Methods:
has(2): true
After delete(1), size: 2
Conclusion
Keyed collections provide efficient data organization with Map for key-value storage and Set for unique values. Both maintain insertion order and offer better performance than objects for frequent additions and deletions.
Updated on: 2026-03-15T23:18:59+05:30
711 Views
Advertisements