Photo by Ricardo Gomez Angel on Unsplash

JavaScript sets

JavaScript sets were introduced in ES6.

Set objects are collections of values. There can never be any duplicates inside of them, which can make them pretty useful depending on the situation.

In order to create a Set, we use the Set.() constructor, which will create a new Set object.

const colors = new Set([ 'Red', 'Green', 'Blue', 'Purple', 'Purple', 'Red', 'Red', 'Blue', 'Magenta']);

console.log(colors)
// Returns 
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}

A Set can hold mixed data types, just like an array. It is also iterable, like an array. However, there are two big differences between a Set and an array.

• A Sets elements are unique.
• The order of elements in a Set is irrelevant.

When creating a Set, if we pass in a string as the value, it is an iterable. Whatever is passed in, will become a set of unique characters, with the duplicates removed. Using the string Hello, if we pass it into a new Set constructor, the second l will be removed, and we'll be returned a set that consists of only {'H', 'e', 'l', 'o'}.

console.log(new Set('Hello'))
// Returns 
Set(4) {'H', 'e', 'l', 'o'}

Working with Sets

There are several methods, and properties that can be used with Sets in order to manipulate the data.

The .add() method can add a new element onto our Set. But just as all values are unique in a set, if you try to add a value twice, the second one will be ignored.

colors.add('Yellow')
Set(6) {'Red', 'Green', 'Blue', 'Purple', 'Magenta', …}

The .has() method can check to see if a set contains a specific element. It's similar to the .includes() method in arrays.

colors.has('Yellow')
// Returns 
true

Unlike arrays, as the order doesn't matter in Set's, we can't pass in an index. Doing so will return undefined.

console.log(colors[0])
// Returns
undefined

The .size property is similar to the .length property in arrays, and will return the size of our Set object.

colors.size
// Returns 
6

We can delete elements from a set using the .delete() method.

colors.delete('Yellow')
// Returns
true 
colors
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}

Another method that can be used on a Set is the .clear() method, which will delete all of the elements of the set.

colors.clear()
colors 
// Returns
Set(0) {size: 0}

We can also iterate over the items in a set, using both the .forEach() method, or a for/of loop.

for (let item of colors) console.log(item)
// Returns 
Red
Green
Blue
Purple
Magenta

Converting between a Set and an Array.

If we wanted to convert an array into a Set, it's very simple. We can use the regular Set constructor on an array, and it will transform it.

let arr = ['Hello', 'how', 'are', 'you?']

let newSet = new Set(arr)
console.log(newSet)
// Returns 
Set(4) {'Hello', 'how', 'are', 'you?'}

If we wanted to convert a Set into an Array, we can use the spread operator.

console.log([...newSet])
// Returns 
(4) ['Hello', 'how', 'are', 'you?']

Sets also have the keys and values methods. keys is an alias for values, so both methods do the same thing pretty much. Using either of them will return a new iterator object, that yields the values for each element in the Set in the order they appear.

let iceCreamFlavors = new Set();
iceCreamFlavors.add('vanilla'); // vanilla
iceCreamFlavors.add('chocolate'); // chocolate
iceCreamFlavors.add('mint chocolate chip'); // mint chocolate chip

let setItr = iceCreamFlavors.values();

console.log(setItr.next().value);
console.log(setItr.next().value);
console.log(setItr.next().value);

Conclusion

Sets are very easy to interact with thanks to how straightforward their methods are, and because of that can be a very useful tool. I hope that this introduction to them has helped explain just how helpful they can be.