What are JavaScript Sets? 
Tags: javascript, beginners
Published: 2021-10-15 16:00:46

Photo by <a href="https://unsplash.com/@rgaleria?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ricardo Gomez Angel</a> on <a href="https://unsplash.com/s/photos/primary-colors?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

#JavaScript sets 
JavaScript sets were introduced in ES6. 

[`Set` objects are collections of values.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) 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.