Skip to content
Related Articles

Related Articles

Improve Article

How to cartesian product of 2 arrays using JavaScript ?

  • Last Updated : 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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :