How to cartesian product of 2 arrays using JavaScript ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.