What is Set in ES6 (part 2/2)

Raymon
31-01-2018

In the first part about the ES6 Set we covered how you can add and delete data from a Set collection. In the second part I want to cover a few more features.

Check the number of items with the size property

Like the Array you check the number of items with the length property, the Set collection has the size property for that.

If we check the Set collection from the previous example, the size will be 7.

newSetObject.size // 7

Filter duplicate primitive values

If I try to put duplicated primitive values into the Set, only the unique ones stay.

const uniqueArray = new Set([1,2,2,2,3,4,5,5,6,7,9,9,8]);
console.log('uniqueArray: ', uniqueArray)
// unique: 1, 2, 3, 4, 5, 6, 7, 9, 8

Filter duplicate non-primitive values

The nonprimitive values are bit different with filtering out the duplicates. The docs are very clear, the Set is not comparing Objects in itself, they compare the reference.

See it as comparing things with the == operator, but with the === operator the reference and value will be compared.

If we try to put 2 equal objects, with a different reference in the Set, then there will be no problem.

const objectSet = new Set([{a: 1, b: 2}, {a: 1, b: 2}]);
console.log('objectSet: ', objectSet);
// objectSet: {a: 1, b: 2}, {a: 1, b: 2};

But what happened when we put in equal objects with the same reference?

const demoObject = {a: 1, b: 2};
const objectSet = new Set([demoObject, demoObject]);
console.log('objectSet: ', objectSet);
// objectSet: {a: 1, b: 2};

Hope you guessed that the objectSet contains only 1 demoObject. It clears the duplicated ?

Loop over a Set

The nice thing about a Set is, you can loop over a Set!

The docs tell more about the Set:

Set objects are collections of values. You can iterate through the elements of a set in insertion order. source: Mozilla Docs

To loop over a Set collection we can use the for-of loop and the forEach method which is attached to the Set.

Loop with forEach method

With Set.forEach() you can loop through all the data in the Set collection.

const objectSet = new Set([{a: 1, b: 2}, {a: 1, b: 2}]);
objectSet.forEach(object => {
    console.log('Object: ', object);
})

// result:
// Object:  {a: 1, b: 2}
// Object:  {a: 1, b: 2}

Loop with for-of loop method

With the for-of loop we have a few methods to loop over all the items inside the Set collection.

  • entries()
  • keys()
  • values()
const objectSet = new Set([{a: 1, b: 2}, {a: 1, b: 2}]);
for (let [key, value] of objectSet.entries())  {
    console.log(key);
}

// {a: 1, b: 2}
// {a: 1, b: 2}

The only weird thing is, that entries, keys and values methods give back exactly the same thing on the Set. Maybe it is because Set and Map API have a lot in common.

Difference between Set and Map

The biggest difference between a Map and Set is that the Set looks very similar to an Array and a Map looks more like an Object.

I hope that this article will help you! If you got questions please let me know in the comments?

LEAVE A REPLY

you might also like