Understanding Set Data Structure in JavaScript

When to use Set? When to use Array?

·

3 min read

Understanding Set Data Structure in JavaScript

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? 🤔

ArraysSets
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!