Hello readers 👋, welcome to the 19th blog in this JavaScript series!

In the last post, we explored the this keyword and how it flexibly points to different callers depending on the context. Today, we are going to talk about two powerful data structures introduced in ES6 that often don't get enough love: Map and Set.

If you have been using plain objects for key-value storage or arrays for everything, you might be missing out on cleaner, more performant ways to handle certain scenarios. Let's break down what Map and Set are, how they differ from traditional Objects and Arrays, and when you should reach for each.

What is a Map?

A Map is a collection of key-value pairs, similar to a regular JavaScript object. But it comes with some significant improvements. A Map object holds key-value pairs and remembers the original insertion order of the keys. Any value, whether it's a primitive or an object reference, can be used as either a key or a value.

Here is a basic example to get us started:

const userRoles = new Map();

// Setting key-value pairs
userRoles.set("satya", "admin");
userRoles.set("priya", "editor");
userRoles.set(42, "meaning of life"); // number as key? Yes, Map allows this

// Getting a value
console.log(userRoles.get("satya")); // "admin"

// Checking if a key exists
console.log(userRoles.has("priya")); // true

// Getting the size
console.log(userRoles.size); // 3

// Deleting a key
userRoles.delete(42);
console.log(userRoles.size); // 2

// Iterating over the Map
for (const [key, value] of userRoles) {
  console.log(`${key}: ${value}`);
}

Notice how we used set(), get(), has(), delete(), and size. These methods make working with key-value data far more straightforward than the manual property manipulation we often do with plain objects.

What problems does Map solve over plain Objects?

At first glance, Map looks like a regular object. Both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Historically, objects have been used as maps because JavaScript had no built-in alternative. But Map is preferable in several important cases.

Let's walk through the key differences.

1. Key types are not limited to strings

The keys of a plain object must be strings or symbols. If you try to use a number, it gets converted to a string. With Map, keys can be any value: objects, functions, numbers, booleans, and even NaN.

const obj = {};
const func = function() {};

const myMap = new Map();
myMap.set(obj, "value for an object key");
myMap.set(func, "value for a function key");

// This is simply not possible with plain objects

2. Map has a built-in size property

Getting the number of entries in a plain object is roundabout: you'd typically use Object.keys(obj).length. With a Map, you just refer to the size property.

3. Map is iterable out of the box

A Map is directly iterable. You can use a for...of loop on it and get back [key, value] pairs right away. Plain objects don't implement the iteration protocol by default, so you cannot directly use for...of on them without using Object.keys() or Object.entries() first.

const map = new Map([["a", 1], ["b", 2]]);

// Direct iteration on Map
for (const [key, value] of map) {
  console.log(key, value); // works cleanly
}

// For a plain object, you'd need:
// for (const [key, value] of Object.entries(obj)) { ... }

4. No accidental keys from the prototype

A plain object has a prototype, which means it contains default keys that could collide with your own keys if you are not careful. A Map does not contain any keys by default; it only contains what is explicitly put into it. This makes a Map safer to use with user-provided keys and values, as it avoids potential prototype pollution attacks.

5. Better performance for frequent additions and removals

Map performs better in scenarios involving frequent additions and removals of key-value pairs, while a plain object is not optimized for such usage patterns.

Here is a quick side-by-side comparison for reference:

What is a Set?

A Set is a collection of values where each value may only appear once; it is unique in the collection. Like a Map, a Set also remembers the insertion order of its elements. You can store any type of value in a Set, whether primitive values or object references.

At its core, a Set is like an array that automatically prevents duplicate entries. Let's see it in action:

const uniqueNumbers = new Set();

// Adding values
uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(2); // Duplicate! Will be ignored
uniqueNumbers.add(3);

console.log(uniqueNumbers.size); // 3 (not 4)
console.log(uniqueNumbers.has(1)); // true
console.log(uniqueNumbers.has(99)); // false

uniqueNumbers.delete(2);
console.log(uniqueNumbers); // Set(2) { 1, 3 }

// Iterating over the Set
for (const value of uniqueNumbers) {
  console.log(value);
}

uniqueNumbers.clear();
console.log(uniqueNumbers.size); // 0

The add(), has(), delete(), clear(), and size properties work similarly to what we saw with Map.

The problem Set solves: uniqueness without manual checks

Before Set, if you wanted a collection of unique values in an array, you had to manually check for duplicates before pushing each item. This meant writing repetitive code, and as the array grew larger, checking with indexOf or includes became slower.

// Without Set: manually checking for duplicates
const items = [];
function addItem(item) {
  if (!items.includes(item)) {
    items.push(item);
  }
}

With a Set, uniqueness is guaranteed by design:

const items = new Set();
items.add("apple");
items.add("banana");
items.add("apple"); // ignored, already present

// You can also initialize a Set from an array
const numbers = [1, 2, 2, 3, 3, 4];
const uniqueNums = new Set(numbers);
console.log([...uniqueNums]); // [1, 2, 3, 4]

This makes Set perfect for tasks like removing duplicates from a list, tracking visited items, or maintaining a list of unique tags and identifiers.

Set vs Array: the differences that matter

An array is a list-like object used to store multiple values, ordered by index. A Set, on the other hand, is a collection of unique values stored in insertion order. Here are the main differences:

• Uniqueness: Arrays can hold duplicate values; Sets cannot. Every value in a Set must be unique.
• Access by index: Arrays let you access elements by their numeric index (arr[0]). Sets don't have indexed access; you check membership via has().
• Performance: Checking if an element exists in an array using includes() requires scanning the array from the start until the element is found (linear time, O(n)). The has() method on a Set is designed to be sublinear on the number of elements, meaning it is often significantly faster for membership checks, especially as the collection grows.
• Insertion order: Both arrays and sets maintain insertion order, but arrays are indexed, whereas sets are not.

Comparison summary:

When should you use Map?

• When keys are not known until runtime, or when they are not all strings. Using Map avoids the key type limitations of plain objects.
• When you need to store data with keys that are objects, functions, or other non-string values.
• When you want a simple, reliable way to get the size of the collection.
• When you need to iterate over key-value pairs frequently in insertion order.
• When you are dealing with user-provided keys and want to avoid accidental collisions with inherited object properties.

When should you use Set?

• When you need to store a collection of unique values, such as tracking visited pages, unique user IDs, or a tag list without duplicates.
• When you need fast membership checks: has() is significantly faster than indexOf or includes on large arrays.
• When you want to quickly remove duplicates from an array: const unique = [...new Set(arr)] is a clean one-liner.
• When you are working with mathematical set operations like union, intersection, or difference. Modern Set methods support these directly.

A practical example: combining Map and Set

Here is a realistic scenario showing both in action. Imagine you are building a simple application to track which users like which posts:

// Map: post ID to a Set of user IDs who liked the post
const postLikes = new Map();

function likePost(postId, userId) {
  if (!postLikes.has(postId)) {
    postLikes.set(postId, new Set()); // create a new Set if first like
  }
  postLikes.get(postId).add(userId); // Set handles uniqueness automatically
}

function getLikeCount(postId) {
  return postLikes.has(postId) ? postLikes.get(postId).size : 0;
}

function hasUserLiked(postId, userId) {
  return postLikes.has(postId) && postLikes.get(postId).has(userId);
}

likePost("post-1", "user-a");
likePost("post-1", "user-b");
likePost("post-1", "user-a"); // duplicate, ignored automatically
likePost("post-2", "user-a");

console.log(getLikeCount("post-1")); // 2
console.log(hasUserLiked("post-1", "user-b")); // true
console.log(hasUserLiked("post-1", "user-c")); // false

A Map stores the relationship between posts and their likers, while Set ensures that each user can only like a post once. This is clean, expressive, and takes advantage of each data structure's strengths.

Conclusion

Map and Set are two additions to JavaScript that bring clarity, safety, and performance to everyday tasks involving keyed collections and unique values. Once you start using them, you will find yourself reaching for them more often and writing simpler code.

To recap the key points:

• Map is a key-value collection that allows keys of any type, provides an easy size property, is directly iterable, and has no inherited default keys. It outperforms plain objects in scenarios with frequent additions and deletions.
• Set is a collection of unique values stored in insertion order. It excels at removing duplicates, performing fast membership checks, and representing real-world sets.
• Use Map when you need flexible keys or frequent iteration of key-value pairs. Use Set when uniqueness and fast lookups are your priority.
• Both data structures are directly iterable with for...of and integrate cleanly into modern JavaScript code.

With these tools in your toolkit, you are better equipped to choose the right data structure for the job, rather than forcing plain objects and arrays into situations where they are not ideal.

Hope you found this helpful! If you spot any mistakes or have suggestions, let me know. You can find me on LinkedIn and X, where I post more about web development.