Sets in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2019-06-12 14:53:25

*This post was originally published on [attacomsian.com/blog](https://attacomsian.com/blog/sets-javascript).*

---

A Set is a special 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). 

## Initialize a Set

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('🍒🍇🍉🍓🍑');
```

## 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) {"🐦"}
```

## 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 Sets

You can use `forEach()` to iterate over sets:

```javascript
const flowers = new Set(['🌷', '🌹', '🌻', '🌸']);

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

// Hey 🌷!
// Hey 🌹!
// Hey 🌻!
// Hey 🌸!
```

You can also use `for...of` loop to iterate over sets:

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

## Keys and Values

Sets also have `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 `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`. Sets have another method called `entries()` which 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

Sets are 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 an order they were inserted in the set.

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

---

✌️ I write about **modern JavaScript, Node.js, Spring Boot**, and all things **web development**. [**Subscribe to my newsletter**](https://attacomsian.com/newsletter) to get web development tutorials & protips every week.

---

**Like this article?** [Follow @attacomsian on Twitter](https://twitter.com/attacomsian). You can also follow me on [LinkedIn](https://linkedin.com/in/attacomsian) and [DEV](https://dev.to/attacomsian).