DEV Community

Cover image for Exploring JavaScript Maps and Sets
Artem Turlenko
Artem Turlenko

Posted on

Exploring JavaScript Maps and Sets

Maps and Sets, introduced in ES6, provide powerful and optimized ways to handle collections of data. They overcome limitations of traditional JavaScript objects and arrays.


JavaScript Map

A Map stores key-value pairs and maintains insertion order. Keys can be any data type.

Creating & Using Maps

const map = new Map();

map.set('name', 'Alice');
map.set(123, 'ID number');
map.set(true, 'boolean key');

console.log(map.get('name')); // Alice
Enter fullscreen mode Exit fullscreen mode

Iterating Over Maps

for (let [key, value] of map) {
  console.log(`${key} = ${value}`);
}
Enter fullscreen mode Exit fullscreen mode

Useful Methods

  • map.set(key, value) – Adds or updates an entry.
  • map.get(key) – Retrieves a value by key.
  • map.has(key) – Checks existence.
  • map.delete(key) – Removes an entry.
  • map.clear() – Removes all entries.

JavaScript Set

A Set stores unique values of any type, eliminating duplicates automatically.

Creating & Using Sets

const set = new Set();

set.add(1);
set.add(5);
set.add(5); // duplicate, ignored

console.log(set.has(5)); // true
Enter fullscreen mode Exit fullscreen mode

Iterating Over Sets

set.forEach(value => console.log(value));
Enter fullscreen mode Exit fullscreen mode

Useful Methods

  • set.add(value) – Adds a new element.
  • set.delete(value) – Removes an element.
  • set.has(value) – Checks for existence.
  • set.clear() – Clears all elements.

Practical Use-Cases

Maps

  • Associating metadata with objects.
  • Complex keys (objects, arrays, etc.).
  • Efficiently handling large datasets.

Sets

  • Removing duplicates from arrays.
  • Storing unique values (IDs, permissions).
  • Quickly checking membership.
const array = [1, 2, 2, 3, 4];
const uniqueArray = [...new Set(array)]; // [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

Performance Considerations

  • Maps and Sets offer predictable performance.
  • Key lookups are faster compared to object property access when keys vary.
  • Better memory efficiency in certain scenarios compared to plain objects or arrays.

WeakMaps & WeakSets

WeakMap and WeakSet hold "weak" references, allowing garbage collection if there are no other references to the object.

const wm = new WeakMap();
let obj = {};
wm.set(obj, 'data');

obj = null; // obj can now be garbage collected
Enter fullscreen mode Exit fullscreen mode

Differences from Map and Set:

  • Only objects as keys.
  • Not iterable.
  • Useful for caching and private data.

Best Practices

  • Use Maps for complex keys and better iteration.
  • Use Sets for uniqueness constraints.
  • Leverage WeakMap and WeakSet for caching and memory-sensitive applications.

Conclusion

Maps and Sets greatly enhance JavaScript’s data handling capabilities. Mastering their use helps you write efficient, readable, and maintainable code.

Have you used Maps or Sets creatively in your projects? Share your ideas below! 🚀

Top comments (0)