What is Set in ES6 (part 1/2)

Raymon
29-01-2018

The ES6 spec is full of new features that continuously be introduced in all the new browsers. The Set collection is one of those new things.

My first thought was, well I could just use a normal Array! But I will show you what you can do with the Set collection.

What is the ES6 Set?

What is a Set and what can you do with it? Well, the Mozilla Docs are very clear about this:

The Set collection lets you store unique values of any type, whether primitive values or object references. source: Mozilla Docs

This special Object can store all kinds of values like normal objects, but they have to be unique, duplicate values will be filtered out of it.

Thanks to the tweet of Addy Osmani, I discovered it Set()!

Filtering duplicate values out of a JavaScript Array, was always a hassle, you needed to loop through the Array and figure it out yourself, so Set is making it a lot easier. ?

Add data to Set

There are a few ways to add data to a Set collection.

Pass as parameter

This is an example of adding data as a parameter to a Set collection.

const numbersSet = new Set([1,2,3,4,5]);
const stringSet = new Set(['Jan', 'Rick', 'Raymon', 'Tim']);
const objectSet = new Set([{a: 1, b: 2}]);
const arraySet = new Set([['javascript', 'coffeescript'], ['css', 'sass']]);

Add data by the add method

The other way of passing data into a Set collection is by using the add() method.

const newSetObject = new Set();
newSetObject.add('Raymon');
newSetObject.add({a: 1, b: 2});
newSetObject.add(1).add(2).add(3).add(4).add(5)

// Result: Raymon, {a: 1, b: 2}, 1, 2, 3, 4, 5

Check values inside Set with has method

The Set collection has a very handy method for checking if a certain value is inside the object.

const numbersSet = new Set([1,2,3,4,5]);
const stringSet = new Set(['Jan', 'Rick', 'Raymon', 'Tim']);
const objectSet = new Set([{a: 1, b: 2}]);
const arraySet = new Set([['javascript', 'coffeescript'], ['css', 'sass']]);

numberSet.has(4); // true
numberSet.has(6); // false
stringSet.has('Raymon'); // true
objectSet.has({a: 1, b: 2}); // false
arraySet.has('css'); // false

The has() method works fine on primitive values, but non-primitive values like the Object and Array is not working.

There is 1 reason why the non-primitive values are not working link the primitive values. The reason is that the has() method is comparing not only the values but also it’s reference with the === operator.

If you have the reference to the Object or Array in a variable and use that in the has() method, then the result will be as expected.

const exampleObject = {a: 1, b: 2};
const exampleArray1 = ['javascript', 'coffeescript']
const exampleArray2 = ['css', 'sass'];
const objectSet = new Set([exampleObject]);
const arraySet = new Set([exampleArray1, exampleArray2]);

objectSet.has({a: 1, b: 2}); // false
objectSet.has(exampleObject); // true
arraySet.has('css'); // false
arraySet.has(exampleArray1); // true
arraySet.has(exampleArray2); // true

So keep in mind that it is important to have a reference to the non-primitive values when you use the has() method on the Set collection.

Remove data from the Set

Adding data to a Set collection was very simple, but deleting data from the collection is as easy.

Remove data with delete method

If you want to remove an item on the Set collection, simply use the remove method.

const numbersSetObject = new Set([1,2,3,4,5,6,7,8,9]);
numbersSetObject.has(2); // true
numbersSetObject.delete(2);
numbersSetObject.has(2); // false
console.log(numbersSetObject); // 1,3,4,5,6,7,8,9

Remove all data with clear method

But if you want to remove all the data from the Set collection, use the clear method.

const numbersSetObject = new Set([1,2,3,4,5,6,7,8,9]);
numbersSetObject.has(2); // true
numbersSetObject.clear();
console.log([...numbersSetObject]); // []

In the second part about the Set in ES6 we are gonna check a lot more features.

If you have questions about the Set, please let me know in the comments! ?

LEAVE A REPLY

you might also like