Map and Set in JavaScript: A Simple Guide

If you are learning JavaScript, you probably use Arrays and Objects every single day. They are the most common ways to store data. But sometimes, they can be a little annoying.

For example, what if you want an array with no duplicate items? Or what if you want an object where the "key" is a number instead of a string?

To fix these problems, JavaScript gives us two special tools: Set and Map. Let's break them down in plain English.

What is a Set?

A Set is very similar to an Array. It is a list of values. But it has one magic rule: Every value must be unique.

You cannot have duplicates in a Set. If you try to add the exact same thing twice, the Set will just ignore the second one.

Diagram: Set Uniqueness

Normal Array: [ 🍎, 🍌, 🍎, 🍇 ]  --> Has 4 items (Apple is there twice)

JavaScript Set: { 🍎, 🍌, 🍇 }    --> Has 3 items (The extra Apple is thrown away!)

Difference between Set and Array

• Arrays allow duplicate values. You find items using their position, like myArray[0].

• Sets do not allow duplicates. You don't use index numbers to get things out. Instead, you usually just ask the Set, "Hey, do you have this item?" using mySet.has("Apple").

A quick code example:

// Making an array with duplicates
const numbersArray = [1, 2, 2, 3, 3, 3];

// Putting that array into a Set
const mySet = new Set(numbersArray);

console.log(mySet); 
// Output: Set(3) { 1, 2, 3 }

What is a Map?

A Map is very similar to an Object. Both of them store "key-value pairs" (like a dictionary where you look up a word to find its meaning).

So, what is the problem with normal Objects? In a normal Object, the key is always forced to be a String (text). If you try to use a number as a key, JavaScript secretly turns it into text behind your back!

A Map fixes this. In a Map, a key can be anything. It can be a number, a boolean, or even a whole other object!

Diagram: Map vs Object Storage

Normal Object:
  "1"       ---> "Apple"  (Number 1 was forced into a String!)
  "true"    ---> "Banana" (Boolean was forced into a String!)

JavaScript Map:
  1         ---> "Apple"  (Number stays a Number!)
  true      ---> "Banana" (Boolean stays a Boolean!)
  {id: 5}   ---> "Grape"  (You can even use an object as a key!)

Difference between Map and Object

• Objects only allow Strings and Symbols as keys. They also don't easily tell you how many items are inside them.

• Maps allow any type of data as a key. They also remember the exact order you added things, and you can easily check their size using myMap.size.

A quick code example:

const myMap = new Map();

// Adding data using .set(key, value)
myMap.set(1, "Number One"); 
myMap.set("name", "John");

console.log(myMap.get(1)); 
// Output: "Number One"

When to use Map and Set?

It can be hard to know when to use these new tools instead of your trusty Arrays and Objects. Here is a simple cheat sheet:

Use a Set when:

• You have a list of data and you need to quickly remove all duplicates.

• You want to store a list of IDs or tags where nothing should repeat.

Use a Map when:

• You need a dictionary, but you want your keys to be numbers or objects instead of strings.

• You are adding and removing key-value pairs very often (Maps are generally faster at this than normal Objects).

Conclusion

Arrays and Objects are still amazing, and you will use them 90% of the time. But when you need unique lists, reach for a Set. When you need flexible keys, reach for a Map.