JavaScript ES6 Sets

— 7 minute read

permalink

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