How To Get The Union Of Two Sets In JavaScript?

How to get the Union of Two Sets in JavaScript

Hi there. Today, we will show you how to get the union of two sets in JavaScript. Read on to know more.

How to get the union of two sets in JavaScript?

First, we will learn about the Set.

The set is a collection of unique values. Conceptually, a set is more similar to an array than an object since it is a list of values and not a key/value pair. However, set is not a replacement for the array.

Below, we will show you how to get the union in 3 ways:

Using the Spread Operator (…) and Set() constructor

Spread operator (…) syntax:

[...iterable]

Description:

Spread Operator is used to expand the iterable.

Set() constructor syntax:

new Set(iterable)

Description:

Create a set object from the iterable.

First, we will initialize 2 Sets. Then we use Spread Operator to expand them into an array. Since the set holds unique values, so we need to create a set from that array to get the union. Like this:

const set1 = new Set(['learning', 'js', 'programming', 'at', 'learnshareit.com']);
const set2 = new Set(['learning', 'js', 'is', 'so', 'much', 'fun']);

// Create an Array of all Set Elements
const setArr = [...set1, ...set2];

// Get Union using Set constructor
const union = new Set(setArr);

console.log(union);

Output:

Set(9) {
  'learning',
  'js',
  'programming',
  'at',
  'learnshareit.com',
  'is',
  'so',
  'much',
  'fun'
}

Using Spread Operator (…), concat(), and map() functions 

If you want to know more about the syntax of the concat() function, you can read it here

The map() function will iterate over each array element and execute the function passed to it.

Syntax: 

map((element, index) => { … })

Parameters:

  • element: Current element in the loop.
  • index: The index of the current element in the loop.

First, we use the map() to iterate over an array containing set1, set2 ([set1, set2]) and convert set1, set2 to array. Then we use the concat() function in combination with the Spread operator to flatten the Array by concat with an empty array. Then pass the flattened array into the Set() constructor to get the union. Like this:

function getUnion(set1, set2) {

  // Convert Set to Array
  const setsArr = [set1, set2].map((element) => [...element]);

  console.log('Array of set Array:');
  console.log(setsArr); // [ [set1], [set2] ]

  // Flatten the setsArray using concat()
  const flatArr = [].concat(...setsArr);

  console.log('Flattened Array:');
  console.log(flatArr); // [ all elements of set1 and set2 ]

  // Create a Set to get Union
  return new Set(flatArr);
}

const set1 = new Set(['learning', 'js', 'programming', 'at', 'learnshareit.com']);
const set2 = new Set(['learning', 'js', 'is', 'so', 'much', 'fun']);

// Get Union using getUnion()
const union = getUnion(set1, set2);

console.log('Result:');
console.log(union); // Set(9) {Union}

Output:

Array of set Array:
[
  [ 'learning', 'js', 'programming', 'at', 'learnshareit.com' ],
  [ 'learning', 'js', 'is', 'so', 'much', 'fun' ]
]
Flattened Array:
[
  'learning',
  'js',
  'programming',
  'at',
  'learnshareit.com',
  'learning',
  'js',
  'is',
  'so',
  'much',
  'fun'
]
Result:
Set(9) {
  'learning',
  'js',
  'programming',
  'at',
  'learnshareit.com',
  'is',
  'so',
  'much',
  'fun'
}

Using for … of and add() function

In a previous post, we introduced you to the syntax of for … of. You can read more here.

add() function syntax:

set.add(value)

Parameter:

  • value: The value to add to the set.

To get the Union of two sets, add the elements of one set to the other. Like this:

function getUnion(set1, set2) {

  // Add set2 to set1
  for (let element of set2) {
      set1.add(element);
  }
  return set1;
}

const set1 = new Set(['learning', 'js', 'programming', 'at', 'learnshareit.com']);
const set2 = new Set(['learning', 'js', 'is', 'so', 'much', 'fun']);

// Get the Union
const union = getUnion(set1, set2);

console.log(union); // Set(9) {Union}

Output:

Set(9) {
  'learning',
  'js',
  'programming',
  'at',
  'learnshareit.com',
  'is',
  'so',
  'much',
  'fun'
}

Notice: this approach will change the original value of Set.

Summary

This article is not perfect, but I think it is more than enough for programmers to understand how to get the Union of two sets. If it can’t help you answer the question: “How to get the Union of two sets in JavaScript?“. Please leave a comment.

Please share this article if you find it interesting and valuable.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *