JavaScript ES6 Sets


Learn how to use JavaScript ES6 Set function!

4 Apr, 2020 · 3 min read

Recently @Duiker101 posted this tweet

This was my response:

So right-thinking the answer is 1. But not for a reason being const or let. The answer is because a JavaScript ES6 Set can only contain unique values.

🤦‍♂️ You see, even I make mistakes.

It made me realize I needed to find out more about Set.

What is JavaScript ES6 Set function?

Set are introduced in ES6 as a new object type. They create collections of unique values. Values can be more than a simple string or integer; for example, a value can be an object or array.

JavaScript Set comes with the following methods: size, add, clear, delete, entries, forEach, has.

Create a simple set in JavaScript ES6

let magic = new Set();
console.log(magic.size); // 3
console.log(magic.size); // 3

console.log(magic.has('🧙‍♀️')); // true
console.log(magic.has('🔥')); // false
console.log(magic.has('🧙‍♀️')); // false

magic.forEach(item => {
	console.log(`magic ${item}`);

// magic 🕴
// magic 🎩

console.log(magic.size); // 0

JavaScript ES6 Set for…of loop

It’s cool we can use the forEach function, but we can even use the for...of loop on a Set

let weatherData = new Set(['☀️','🌦','⚡️']); 

for (let weather of weatherData) {
	console.log(`Today's weather is ${weather}`);

// Today's weather is ☀️
// Today's weather is 🌦
// Today's weather is ⚡️

JavaScript ES6 Set with multiple types

As mentioned a set can have multiple types in it, as long as they are unique.

let testSet = new Set(['🔥','🤟','🔥']);
testSet.add({key:1, value:'❤️'});
console.log(testSet.size); // 4
testSet.forEach(item => {

// 🔥
// 🤟
// ["🔥", "❤️"]
// {key: 1, value: "❤️"}

As you can see, we start with an array, which gets deconstructed. The array we add laters stays an array! Also, the duplicate 🔥 emoji get’s removed.

JavaScript ES6 Set values()

We also haves the values() and keys() on a JavaScript Set(). Both return a Iterator object that returns the values for each element in the Set

let valueSet = new Set();

let values = valueSet.values();


for (let value of values) {


// {value: 1, done: false}
// 2
// cool
// {key: 1, value: "awesome"}
// {value: undefined, done: true}

As you can see, we can use to manually go through the results, these will be handles as done and next()` will return if done is true or false.

ES6 JavaScript Set with a String

Something cool I found out was that you could use it on a string to define unique characters like so:

console.log('Lorem Ipsum Dolar Si Amet'.length);
let stringTest = new Set('Lorem Ipsum Dolar Si Amet');

// 25
// 17

Feel free to play with this Codepen.

See the Pen JavaScript ES6 Sets by Chris Bongers (@rebelchris) on CodePen.

I hope you enjoyed my learning today!

Feel free to drop me a message here or on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 2099 devs and subscribe to my newsletter