How many times have you seen or written code that looks like this.

const uniqueList = [1, 2, 3, 4, 5]
const newNumber = 4

if (!uniqueList.includes(newNumber)) {
  uniqueList.add(newNumber)
}

There is nothing inherently wrong with this code, but when it comes to creating lists of unique items, arrays are generally not the best option. This is where JavaScript Sets come in.

A Set in JavaScript is a class that allows you store an array of values just like a normal array, but it enforces uniqueness of those items. This means if the uniqueList was a Set and we tried to add a number that was already in the set it would just not add the number. This is super useful for maintaining unique lists, but it is also really useful for other tasks that I will talk more about at the end of this article.

JavaScript Maps are very similar to Sets, but as a replacement for objects. If you are interested in learning more about Maps check out this article.

How To Use Sets

Sets and arrays are very similar, but nearly all the methods between the two have slightly different names and implementations.

Creating A Set

A Set is just a class which can be instantiated. If you don’t pass it any parameters then it will be an empty Set which is similar to an empty array. If you want to populate the Set with a list of values you will need to pass it any iterable value such as an array.

const emptySet = new Set()
const itemSet = new Set([1, 2, 3, 4])

Adding Items

Once you have a Set you will most likely need a way to add items to that Set. This is a simple as using the add method and passing the item to add. This works just like push does for arrays and adds the item to the end of the list, but the add method actually returns the Set object so you can chain it together with other add method calls.

const itemSet = new Set()

itemSet.add(1)
itemSet.add(2)
itemSet.add(3).add(4) // Chaining
// [1, 2, 3, 4]

Getting Values

Getting items is by far the biggest difference between arrays and Sets. In an array you can access elements by index, but with a Set you cannot access individual elements by index. Doing this on a set will just always return undefined.

const array = [1, 2]
const itemSet = new Set(array)

console.log(array[0])
// 1

console.log(itemSet[0])
// undefined

Instead of directly accessing elements in a Set you will need to instead check to see if an element exists or loop over all elements. This is no big deal, though, as accessing elements by index is pretty much never needed in a Set.

Checking For Values

Sometimes you just want to see if a Set already has a specific value stored. You can do this with the has method by passing it the item you want to check for.

const itemSet = new Set([1, 2, 3, 4])

itemSet.has(1)
// true
itemSet.has(5)
// false

Removing Values

The final CRUD operation you may want to perform is removal and that again is incredibly easy. Just call delete and pass the item you want to remove.

const itemSet = new Set([1, 2, 3, 4])

itemSet.delete(1)
itemSet.has(1)
// false

Iterating Over A Set

There are many ways to iterate over a Set but the most common is the forEach method. This method works just like the array forEach method.

const itemSet = new Set([1, 2, 3, 4])

itemSet.forEach(item => {
  console.log(item)
})
// 1
// 2
// 3
// 4

Other Useful Methods And Properties

• You can get the size of a Set with the size property.
• You can remove all key/value pairs from a Set with the clear() method.

Set Use Cases

It is pretty obvious that Sets are useful for unique lists of items, but they actually have many other creative use cases as well.

Removing Duplicates

If you have an array with possible duplicate values you can convert it to a Set and then back to an array to remove all the duplicates since a Set will remove any duplicates when created.

const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const array = [...itemSet] // Convert Set to array
console.log(array)
// [1, 2, 3]

Ensuring A List Is Unique

You could take the above example a step further to see if an array is actually unique or not as well.

const arrayWithDups = [1, 1, 2, 3, 3]
const itemSet = new Set(arrayWithDups)
const isUnique = itemSet.size === arrayWithDups.length
console.log(isUnique)
// false

Anytime You Need To Delete Elements From A List

Deleting elements in an array is not always easy since there is no good built in delete method for arrays. Sets on the other hand have an easy to use delete method which makes Sets ideal for scenarios where you need a list that will have items removed from it.

Conclusion

Sets are a great tool that you can use in place of arrays when you need to do tasks that require unique lists.