Set, a Standard Built in Javascript Object
Tags: javascript, beginners
Published: 2021-12-17 17:12:36

## Introduction

I know longer consider myself a javascript newbie, but neither do I consider myself an expert because when I run across stuff like:
```javascript
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`:

```javascript
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:

```javascript
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:

```javascript

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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).