If you have used Python before, you probably already know about set.
When I started using JavaScript Set, I immediately thought:
"Finally! I always wished JavaScript had this."
It solves a very common problem with just one line of code.
Let's learn it with simple examples.
Imagine a Toy Box
You have a toy box.
Every time you put a toy inside, your mom checks one thing.
Is this toy already in the box?
- If no, she puts it in.
- If yes, she ignores it.
That is exactly how a JavaScript Set works.
A Set only stores unique values.
Creating Your First Set
const toys = new Set();
Now let's add some toys.
toys.add("Car");
toys.add("Robot");
toys.add("Car");
Now print it.
console.log(toys);
Output:
Set(2) { 'Car', 'Robot' }
Even though we added "Car" twice, it only appears once.
That is the magic of Set.
Arrays Can Have Duplicates
const fruits = [
"Apple",
"Apple",
"Orange",
"Banana",
"Banana"
];
Output:
Apple
Apple
Orange
Banana
Banana
Sometimes this is what you want.
Sometimes it isn't.
Remove Duplicates Instantly
With Set:
const fruits = [
"Apple",
"Apple",
"Orange",
"Banana",
"Banana"
];
const uniqueFruits = new Set(fruits);
console.log(uniqueFruits);
Output:
Set(3) {
'Apple',
'Orange',
'Banana'
}
Only unique values remain.
Convert It Back to an Array
Most of the time you still want an array.
Easy.
const uniqueFruits = [...new Set(fruits)];
Now:
console.log(uniqueFruits);
Output:
[
"Apple",
"Orange",
"Banana"
]
This is probably the most common use of Set.
Check If Something Exists
Instead of writing:
fruits.includes("Apple")
You can do:
const fruits = new Set([
"Apple",
"Orange",
"Banana"
]);
console.log(fruits.has("Apple"));
Output:
true
It reads very naturally.
Remove Something
fruits.delete("Orange");
Now the set contains:
Apple
Banana
Remove Everything
fruits.clear();
Now the set is empty.
Count Items
console.log(fruits.size);
Output:
3
Notice something?
Arrays use:
array.length
Sets use:
set.size
Loop Through a Set
const colors = new Set([
"Red",
"Blue",
"Green"
]);
for (const color of colors) {
console.log(color);
}
Output:
Red
Blue
Green
A Real-Life Example
Imagine users enter email addresses.
const emails = [
"john@gmail.com",
"john@gmail.com",
"mary@gmail.com",
"john@gmail.com",
"alice@gmail.com"
];
You only want unique emails.
const uniqueEmails = [...new Set(emails)];
Result:
[
"john@gmail.com",
"mary@gmail.com",
"alice@gmail.com"
]
Done.
No complicated loops.
No extra code.
When Should You Use Set?
Set is great when you need:
- Remove duplicate values
- Keep only unique items
- Check whether something already exists
- Store unique IDs
- Store tags
- Store usernames
- Store email addresses
When Should You Use an Array Instead?
Use an array if:
- Duplicates matter
- You need indexes
- You need sorting or mapping
- You care about item order and array methods
Arrays and Sets solve different problems.
Final Thoughts
Set is one of those JavaScript features that makes your code cleaner and easier to read.
If you come from Python, it will probably feel familiar.
If you're new to programming, think of it as a smart collection that automatically says:
"I already have this. I don't need another one."
Sometimes the simplest tools become your favorites.
Top comments (0)