How to cartesian product of 2 arrays using JavaScript ? - GeeksforGeeks

11 Oct, 2019
The task is to compute the cartesian product of 2 JavaScript arrays with the help of JavaScript. Here are few techniques discussed.Approach 1:
Create a new array.
Traverse the first array by outer loop and second array by inner loop.
In the inner loop, Concatenate the first array element with the second array element and push it in a new array.
Example 1: This example uses the approach as discussed above.
<!DOCTYPE HTML><html>  <head>    <title>        cartesian product of 2 arrays using JavaScript    </title></head>  <body style="text-align:center;"       id="body">    <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 arr1 = [            [13, 'G'],            [16, 'C']        ];        var arr2 = [            [8, 'F'],            [36, 'P']        ];        up.innerHTML = "Click on the button to compute the "+          "Cartesian Product of 2 arrays.<br>Array1-";        var res = "";        for (var i = 0; i < arr1.length; i++) {            res = res + "[" + arr1[i] + "]";        }        up.innerHTML = up.innerHTML + res + "<br>Array2-";        res = "";        for (var i = 0; i < arr2.length; i++) {            res = res + "[" + arr2[i] + "]";        }        up.innerHTML = up.innerHTML + res;          function GFG_Fun() {            var ans = [];            for (var i = 0; i < arr1.length; i++) {                for (var l = 0; l < arr2.length; l++) {                    ans.push(arr1[i].concat(arr2[l]));                }            }            res = "";            for (var i = 0; i < ans.length; i++) {                res = res + "[" + ans[i] + "]<br>";            }            down.innerHTML = res;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Create a new array.
The same approach is followed here, for every element of first array, every element of second array is concatenated and pushed to the new array with the help of .apply() and .map() method.
Example 2: This example uses the approach as discussed above.
<!DOCTYPE HTML><html>  <head>    <title>        cartesian product of 2 arrays using JavaScript    </title></head>  <body style="text-align:center;" id="body">    <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 arr1 = [            [13, 'G'],            [16, 'C']        ];        var arr2 = [            [8, 'F'],            [36, 'P']        ];        up.innerHTML = "Click on the button to compute"+          " the Cartesian Product of 2 arrays.<br>Array1-";        var res = "";        for (var i = 0; i < arr1.length; i++) {            res = res + "[" + arr1[i] + "]";        }        up.innerHTML = up.innerHTML + res + "<br>Array2-";        res = "";        for (var i = 0; i < arr2.length; i++) {            res = res + "[" + arr2[i] + "]";        }        up.innerHTML = up.innerHTML + res;          function GFG_Fun() {            var ans = [].concat.apply([], arr1.map(              arr1 => (arr2.map(arr2 => arr1.concat(arr2)))));                        res = "";            for (var i = 0; i < ans.length; i++) {                res = res + "[" + ans[i] + "]<br>";            }            down.innerHTML = res;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?