JavaScript Set Object
In Mathematics, a
Set
is a collection of distinct objects. True to its mathematical
definition, in JavaScript too, a
Set
object lets you store unique values of both primitive and object data
types.
Besides the usual primitive types like number and string,
null,
undefined and
NaN can also be stored in a Set.
A Set object is created with the
new keyword. Here we give an example, we
create a Set object called irrationals.
var irrationals = new Set();
In a Set object, we can store both primitive as well as object data
types. Here we add a number 3.141, an
object literal {e: 2.718} and an array
[1.618] to the Set
irrationals we just defined above. We use
the
add()
method for the purpose.
irrationals.add(3.141); // pi
irrationals.add({e: 2.718}); // e; Euler's Number
irrationals.add([1.618]); // phi; the Golden Ratio
console.log(irrationals);
console.log(irrationals.size); // 3
We can also add null,
undefined and
NaN to the Set.
irrationals.add(null);
irrationals.add(undefined);
irrationals.add(NaN);
console.log(irrationals);
A value is unique to a Set, so it will occur only once in a
Set. So even if a value is added twice or thrice, it will not be added
extra. The below add() statements will get
only one value 3.141 into the Set
irrationals.
irrationals.add(3.141); // pi
irrationals.add(3.141); // pi
irrationals.add(3.141); // pi
console.log(irrationals.size); // 6
Now let us clear off the above Set. We use the
clear() method for removing all the Set
elements.
irrationals.clear();
console.log(irrationals.size); // 0
But if you wish to delete just a single value, use the
delete() method.
irrationals.add(3.141); // pi
console.log(irrationals.size); // 1
delete(3.141);
console.log(irrationals.size); // 0
You can also add evaluated values to a Set. In the following,
2+2,
Math.sin(0) and
eval(2*3) evaluates to
4, 0 and
6 respectively. And they are all added to
the irrationals Set. The
has()
method confirms their presence in the Set.
irrationals.add(2+2);
irrationals.add(Math.sin(0));
irrationals.add(eval(2*3));
irrationals.has(4); // true
irrationals.has(0); // true
irrationals.has(6); // true
However, when it comes to objects, the
has() method does not compare as it does
with primitives like numbers and strings. You can add seemingly same
object literals or arrays to a Set multiple times and they all will be
added. Let us clear off the Set
irrationals and add
{pi: 3.141} two times. The
has() method checking the presence of a
value in the Set, returns a false for the
same object literal {pi: 3.141}.
irrationals.clear();
irrationals.add({pi: 3.141});
irrationals.add({pi: 3.141});
irrationals.has({pi: 3.141}); // false
This happens because the object of references were all different. But
if an object is assigned to a variable as here, then the
has() method returns
true.
var obj = {pi: 3.141};
irrationals.add(obj);
irrationals.has(obj); // true
Iteration over Set items
Iteration over Set items can be achieved with the
for ... of
statement. It creates a loop iterating over iterable objects,
including a Set object.
for (let item of irrationals) console.log(item);
for (let [key, value] of irrationals.entries()) console.log(key);
Remove Duplicate elements from an Array using Set
We can use the Set object to remove duplicate elements from an array. Here we make use of the Spread operator.
const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5];
console.log([...new Set(numbers)]);