Table of contents
- First of all, what exactly is a Set? 🤔
- Create a Set
- 1. Passing an Array to the newly created Set
- 2. Create a new Set and then use add() to add values or variables
- Delete an item from the Set
- Check the total number of items in the Set
- Check whether an item currently exists in the Set by using has()
- Delete all items from the Set using clear()
- Iterate items in a Set
- Convert a Set to an Array
- WHEN to use Set and WHEN to use Array? 🤔
- Final Words
Hey folks, welcome back to WebDev Distilled, in this article let's discover what exactly is Set and its use cases. Also, really understand when to use Set and when to use Array.
First of all, what exactly is a Set? 🤔
👉 is a Collection of UNIQUE values, each value can ONLY occur once.
👉 can hold value of any type, whether primitives or references.
👉 introduced to the JavaScript world in ES6, along with Map Data structure
Create a Set
A set can be created by
1. Passing an Array to the newly created Set
const numbers = new Set([1,2,3]);
// ▶️ Set(3) {1, 3, 5}
2. Create a new Set and then use add()
to add values or variables
1️⃣
const letters = new Set();
letters.add('a');
letters.add('a'); // 👉 This does NOT add new items "a" regardless of how many times you call.
letters.add('a');
letters.add('b');
letters.add('c');
// ▶️ Set(3) {'a', 'b', 'c'}
2️⃣
const fruits = new Set();
const apple = 'apple';
const orange = 'orange';
fruits.add(apple);
fruits.add(orange);
🔴 One more caveat: you cannot use add()
to add multiple elements at the same time. In order to add multiple things, you have to call add()
multiple times.
Delete an item from the Set
By using the delete()
method. You need to specify the value you want to delete.
fruits.delete('apple');
Check the total number of items in the Set
By using the size
property
letters.size // ▶️ 3
Check whether an item currently exists in the Set by using has()
fruits.has('orange'); // true
fruits.has('banana'); // false
Delete all items from the Set using clear()
numbers.clear();
▶️ Set(0) {size: 0}
Iterate items in a Set
Using the keys
or values
method, or simple for of
loop, they're no different in Set.
for (const key of letters.key()) {
console.log(key);
}
// ▶️ 'a', 'b', 'c'
for (const value of letters.values()) {
console.log(value);
}
// ▶️ 'a', 'b', 'c'
for (const value of letters) {
console.log(value);
}
// 👉 'a', 'b', 'c'
Using the entries()
method with Set
const s = [3, 4, 5];
console.log(s.entries());
// 👉 SetIterator {1 => 1, 2 => 2, 3 => 3}
Using forEach()
method on the Set
s.forEach(value => console.log(value))
// 3 4 5
Convert a Set to an Array
const set = new Set([5,6,7]);
const arr = [...set];
// OR
const arr = [...set.keys()];
// OR
const arr = [...set.values()];
// ▶️ [5, 6, 7];
WHEN to use Set and WHEN to use Array? 🤔
Arrays | Sets |
Use when need ordered list of values (it might contain duplicate values) | Use when we need to work with unique value. |
Use when we need to manipulate the data. | Use to remove duplicates from an array |
When high performance is really needed |
Final Words
I hope this article will be useful to you.
Please hit the Like and Follow buttons somewhere in the blog 🥲 It means the world to me.
I'm Howard Phung from Web Dev Distilled,
Looking forward to seeing you again in the next one soon! 👋
Have a great day!