# Introduction to Set object in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 16, 2019, updated Oct 8, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/sets-javascript

> An introduction to ES6's newest data type Set and how to use it to create a collection of unique values in JavaScript. 

A `Set` is a new type of object in ES6 that lets you create a collection of unique values. Each value appears only once in the set. The values stored in a `Set` can be either primitive types (strings, numbers, booleans) or objects (object literals, arrays). 

## Creating a new `Set` object

You can use the `Set()` constructor to create an empty set:

```javascript
const birds = new Set()
```

Alternatively, you can pass an iterable object (like an array) to the constructor to initialize the set. All the elements in the iterable will be added to the new set:

```javascript
const birds = new Set(['?', '?', '?', '?'])
```

Since strings are iterable, they can also be passed in to create a set:

```javascript
const fruits = new Set('?????')
```

If the iterable object contains [duplicate items](https://attacomsian.com/blog/javascript-remove-duplicates-from-array#set-object), they will be automatically removed.

## `Set` methods

Some of the methods you can use on a `Set` object are `add()`, `has()`, `size`, `delete()` and  `clear()`:

```javascript
const birds = new Set()

// add items
birds.add('?')
birds.add('?')
birds.add('?')
birds.add('?')

// check if item exists
birds.has('?') // true
birds.has('?') // false

// get items count
birds.size // 4

// delete item
birds.delete('?') // true
birds.delete('?') // false - already deleted

// delete all items
birds.clear()
```

Since a set can only store unique values, calling `add()` with the same value multiple times won't add new items:

```javascript
const birds = new Set()
birds.add('?')
birds.add('?')
birds.add('?')

birds.size // 1

console.log(birds) // Set(1) {"?"}
```

## Adding objects in `Set`

We can also put different objects types, such as object literals, arrays, dates, etc., into the set:

```javascript
const set = new Set(['?', '?'])

set.add(['?', '?'])
set.add({ name: 'John Doe', planet: 'Earth' })
set.add(new Date())

set.forEach(value => {
  console.log(value)
})

// ?
// ?
// ["?", "?"]
// {name: "John Doe", planet: "Earth"}
// Thu May 16 2019 12:47:09 GMT+0100
```

## Iterating over a `Set` object

You can use the [`forEach()`](https://attacomsian.com/blog/javascript-foreach) method to iterate over a `Set` object:

```javascript
const flowers = new Set(['?', '?', '?', '?'])

flowers.forEach(flower => {
  console.log(`Hey ${flower}!`)
})

// Hey ?!
// Hey ?!
// Hey ?!
// Hey ?!
```

Alternatively, you can use the `for...of` loop to iterate over a `Set` object:

```javascript
for (const flower of flowers) {
  console.log(flower)
}
```

## Keys and values

The `Set` object also has `keys()` and `values()` methods just like [Maps](https://attacomsian.com/blog/maps-javascript). The only exception is the `keys()` method is just an alias of the `values()` method. Both return a new iterator object with the values in the same order as they were added to the set. We can also use these methods to iterate over the set:

```javascript
const fruits = new Set('?????')

for (const k of fruits.keys()) {
  console.log(k)
}

for (const v of fruits.values()) {
  console.log(v)
}
```

We can also use the iterator to iterate over the set values one-by-one like the following:

```javascript
const fruits = new Set('???')
const items = fruits.values()

console.log(items.next()) // {value: "?", done: false}
console.log(items.next()) // {value: "?", done: false}
console.log(items.next()) // {value: "?", done: true}
```

Calling `next()` returns each item as a `{value: <value>, done: <boolean>}` object until the iterator finishes, at which point the `done` is `true`. The `Set` object has another method called `entries()` that also returns an iterator, but the value is repeated twice: 

```javascript
const fruits = new Set('???')
const items = fruits.entries()

console.log(items.next()) // {value: ["?", "?"], done: false}
```

## Conclusion

A `Set` is a new object type introduced in ES6 that allows you to create collections of values. A value can be either a primitive or an object and can occur only once in the set; it is unique in the collection. You can iterate through the values in the order they were inserted in the set.

If you need to learn more, check out our guide on the [`Map` object in JavaScript](https://attacomsian.com/blog/maps-javascript).