JavaScript Sets

In this tutorial, we will explore the Set object in JavaScript, which is a collection of unique values. Unlike arrays, sets automatically ensure that all elements are distinct, making them ideal for scenarios where duplicates need to be avoided. We'll cover how to create sets, add and remove elements, check for the presence of elements, and perform other useful operations.

Introduction

Sets are particularly useful in situations where you need a collection of unique items without worrying about duplicates. For example, if you're collecting user IDs from a form submission, using a set ensures that each ID is stored only once, preventing any duplication.

Understanding sets is essential for efficient data management and can help avoid common pitfalls related to duplicate values in collections.

Creating a Set

You can create a new set by using the Set constructor. You can also initialize it with an array of values.

Basic Example

1const uniqueNumbers = new Set([1, 2, 3, 4, 5]);
2console.log(uniqueNumbers);

Set { 1, 2, 3, 4, 5 }

Adding Elements

To add elements to a set, use the add() method. This method adds an element to the set if it does not already exist.

1const uniqueNumbers = new Set([1, 2, 3]);
2uniqueNumbers.add(4);
3console.log(uniqueNumbers);

Set { 1, 2, 3, 4 }

Removing Elements

To remove an element from a set, use the delete() method. This method removes the specified element from the set and returns true if the element was successfully removed, or false otherwise.

1const uniqueNumbers = new Set([1, 2, 3, 4]);
2uniqueNumbers.delete(3);
3console.log(uniqueNumbers);

Set { 1, 2, 4 }

Checking for Elements

To check if a set contains a specific element, use the has() method. This method returns true if the element is in the set, or false otherwise.

1const uniqueNumbers = new Set([1, 2, 3, 4]);
2console.log(uniqueNumbers.has(2)); // true
3console.log(uniqueNumbers.has(5)); // false

true
false

Iterating Over a Set

You can iterate over the elements of a set using a for...of loop or by converting it to an array and using array methods.

Using for...of Loop

1const uniqueNumbers = new Set([1, 2, 3, 4]);
2for (let num of uniqueNumbers) {
3  console.log(num);
4}

1
2
3
4

Converting to Array

You can also convert a set to an array using the Array.from() method or the spread operator.

1const uniqueNumbers = new Set([1, 2, 3, 4]);
2const numbersArray = Array.from(uniqueNumbers);
3console.log(numbersArray);

[1, 2, 3, 4]

Practical Example

Let's create a practical example where we use a set to store unique user IDs from form submissions.

Complete Program

1const userIds = new Set();
2 
3function addUser(userId) {
4  if (userIds.has(userId)) {
5      console.log('User ID already exists.');
6  } else {
7      userIds.add(userId);
8      console.log(`User ID ${userId} added.`);
9  }
10}
11 
12addUser(101); // User ID 101 added.
13addUser(102); // User ID 102 added.
14addUser(101); // User ID already exists.
15 
16console.log('Unique user IDs:', Array.from(userIds));

User ID 101 added.
User ID 102 added.
User ID already exists.
Unique user IDs: [101, 102]

Summary

What's Next?

Now that you have a good understanding of JavaScript sets, the next topic is JavaScript Maps. Maps provide a way to store key-value pairs and offer more flexibility than sets. We'll explore how maps work, how to create them, add and remove entries, and perform other useful operations.

Stay tuned for our next tutorial!