How to compute union of JavaScript arrays ? - GeeksforGeeks

05 Jan, 2022
Given two arrays containing array elements and the task is to compute the union of both arrays with the help of JavaScript. There are two methods to solve this problem which are discussed below:Approach 1:  
Declare both array named as A and B.
Use spread operator to concat both array and store it into set.
Since, set removes the duplicate elements.
After removing the duplicate elements, it will display the union of array element.
Example: This example implements the above approach.
html
<!DOCTYPE HTML><html> <head>    <title>        How to compute union of        JavaScript arrays ?    </title></head> <body style = "text-align:center;">         <h1 style = "color:green;" id = "h1">        GeeksForGeeks    </h1>         <p id = "GFG_UP" style =        "font-size: 15px; font-weight: bold;">    </p>         <button onclick = "GFG_Fun()">        click here    </button>         <p id = "GFG_DOWN" style =        "color:green; font-size: 20px; font-weight: bold;">    </p>         <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var A = [7, 2, 6, 4, 5];        var B = [1, 6, 4, 9];                 up.innerHTML = "Click on the button to compute"                    + " the union of arrays.<br>"                    + "Array1 - [" + A + "]<br>Array2 - ["                    + B + "]";                 function GFG_Fun() {            var union = [...new Set([...A, ...B])];            down.innerHTML = "Union is = " + union;        }    </script>    </body></html>
Output: 
Before clicking on the button:
After clicking on the button:
Approach 2:  
Here, all elements are stored in a JavaScript object.
Storing elements in JavaScript Object is going to remove the duplicate elements.
At the end, push all element in a JavaScript array.
Example: This example implements the above approach.
html
<!DOCTYPE HTML><html> <head>    <title>        How to compute union of        JavaScript arrays ?    </title></head> <body style = "text-align:center;">         <h1 style = "color:green;" id = "h1">        GeeksForGeeks    </h1>         <p id = "GFG_UP" style =        "font-size: 15px; font-weight: bold;">    </p>         <button onclick = "GFG_Fun()">        click here    </button>     <p id = "GFG_DOWN" style =        "color:green; font-size: 20px; font-weight: bold;">    </p>         <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var A = [7, 2, 6, 4, 5];        var B = [1, 6, 4, 9];                 up.innerHTML = "Click on the button to compute"            + " the union of arrays.<br>" + "Array1 - ["            + A + "]<br>Array2 - [" + B + "]";                 function computeUnion(a, b) {            var object = {};                         for (var i = a.length-1; i >= 0; -- i)                object[a[i]] = a[i];                         for (var i = b.length-1; i >= 0; -- i)                object[b[i]] = b[i];                         var ret = []                         for (var i in object) {                if (object.hasOwnProperty(i))                ret.push(object[i]);            }                         return ret;        }                 function GFG_Fun() {            down.innerHTML = "Union is = "                    + computeUnion(A, B);        }    </script></body> </html>
Output: 
Before clicking on the button:
After clicking on the button:
sumitgumber28
javascript-array
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?