How to Merge Sets Using JavaScript

Working with sets in JavaScript allows us to manage collections of unique values effortlessly. But what if we want to combine or merge these sets? in this tutorial, we will see how to merge sets using javascript

Important Note: Sets Contain Unique Values Only

It’s essential to note that sets in JavaScript store unique values. If there are duplicate values, they won’t be added when merging sets.

Method 1: Using the Spread Operator (…)

The spread operator (…) in JavaScript allows us to merge elements from different sets into a new set. This method is efficient and straightforward.

Step 1: Create Sets to Merge:

Let’s start by creating two sets, setA and setB, with unique numeric values:

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

Here, setA contains values [1, 2, 3] and setB contains values [3, 4, 5].

Step 2: Merge Sets Using the Spread Operator

Now, let’s merge these sets into a new set called mergedSet using the spread operator:

let mergedSet = new Set([...setA, ...setB]);

The spread operator … gathers unique elements from both setA and setB, creating a new set mergedSet that contains all unique values from both original sets.

Method 2: Using the Set Constructor and add() Method

Another way to merge sets involves using the Set constructor and the add() method to gradually add elements from one set to another.

Step 1: Create Sets to Merge

Let’s create two sets, setX and setY, similar to our previous example:

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

Step 2: Merge Sets Using Iteration and add()

Now, let’s merge setY into setX by iterating through the elements of setY and adding them to setX using the add() method:

for (let item of setY) {
  setX.add(item);
}

During this process, we iterate through each element in setY and add it to setX using the add() method. As a result, setX now contains all unique elements from both setX and setY.

Method 3: Using Nested Loops to Merge Sets

In JavaScript, merging sets is a common operation when you need to combine unique values from different sets. Let’s explore a method using a custom function, mergeSets, that employs nested loops to achieve this seamlessly.

Step 1: Define the Merge Function

function mergeSets(...sets) {
  // Create a new set to store the merged values
  const mergedSet = new Set();

  // Iterate through each input set
  for (const currentSet of sets) {
    // Iterate through each element in the current set
    for (const element of currentSet) {
      // Add the element to the merged set
      mergedSet.add(element);
    }
  }

  // Return the final merged set
  return mergedSet;
}

In this function:

• We use the rest parameter (…sets) to accept any number of sets as arguments.
• We initialize an empty mergedSet using the Set constructor. This set will store the unique values from all input sets.
• The outer loop (for (const currentSet of sets)) iterates through each input set.
• The inner loop (for (const element of currentSet)) iterates through each element in the current set.
• Using mergedSet.add(element), we add each unique element to the merged set.

Step 2 : Let’s use this function:

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

const result = mergeSets(setA, setB);
const mergedArray = [...result];
console.log(mergedArray);

Output:

[1, 2, 3, 4, 5, 6]

Conclusion:

In this comprehensive guide, we’ve explored two methods to merge sets using JavaScript—utilizing the spread operator and the Set constructor with the add() method. These techniques enable us to effortlessly combine sets and create new sets containing unique values.

By following these steps, you’re equipped to merge sets effectively in JavaScript, harnessing the power of unique collections in your projects.

Happy Building! Check out more from Source Freeze here!