How to merge Sets using JavaScript

# Merge Set Objects using JavaScript

To merge Set objects:

1. Use the spread syntax (...) to unpack the values of two or more Set objects into an array.
2. Pass the array as an argument to the Set() constructor.
3. The new Set will contain all of the elements from the supplied Set objects.

Copied!
const set1 = new Set(['bobby', 'hadz']);
const set2 = new Set(['com']);

const set3 = new Set([...set1, ...set2]);
console.log(set3); // 👉️ Set(3) { 'bobby', 'hadz', 'com' }

We used the spread syntax (...) to unpack the elements of 2 Set objects into an array.

Copied!
const set1 = new Set(['bobby', 'hadz']);
const set2 = new Set(['com']);

console.log([...set1, ...set2]); // 👉️ [ 'bobby', 'hadz', 'com' ]

The last step is to pass the array to the Set() constructor.

With the values in place, the new Set looks as follows.

Copied!
const set3 = new Set(['bobby', 'hadz', 'com']);

// 👇️ Set(3) { 'bobby', 'hadz', 'com' }
console.log(set3);

This process could be repeated with as many Set objects as necessary.

Copied!
const set1 = new Set(['one']);
const set2 = new Set(['two']);
const set3 = new Set(['three']);

const set4 = new Set([...set1, ...set2, ...set3]);
console.log(set4); // 👉️ {'one', 'two', 'three'}

Methods like forEach() iterate over the Set object in element insertion order.

If you need to change the insertion order, simply switch the order in which you unpack the values when using the spread syntax.

Copied!
const set1 = new Set(['one']);
const set2 = new Set(['two']);
const set3 = new Set(['three']);

const set4 = new Set([...set2, ...set1, ...set3]);

// 👇️ Set(3) { 'two', 'one', 'three' }
console.log(set4);

Notice that the elements got added to the new Set in the same order in which we unpacked the Set objects.

# Merge Set objects using a for...of loop

You can also use a nested for...of loop to merge Set objects.

Copied!
function mergeSetObjects(...sets) {
  const set = new Set();

  for (const s of sets) {
    for (const element of s) {
      set.add(element);
    }
  }

  return set;
}

const set1 = new Set(['bobby', 'hadz']);
const set2 = new Set(['com']);

const set3 = mergeSetObjects(set1, set2);
console.log(set3); // 👉️ Set(3) { 'bobby', 'hadz', 'com' }

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

The function takes one or more Set objects as parameters and uses a for...of loop to iterate over the collection of Set objects.

The outer for...loop iterates over the Set objects and the inner for...of loop iterates over each Set object.

On each iteration, we use the Set.add method to add the current element to the new Set.

The Set.add method inserts a new element with the supplied value into a Set object, if the value is not already in the Set.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to merge Maps in JavaScript or TypeScript
• Check if Two Arrays have the Same Elements in JavaScript
• Create an Object from Two Arrays in JavaScript
• Get Difference between two Arrays of Objects in JavaScript
• Get the Difference between Two Arrays in JavaScript