JavaScript ES6 Sets

Recently @Duiker101 posted this tweet

⁉️JS Quiz ⁉️

We all know 42 is the answer to everything! Or is it?

What gets logged here?#100DaysOfCode #javascript pic.twitter.com/60WJ5VLcX7

— Simone - Hacker Typer 🇪🇺 (@Duiker101) April 2, 2020

This was my response:

I would say 1

Const cannot be changed so redeclaring it as "theAnswer" will just copy the whole thing as is.

So the new Set only has 1 time "magic" in it?

— Daily Dev Tips (@DailyDevTips1) April 2, 2020

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? permalink

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 permalink

let magic = new Set();
magic.add('🧙‍♀️');
magic.add('🕴'); 
magic.add('🎩'); 
console.log(magic.size); // 3
magic.add('🧙‍♀️');
console.log(magic.size); // 3

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

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

// magic 🕴
// magic 🎩

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

JavaScript ES6 Set for...of loop permalink

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 permalink

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

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

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();
valueSet.add(1);
valueSet.add(2);
valueSet.add(2);
valueSet.add('cool');
valueSet.add({key:1,value:'awesome'});

let values = valueSet.values();

console.log(values.next());

for (let value of values) {
	console.log(value);
}

console.log(values.next());

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

As you can see, we can use values.next() 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 permalink

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');
console.log(stringTest.size);

// 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! permalink

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