Master ES6 Sets & Maps: Essential Guide for Developers

Working with Sets and Maps: New Collections in ES6

JavaScript ES6 introduced powerful new collection types: Sets and Maps. These collections bring more flexibility and performance to data management beyond traditional arrays and objects. For intermediate developers, mastering Sets and Maps can significantly improve how you handle unique data, key-value pairs, and iteration.

This article dives deep into the features, use cases, and best practices for working with Sets and Maps, complete with code examples to help you level up your JavaScript skills.

Key Takeaways

• Understand what Sets and Maps are and how they differ from arrays and objects
• Learn how to create, manipulate, and iterate over Sets and Maps
• Discover when to use Sets for unique value storage and Maps for complex key-value pairs
• Explore performance considerations and conversion techniques
• Gain practical examples to apply in real-world projects

Introduction to ES6 Collections: Sets and Maps

Before ES6, JavaScript primarily used arrays and objects to store collections of data. While powerful, these structures have limitations: arrays allow duplicates, and objects only accept strings or symbols as keys. ES6 introduced two new collection types:

• Set: A collection of unique values, where each value can only occur once
• Map: A collection of key-value pairs where keys can be of any data type

These collections enable more efficient and expressive data handling, especially for cases involving uniqueness and complex keys.

Understanding Sets: Unique Value Collections

A Set is a collection that automatically enforces uniqueness. It can store any type of values — primitives or objects — but will not allow duplicates.

Creating a Set

const numbers = new Set([1, 2, 3, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

Adding and Removing Values

numbers.add(6);       // Adds 6
numbers.delete(3);    // Removes 3
console.log(numbers.has(4)); // true

Iterating Over a Set

for (const num of numbers) {
  console.log(num);
}

Because Sets maintain insertion order, iteration returns values in the order they were added.

When and Why to Use Sets

Sets are ideal when you need to:

• Store unique values without duplicates
• Quickly check for existence using .has()
• Perform set operations like union, intersection, and difference

Example: Removing Duplicates from an Array

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ['apple', 'banana', 'orange']

Exploring Maps: Flexible Key-Value Pairs

Unlike objects, Maps allow keys of any type — including objects, functions, and primitives — making them extremely versatile.

Creating a Map

const map = new Map();
map.set('name', 'Alice');
map.set(1, 'one');
map.set(true, 'boolean key');

Accessing and Modifying Values

console.log(map.get('name')); // Alice
map.delete(1);
console.log(map.has(1)); // false

Iterating Over a Map

for (const [key, value] of map) {
  console.log(`${key} = ${value}`);
}

Maps preserve insertion order and provide .size for their element count.

Advantages of Using Maps Over Objects

• Keys can be any data type (not limited to strings/symbols)
• Built-in methods like .set(), .get(), .has(), .delete(), and .clear() improve code clarity
• Easier to iterate over entries without needing Object.keys() or for...in

Converting Between Collections

Often, you need to convert between Sets, Maps, arrays, and objects.

Set ↔ Array

const set = new Set([1, 2, 3]);
const arrFromSet = [...set];
const setFromArr = new Set(arrFromSet);

Map ↔ Array

const map = new Map([[1, 'one'], [2, 'two']]);
const arrFromMap = [...map];
const mapFromArr = new Map(arrFromMap);

Map ↔ Object

const obj = { a: 1, b: 2 };
const mapFromObj = new Map(Object.entries(obj));
const objFromMap = Object.fromEntries(mapFromObj);

Performance Considerations

Sets and Maps generally offer better performance for certain operations compared to arrays and objects:

• Sets provide O(1) average time complexity for .has(), compared to O(n) for arrays
• Maps offer faster lookups than objects when using non-string keys

Use these collections when performance and clarity are priorities.

Practical Examples and Use Cases

Using Sets for Filtering Unique Events

function uniqueEvents(events) {
  return [...new Set(events)];
}

console.log(uniqueEvents(['click', 'scroll', 'click'])); // ['click', 'scroll']

Using Maps to Cache Expensive Computations

const cache = new Map();
function fibonacci(n) {
  if (cache.has(n)) return cache.get(n);
  if (n <= 1) return n;
  const result = fibonacci(n - 1) + fibonacci(n - 2);
  cache.set(n, result);
  return result;
}

console.log(fibonacci(10)); // 55

Conclusion

ES6 Sets and Maps enrich JavaScript with powerful, efficient, and expressive collection types. Sets simplify handling unique values and provide performant existence checks, while Maps offer flexible key-value storage with any data type as keys.

By incorporating Sets and Maps into your projects, you can write cleaner, more maintainable, and faster code. Take time to practice these collections, explore their methods, and apply them to real-world problems to fully harness their potential.

Frequently Asked Questions

1. What is the main difference between a Set and an Array?

A Set stores unique values with no duplicates, whereas an Array can contain duplicates and is ordered by index.

2. Can Map keys be objects?

Yes, Map keys can be of any data type, including objects, functions, and primitives.

3. How do you remove duplicates from an array using ES6?

You can convert the array to a Set and back to an array: const uniqueArr = [...new Set(arr)];

4. Are Sets and Maps iterable?

Yes, both Sets and Maps implement the iterable protocol, allowing use with for...of loops.

5. How do you convert a Map to a plain JavaScript object?

Use Object.fromEntries(map) to convert a Map into an object.

6. When should I prefer a Map over a plain object?

Prefer Maps when you need keys other than strings or symbols, or when you require guaranteed insertion order and useful built-in methods.