The Basics: JavaScript Set
Tags: javascript, set
Published: 2021-10-03 15:59:54

---
title: The Basics: JavaScript Set
published: true
description: Learn Set Data Structure in Javascript
tags: javascript, set
series: JavaScript Data Structures, The Basics
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixoangsrm0wnjd3jyzcn.jpeg
---

Set is one of a handful of Data Structures built into the JavaScript language. It is similar to the Array in that is it used to store a a collection of data with one key difference, it doesn't allow duplicate entries.

You rarely ever see Set used in the wild compared to other Data Structures, and that's not by chance. It has a very limited set of APIs, making it less suitable for most use cases. As a matter of fact, other than ensuring uniqueness of data, it doesn't seem like it has much use.

Let's take a look at how to create and use Sets

## Creating a Set
```javascript
var uniqueData = new Set()
```
Unlike Array and Object which have reserved characters for creating a new instance, there is only one way to create a Set, and that is by using the `new Set()` constructor

The `Set()` constructor take 0 or 1 argument which MUST be an _iterable_ or an Array-like value (String, Array). In more technical terms, the argument must implement the [iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) protocol

```javascript
// All valid ways to create a set ✅
var uniqueList = new Set()
var uniqueList = new Set(undefined)✅
var uniqueList = new Set([1, 2])✅
var uniqueList = new Set("12")✅

// Number, Boolean, and Object, are not valid arguments ❌
var uniqueData = new Set(1)
var uniqueData = new Set({})
var uniqueData = new Set(false)
```

## Set Operations
### Add
```javascript
var uniqueList = new Set()
uniqueList.add(2)
```
The `add()` method, like the name suggests, is used to add an item to a set. It accepts any type of value, and returns the set, including the newly added item. If the item already exists, `add()` does nothing and just returns the set unchanged. Because the `add()` method returns the set, you could chain multiple `add()` methods
```javascript
uniqueList.add(3).add(4)
```
or other set methods
```javascript
uniqueList.add(3).delete(3)
```

### Delete
```javascript
var uniqueList = new Set()
uniqueList.add(1)

uniqueList.delete(1) // deletes 1 from the set
```
`delete()` removes an item from a set if it exists, and does nothing otherwise. It returns `true` if the item was deleted successfully and `false` if the item doesn't exist in the set

### Has
```javascript
var uniqueList = new Set()
uniqueList.add(1)

uniqueList.has(1) // true
uniqueList.has(2) // false
```
`.has()` checks for the occurrence of an item within a set. It returns `true` or `false` depending on whether the item exists

### Clear
```javascript
var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

uniqueList.clear() // removes both 1 and 2
```
`.clear()` deletes every item from a set

### Keys, Values
`.values()` returns an [Iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) that we can use to loop over the values in the Set. Not to be confused with the implementation of `Object.values(object)` which returns an Array

```javascript
var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

for (var value of uniqueList.values()) {
  console.log(value) //
}

// 1
// 2
```

`.keys()` has the exact same functionality of `.values()` and is basically just an alias

### Entries
`.entries()` returns an Iterator just like `.values()`, with the only difference being that it returns a two-element Array for every iteration. But since Sets have no keys, the value just gets repeated twice. So what's the point you ask? Apparently it's solely > to keep the API similar to the Map object

```javascript
var uniqueList = new Set()
uniqueList.add(1)
uniqueList.add(2)

for (var value of uniqueList.entries()) {
  console.log(value) //
}

// [1, 1]
// [2, 2]
```