WittCode💻

JavaScript Set Explained

By

Learn about the JavaScript Set object including time complexity, methods, and use cases.

Table of Contents 📖

What is a Set?

A JavaScript Set is an object that stores unique values. In other words, each value in a Set can only be present once. These values can be either primitive values (string, number, boolean, etc.) or object references. To create a Set, we use the Set constructor.

const mySet = new Set();

Adding Values to a Set

We can also initialize a Set with values by passing an iterable to its constructor. An iterable is essentially an object that can be iterated or looped over. An example of an iterable is an array.

const mySet = new Set([1, 2, 3]);

All the elements passed to the Set constructor are added to the Set. We can also add an element to a Set with the add method.

mySet.add(4);

However, as Sets can only contain unique values, if the element provided to add is already present in the Set then it won't be added. We can check this by using the size property of a Set.

const mySet = new Set([1, 2, 3]); mySet.add(4); mySet.add(1); // Already present so not added console.log(mySet.size); // 4

Iterating a Set

There are a few different methods we can use to iterate over a Set. The first is forEach. The forEach method invokes a function for each element in the Set. As an example, lets sum all the numbers in our Set.

let sum = 0; mySet.forEach(value => { sum += value; }); console.log(sum); // 10

We can also get the Set iterator object itself by using the values method. An iterator object has a next method that returns an object containing the current value and a boolean signaling if the iterator has been completely iterated through or not.

const mySetValues = mySet.values(); mySetValues.next(); // { value: 1, done: false } mySetValues.next(); // { value: 2, done: false } mySetValues.next(); // { value: 3, done: false } mySetValues.next(); // { value: 4, done: false } mySetValues.next(); // { value: undefined, done: true }

There is also a method called keys that can be called on a Set that does the same thing as the values method. A Set doesn't actually have keys, this method is simply an alias for the values method.

const mySetKeys = mySet.keys(); mySetKeys.next(); // { value: 1, done: false } mySetKeys.next(); // { value: 2, done: false } mySetKeys.next(); // { value: 3, done: false } mySetKeys.next(); // { value: 4, done: false } mySetKeys.next(); // { value: undefined, done: true }

Another way to access values inside a Set is with the entries method. The entries method also returns an iterator object but it returns an object where the value key has an array with the value listed twice as opposed to listing the value once like with values and keys.

const mySetEntries = mySet.entries(); mySetValues.next(); // { value: [ 1, 1 ], done: false } mySetValues.next(); // { value: [ 2, 2 ], done: false } mySetValues.next(); // { value: [ 3, 3 ], done: false } mySetValues.next(); // { value: [ 4, 4 ], done: false } mySetValues.next(); // { value: undefined, done: true }

The reason for this method is to keep a Set similar to the Map object. This is also the reason for the keys method, to keep the Set API similar to the Map object. From the information above, it is important to note that iterating through a Set happens in insertion order. Insertion order is the order that each element was inserted into the Set by the add method.

Removing Values from a Set

There are a couple methods to remove a value from a Set. One of these is delete. The delete method removes the element provided and returns a boolean specifying whether the element was removed or not.

let deleted; deleted = mySet.delete(1); console.log(deleted); // true console.log(mySet); // Set(3) { 2, 3, 4 } deleted = mySet.delete(1); console.log(deleted); // false

We can remove every element from a Set by using the clear method.

mySet.clear(); console.log(mySet.size); // 0

Checking an Element Exists

Sets also have a method called has that accepts an element and returns a boolean specifying if it is present in the Set or not.

const myNewSet = new Set([1, 2, 3]); myNewSet.has(1); // true myNewSet.has(4); // false

Set Performance and Use Case

A Set does have some performance benefits. For example, using the has method of a Set is, on average, faster than the includes method of an array when both the Set and array are the same size. Specifically, the has method runs in O(1) for Sets and includes runs in O(n) for arrays. Insertion and deletion are also O(1) in a Set. However, some draw backs are that Sets do not support random access meaning we cannot get a specific item in it like we can with arrays. Therefore, Sets are useful when we need to hold unique values but random access and changing the order of elements isn't needed.