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:
- Get the Status Code of an Axios HTTP Error in JavaScript
- How to access the Value of a Promise in JavaScript
- How to check if two Sets are equal using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
