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()
!
Tip: Get the unique values of an array in JS. Use ES2015 Set() and …rest to discard duplicate values. pic.twitter.com/7lE8M4b4Ux
— Addy Osmani (@addyosmani) January 15, 2018
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! ?