Making An Object Array To Have All Combinations Of Possibilities From 3 Arrays Using Javascript / Typescript

I am trying to create an object array that will contain objects that represent every scenario of combination possibilities that are provided by three string arrays. Each object in

Solution 1:

Without nested loops, you could take a combination algorithm for the values and apply an object structure later.

const
    buttonFormats = ['compact', 'regular', 'fluid'],
    iconTypes = [null, 'add', 'edit'],
    stateParams = [ null, 'secondary', '2', 'tertiary', '3', 'warning', '!', 'danger', '!!!', 'danger-secondary', '2!!!', 'primary-line', '1l', 'secondary-line', '2l', 'tertiary-line', '3l', 'warning-line', '!l', 'danger-line', '!!!l'],
    result = [buttonFormats, iconTypes, stateParams]
        .reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []))
        .map(([format, iconType, state]) => ({ format, iconType, state }));


console.log(result.length);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Solution 2:

You can run a nested set of loops, I'm not sure if a more efficient way exists:

const buttonFormats = ['compact', 'regular', 'fluid'];
const iconTypes = [null, 'add', 'edit'];
const states = [null, 'secondary', '2', 'tertiary', '3', 'warning', '!', 'danger', '!!!', 'danger-secondary', '2!!!', 'primary-line', '1l', 'secondary-line', '2l', 'tertiary-line', '3l', 'warning-line', '!l', 'danger-line', '!!!l'];

const allCombinations = [];

buttonFormats.forEach((bf) => {
    iconTypes.forEach((it) => {
        states.forEach((s) => {
            allCombinations.push({
                format: bf,
                icon: it,
                state: s
            });
        });
    });
});

console.log(allCombinations);

The key difference is about when the object is defined. i.e. if I define a const in an outer loop, or outside of the loop, I am re-using the reference to the same object (which means I end up updating the same object in the nested parts of the code). By creating a new object in the innermost loop I avoid this.

Solution 3:

This is called a cartesian product. Usually it's written recursively, based on the following observation:

to obtain a cartesian product Cn of N arrays, compute the product Cn-1 for N-1 arrays, and merge each element of the first array with each element in Cn-1

Here's an example implementation in the functional style

flatMap     = (xs, f) => [].concat(...xs.map(f))
prepend     = x => ys => [x].concat(ys)
prependEach = (xs, yss) => flatMap(xs, x => yss.map(prepend(x)))
product     = (xs, ...rest) => xs ? prependEach(xs, product(...rest)) : [[]]


// demo

a = [1,2,3]
b = ['A', 'B', 'C']
c = ['foo', 'bar']


g = product(a, b, c)
g.forEach(x => console.log(x.join('-')))