Set, a Standard Built in Javascript Object

Introduction

I know longer consider myself a javascript newbie, but neither do I consider myself an expert because when I run across stuff like:

const getUniqueValues = arr => {
   const uniques = new Set(arr)
   const result = []
   uniques.forEach(val => result.push(val)
   return result
}

And I'm thinking what the heck is Set? Did they declare a class that I didn't see...well know you see Set is a built in object of Javascript just like an array or an object 🤯.

According to MDN web Docs: the Set object lets you store unique values of any type, whether primitive values or object references.

So basically we use Set to store unique values of any type. Let's look at some of it's functionality and common use cases.

How to Declare

Just like you can declare an array using the key words new Array we can do the same with new Set:

const arr = new Array(1, 0, 2, 2, 0, 7, 8, 0, 5, 5)
// arr => [1, 0, 2, 5]

const set1 = new Set(d)
// d => Set { 1, 0, 2, 7, 8, 5 }

//or
const set2 = new Set([1, 0, 2, 2, 0, 7, 8, 0, 5, 5])
// set2 => Set { 1, 0, 2, 7, 8, 5 }

As you see when ever a set is declared using an array a Set object is returned that contains only unique values.

Now a Set object can contain any type of value but it only keeps the unique values, for example:

const set3 = new Set(['rainbows', {animal:'tiger'},2,3,3,3, 'rainbows', 'food', 20], {animal:'tiger'})

// set3 => Set { 'rainbows', { animal: 'tiger' }, 2, 3, 'food', 20 }

Built in Methods

Set has a few built in instance methods that we can use to manipulate and access information about our Set instance:

const set1 = new Set([2, 4, 5, 3, 0])

//The add method appends an element to the end of the Set and 
// returns the Set with the new element.
set1.add(1)
// set1 => Set { 2, 4, 5, 3, 0, 1 }

//The .delete method returns true if it successfully deleted the element.
set1.delete(5)
// set1 => true

//and false if it the element wasn't present to delete.
set1.delete(5)
// set1 => false

//The `.has` method returns true if the element is present and 
// false if it is not, similar to the .includes for arrays
set1.has(0)
// set1 => true

//The .clear method erases the entire Set so that it is empty.
set1.clear()
// set1 => Set{}

Iterator Methods

For the purpose of this post we are only going to look at two of the iterator methods as some of the other ones are aliases and operate similar to the ones we will describe.

First is the .forEach method that works similarly as the .forEach array method:

const set1 = new Set(["james", "andrew", "john", "charles"])

const capitalize = name => {
  console.log(name[0].toUpperCase() + name.slice(1, name.length))
}

set1.forEach(capitalize)
// => James
//    Andrew
//    John
//    Charles

set1
// => Set { 'james', 'andrew', 'john', 'charles' }

Do note that just like the array method .forEach it does not return anything nor does it change the original set

The second iterator method works similar to a linked list using .next to iterate through the Set. First you have to initiate an iterator using the .values() or .keys method and then you can use those instances of the Set to iterate:

const set1 = new Set(["james", "andrew", "john", "charles"])
const setIterator = set1.values()

setIterator.next()
// => { value: 'james', done: false }

setIterator.next().value()
// => 'andrew'

setIterator.next()
// => { value: 'john', done: false }

setIterator.next()
// => { value: 'charles', done: false }

setIterator.next()
// => { value: undefined, done: true }

setIterator.next().done
// => true

Once the iterator has reached the end of the Set the done property will return true.

An Example Use Case

You've already seen a possible use at the beginning of this post, which is probably the most obvious one I can think of. We used the Set object to get all of the unique values in an Array and return those unique values in an array:

const getUniqueValues = arr => {
   const uniques = new Set(arr)
   const result = []
   uniques.forEach(val => result.push(val)
   return result
}

You can also get the length of a set by calling .size property:

const set1 = new Set([1, 2, 3, 4])
set1.size
=> 4

Conclusion

I wrote this post to help myself better understand the functionality of the Set object and hopefully help others in the future who run across it and also wonder what it is. There is a lot more that wasn't covered in this post and if you're interested checkout the docs.