Find all the combinations of the array values in JavaScript

30 Jan, 2020
The task is to get the cartesian product of the arrays(Finding the all combination after concatenating them). Here, 2 approaches are discussed with the help of JavaScript.
Approach 1:
Get the all arrays in an array.
Recursion is used to solve the problem. The base condition is, When the length of the array reduces to zero then return the string build till now. Else
Reduce the first array element by .reduce() method and return the result returned from the recursion result(Recursion is called every time after leaving the first item of the array) plus the previous value in concatenation with every array element.
Return the final ans array, which contains the all combinations.
Example 1: This example implements the above approach.
<!DOCTYPE html><html>  <head>    <title>        All combinations of a JavaScript array values.    </title></head>  <body style="text-align:center;">    <h1 style="color:green;">               GeeksforGeeks           </h1>    <p id="GFG_UP">    </p>    <button id="button" onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN">    </p>    <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var arr = [            ['m', 'n'],            ['c'],            ['d', 'e', 'f']        ];        up.innerHTML = "CLick on the button to get the "+          "all combinations of arrays.<br>Array - "+          "[[" + arr[0] + "], [" + arr[1] + "], [" + arr[2] + "]]";          function getCombn(arr, pre) {            pre = pre || '';            if (!arr.length) {                return pre;            }            var ans = arr[0].reduce(function(ans, value) {                return ans.concat(getCombn(arr.slice(1), pre + value));            }, []);            return ans;        }          function GFG_Fun() {            down.innerHTML = getCombn(arr);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Get the all arrays in an array.
Recursion is used to solve the problem. The base condition is, When the length of the array reduces to one then return that element of the array. Else
Call recursion after leaving the first element of the array and store the result in variable(otherCases).
Loop through every element of the Array(otherCases) and inside every element loop through the first element of the Array(arr).
Concatenate every element of the Array(arr[0]) with the Array(otherCases) and push the result in answer array.
Example 2: This example implements the above approach.
<!DOCTYPE html><html>  <head>    <title>        all combinations of a JavaScript array values.    </title></head>  <body style="text-align:center;">    <h1 style="color:green;">               GeeksforGeeks           </h1>    <p id="GFG_UP">    </p>    <button id="button" onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN">    </p>    <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var arr = [            ['m', 'n'],            ['c'],            ['d', 'e', 'f']        ];        up.innerHTML = "CLick on the button to get the all "+          "combinations of arrays.<br>Array -"+          "[[" + arr[0] + "], [" + arr[1] + "], [" + arr[2] + "]]";          function getCombn(arr) {            if (arr.length == 1) {                return arr[0];            } else {                var ans = [];                                // recur with the rest of the array.                var otherCases = getCombn(arr.slice(1));                 for (var i = 0; i < otherCases.length; i++) {                    for (var j = 0; j < arr[0].length; j++) {                        ans.push(arr[0][j] + otherCases[i]);                    }                }                return ans;            }        }          function GFG_Fun() {            down.innerHTML = getCombn(arr);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-array
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.