Javascript Sets

Sets are commonly used in scenarios where you need to work with collections of unique elements.

From the MDN Web Docs

The Set object lets you store unique values of any type, whether primitive values or object references.

Common Use Cases

Removing duplicates from an array

Since a Set automatically removes duplicates, you can convert an array to a Set and back to an array to remove duplicate elements.

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Outputs: [1, 2, 3, 4, 5]

Membership check

Checking if an element exists in a Set is faster and more efficient than checking if it exists in an array.

let mySet = new Set([1, 2, 3, 4, 5]);
console.log(mySet.has(3)); // Outputs: true

Set operations

You can perform operations like union, intersection, difference, and symmetric difference on Sets, similar to mathematical set operations.

Remember!

Sets only store unique values, so they are not suitable for cases where duplicate values are important.

Set Declaration

A Set is declared using the new Set() constructor. You can optionally pass an iterable (like an array) to the constructor to initialize the Set with values.

// Declare an empty Set
let set1 = new Set();

// Declare a Set with initial values
let set2 = new Set([1, 2, 3, 4, 5]);

console.log(set1); // Outputs: Set(0) {}
console.log(set2); // Outputs: Set(5) { 1, 2, 3, 4, 5 }

set1 is an empty Set, and set2 is a Set initialized with the values 1, 2, 3, 4, and 5. Note that Sets automatically remove duplicate values, so each value in a Set is unique.

Checking if a Value Exists

You can check if a value exists in a Set using the has method. The has method returns a boolean indicating whether the value exists in the Set:

let mySet = new Set([1, 2, 3, 4, 5]);

console.log(mySet.has(1)); // Outputs: true
console.log(mySet.has(6)); // Outputs: false

mySet is a Set initialized with the values 1, 2, 3, 4, and 5. The has method is used to check if the values 1 and 6 exist in the Set.

Adding and Deleting Values

Add and delete values in a Set using the add and delete methods respectively.

Adding Values

You can add a value to a Set using the add method. The add method appends a new element with a specified value to the end of a Set object.

let mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

console.log(mySet); // Outputs: Set(3) { 1, 2, 3 }

Here, we’re adding the values 1, 2, and 3 to the Set mySet.

Deleting Values

You can delete a value from a Set using the delete method. The delete method removes the specified element from a Set.

let mySet = new Set([1, 2, 3]);

mySet.delete(2);

console.log(mySet); // Outputs: Set(2) { 1, 3 }

We’re deleting the value 2 from the Set mySet.

Getting the Size of a Set

Get the size (number of elements) of a Set using the size property.

let mySet = new Set([1, 2, 3, 4, 5]);

console.log(mySet.size); // Outputs: 5

mySet is a Set initialized with the values 1, 2, 3, 4, and 5. The size property is used to get the number of elements in the Set.

Iterating Over a Set

You can iterate over a Set using several methods:

  1. For…of loop: Iterate over the values in a Set.
let mySet = new Set([1, 2, 3, 4, 5]);

for (let value of mySet) {
  console.log(value);
}
  1. forEach method: This allows you to execute a function for each value in a Set.
let mySet = new Set([1, 2, 3, 4, 5]);

mySet.forEach(function(value) {
  console.log(value);
});
  1. Spread operator: Convert a Set into an Array, which can be useful for iteration.
let mySet = new Set([1, 2, 3, 4, 5]);
let array = [...mySet];

array.forEach(function(value) {
  console.log(value);
});

In each of these examples, we’re iterating over the Set mySet and logging each value to the console.

Clearing a Set

In JavaScript, you can clear all values from a Set using the clear method.

let mySet = new Set([1, 2, 3, 4, 5]);

console.log(mySet.size); // Outputs: 5

mySet.clear();

console.log(mySet.size); // Outputs: 0

mySet is a Set initialized with the values 1, 2, 3, 4, and 5. The clear method is used to remove all values from the Set. After clearing, the size of the Set is 0.

In JavaScript, you can perform set operations like union, intersection, difference, and symmetric difference using Sets. Here’s how you can do it:

Set Union

The union of two sets is a set of all elements from both sets. You can get the union of two sets by creating a new Set from the concatenation of the two sets.

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

let union = new Set([...setA, ...setB]);
console.log([...union]); // Outputs: [1, 2, 3, 4, 5]

Set Intersection

The intersection of two sets is a set of elements that are common to both sets. You can get the intersection of two sets by filtering one set for elements that also exist in the other set.

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

let intersection = new Set([...setA].filter(x => setB.has(x)));
console.log([...intersection]); // Outputs: [3]

Set Difference

The difference of two sets is a set of elements that exist in the first set but not in the second set. You can get the difference of two sets by filtering the first set for elements that do not exist in the second set.

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

let difference = new Set([...setA].filter(x => !setB.has(x)));
console.log([...difference]); // Outputs: [1, 2]

Set Symmetric Difference

The symmetric difference of two sets is a set of elements that exist in either of the two sets but not in their intersection. You can get the symmetric difference of two sets by getting the union of the two sets and then filtering out the intersection.

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

let union = new Set([...setA, ...setB]);
let intersection = new Set([...setA].filter(x => setB.has(x)));

let symmetricDifference = new Set([...union].filter(x => !intersection.has(x)));
console.log([...symmetricDifference]); // Outputs: [1, 2, 4, 5]