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.

js 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
				
			
js set irrationals

We can also add null, undefined and NaN to the Set.

				
				irrationals.add(null);
				irrationals.add(undefined);
				irrationals.add(NaN);

				console.log(irrationals);
				
			
js set add undefined null nan

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)]);