Before ES6 introduced Sets and Maps, we had limited options for storing collections of data in JavaScript. We used objects for key-value pairs and arrays for lists. This led to common problems:
Set (initial support)
Baseline Widely available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015
Map (initial support)
Baseline Widely available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015
// Problem 1: Using arrays for unique valuesconst userIds = [1, 2, 2, 3]const uniqueIds = userIds.filter((id, index) => userIds.indexOf(id) === index)console.log(uniqueIds)// [1, 2, 3] ✅ Correct, but inefficient!// Has to loop through array multiple times
// Problem 2: Numbers and strings collide as keysconst cache = {}cache[123] = "data" // Using number as keycache["123"] = "other data" // Using string as keyconsole.log(cache[123]) ❌ // "other data" - both keys got converted to string "123"
// Problem 3: Objects as keys don't workconst userMap = {}const user = {id: 1}userMap[user] = "data"console.log(userMap[user]) // "data"console.log(userMap["[object Object]"]) ❌ // "data" - same value!
// Both objects become "[object Object]"const user2 = {id: 2}userMap[user2] = "different data"console.log(userMap[user]) ❌ // "different data" - first value got overwritten!What are Sets and Maps?
Sets and Maps are specialized data structures in JavaScript, each designed to solve specific problems that arrays and objects handle poorly.
A Set is a collection of unique values. Think of it like a bag that automatically removes duplicates.
When you add the same value twice, the Set keeps only one copy. It’s perfect for maintaining lists where each item should appear only once.
// Set automatically handles uniquenessconst uniqueNumbers = new Set([1, 1, 2, 2, 3])console.log(uniqueNumbers) // ✅ Set(3) {1, 2, 3}
// Fast lookups for existence checksuniqueNumbers.has(1) // trueuniqueNumbers.has(4) // false
// Easy to add and remove itemsuniqueNumbers.add(4) // Set(4) {1, 2, 3, 4}uniqueNumbers.delete(1) // Set(3) {2, 3, 4}A Map is a collection of key-value pairs where keys can be any type - numbers, strings, objects, even functions. Unlike objects, which convert all keys to strings, Maps preserve the type of the key. This makes them ideal for creating dictionaries or caches where the key type matters:
// Map maintains key typesconst userProfiles = new Map()
// Numbers stay numbersuserProfiles.set(123, "John")userProfiles.set("123", "Jane") // Different from 123
// Objects can be keysconst user = {id: 1}userProfiles.set(user, "User data")
console.log(userProfiles.get(123)) // "John"console.log(userProfiles.get("123")) // "Jane"console.log(userProfiles.get(user)) // "User data"Here’s how Sets and Maps solve the two problems we saw earlier with arrays and objects.
// Sets for unique valuesconst userIds = new Set([1, 2, 2, 3]) // Automatically uniqueconsole.log(userIds) // Set(3) {1, 2, 3}
// Maps for proper key-value storageconst cache = new Map()cache.set(123, "data") // Number keycache.set("123", "other") // String key - different!
const userMap = new Map()const user = {id: 1}userMap.set(user, "data") // Object as key - works!Sets and Maps excel at handling data relationships, caching, and uniqueness checks. Each has specific use cases where they outperform traditional arrays and objects.
When to Use Sets
Sets shine when you need fast lookups and uniqueness guarantees in your data. In a tag system, you can instantly check if an article has a specific tag without looping through an array.
// Fast existence checksconst adminPermissions = new Set(['edit', 'delete', 'create'])if (adminPermissions.has('delete')) { // Instant lookup deleteResource()}
// Tracking unique valuesconst uniqueVisitors = new Set()uniqueVisitors.add(userId) // Duplicates handled automaticallyWhen to Use Maps
Maps are perfect when you need to associate data with any type of key - like caching API responses by URL, storing user preferences, or maintaining a relationship between DOM elements and their data.
// Type-safe keysconst apiCache = new Map()apiCache.set('/api/users', userData) // URL as exact stringapiCache.set(404, errorData) // Number stays number
// Objects as keysconst elementStates = new Map()const button = document.querySelector('#submit')elementStates.set(button, { // DOM element as key clicks: 0, lastClicked: null})Performance Trade-offs
Sets and Maps provide O(1) operations through their hash table implementation, compared to arrays which have O(n) for lookups and objects which coerce keys to strings.
O(1) means an operation takes the same amount of time regardless of how much data you have - it’s “constant time”. If you have 10 items or 10 million items in your Set or Map, operations like adding, checking, or retrieving items will be equally fast.
O(n) means the operation time grows linearly with the size of your data. If you have 1000 items, it might check 1000 times. If you have a million items, it might check a million times. The more data you have, the slower it gets.
However, this speed comes at a cost: Sets and Maps use more memory than arrays and objects. The hash table structure that enables their fast operations requires additional memory overhead to maintain.
For Sets specifically, the hash table ensures that duplicate detection is instantaneous, rather than requiring a full array scan. Maps achieve their performance by using a similar structure but storing both the key and value in the hash table.
// Set Performanceconst set = new Set()set.add(value) // O(1) - constant time hash computationset.has(value) // O(1) - direct hash table lookupset.delete(value) // O(1) - immediate hash table removalset.size // O(1) - size counter is maintained
// Map Performanceconst map = new Map()map.set(key, value) // O(1) - hash table insertionmap.get(key) // O(1) - direct hash lookupmap.has(key) // O(1) - hash existence checkmap.delete(key) // O(1) - hash table deletionmap.size // O(1) - continuous size trackingSets and Maps excel at handling user sessions. Sets provide instant O(1) lookups to check if a user is logged in - much faster than searching through an array of user IDs. Maps let us store session data with any type of user identifier (number, string, or object) without key type conversion issues.
class SessionManager { constructor() { this.activeSessions = new Map() // userId -> session data this.loggedInUsers = new Set() // unique user IDs }
login(userId, sessionData) { this.loggedInUsers.add(userId) // O(1) add this.activeSessions.set(userId, { data: sessionData, startTime: Date.now() }) }
isLoggedIn(userId) { return this.loggedInUsers.has(userId) // O(1) check }
getSessionData(userId) { return this.activeSessions.get(userId) // O(1) lookup }}The SessionManager example shows how Sets can track unique active users while Maps store detailed session data. This combination is particularly powerful because it separates concerns - the Set handles uniqueness while the Map handles data association.
The instant lookup times make this ideal for high-traffic applications where performance is critical.
When Not to Use Sets and Maps
Sets and Maps come with memory overhead from their hash table structure. For small collections or simple string keys, arrays and objects might be more efficient.
// 1. You need array methodsconst numbers = [1, 2, 3, 4]numbers.map(n => n * 2) // Can't do this with Setsnumbers.filter(n => n > 2) // No built-in Set filteringnumbers.reduce((a, b) => a + b) // No Set reduction
// 2. You need index accessconst items = ['first', 'second', 'third']console.log(items[0]) // Direct index accessconsole.log(items.indexOf('second')) // Position matters
// 3. You need JSON serializationconst user = {name: 'John', age: 30}JSON.stringify(user) // Works fineJSON.stringify(new Map()) // Empty object {}JSON.stringify(new Set()) // Empty array []
// 4. You need simple string-only keys// Using Map here would be overkillconst config = { apiKey: '123', baseUrl: 'api.example.com'}Sets and Maps aren’t just alternatives to arrays and objects - they’re specialized tools that make specific programming patterns more efficient and reliable. Use them when their unique characteristics align with your needs, and you’ll write more robust and performant code.
Key takeaway: Sets solve the unique values problem, while Maps solve the key-type coercion problem. They trade more memory usage for better performance and type safety.
