How to create nested loops dynamically in JS?

Question

JavaScript

The question is how to rewrite the dumbGenerate function so that the size of the modifiers array can be arbitrary.

const modifiers = [
  ['A', 'B', 'C'],
  [1, 2, 3],
  ['!', '.']
];

function dumbGenerate(modifiers) {
  const result = [];
  modifiers[0].forEach(letter => {
    modifiers[1].forEach(digit => {
      modifiers[2].forEach(punctuation => {
        result.push([letter, digit, punctuation])
      })
    })
  })
  return result;
}

Execution result:

[ [ 'A', 1, '!' ],
  [ 'A', 1, '.' ],
  [ 'A', 2, '!' ],
  [ 'A', 2, '.' ],
  [ 'A', 3, '!' ],
  [ 'A', 3, '.' ],
  [ 'B', 1, '!' ],
  [ 'B', 1, '.' ],
  [ 'B', 2, '!' ],
  [ 'B', 2, '.' ],
  [ 'B', 3, '!' ],
  [ 'B', 3, '.' ],
  [ 'C', 1, '!' ],
  [ 'C', 1, '.' ],
  [ 'C', 2, '!' ],
  [ 'C', 2, '.' ],
  [ 'C', 3, '!' ],
  [ 'C', 3, '.' ] ]

As I understand it, there are 2 solutions here, generate n nested loops or use recursion. I have no idea how to generate nested loops at all, but with recursion I'm stuck on this:

function recursiveGenerate(modifiers, startFrom = 0) {
  const lastIndex = modifiers.length - 1;
  if(startFrom > lastIndex) {
    return;
  }; // ????

  for(let value of modifiers[startFrom]) {
    console.log('current value', value)
    recursiveGenerate(modifiers, startFrom + 1);
  }
}

I have already managed to output the values ​​to the console in the right order, but I don’t understand how to collect them into an array of arrays, as in the first example.

current value A
current value 1
current value !
current value .
current value 2
current value !
current value .
current value 3
current value !
current value .
current value B
current value 1
current value !
current value .
current value 2
current value !
current value .
current value 3
current value !
current value .
current value C
current value 1
current value !
current value .
current value 2
current value !
current value .
current value 3
current value !
current value .

Thanks in advance for your attention)

Answer 1

function generate(string, rest) {
  if (rest.length == 0) {
    console.log(string);
    return
  }
  rest[0].forEach(element => {
    generate(string+element, rest.slice(1));
  });
}
generate('', modifiers);

Answer 2

open it up and take a look.

var all_transform = {
    '.transform_col_5': 0,
    '.transform_col_4': 0,
    '.transform_col_3': 0,
    '.transform_col_2': 0,
    '.transform_col_1': 0
};
var timer_search = false;
var count_column = 5;
var transform = true;
function col_margin(width) {
        //class_name = col-mar-5-20
        var cont = $('#in_cont');
        var body = $('body');
        cont.removeClass("col-mar-5-20");
        cont.removeClass("col-mar-5-10");
        cont.removeClass("col-mar-3-20");
        body.removeClass("cm5-20");
        body.removeClass("cm5-10");
        body.removeClass("cm3-20");
        if (width >= 1300) {
            cont.addClass('col-mar-5-20')
            body.addClass('cm5-20')
        } else if (width < 1300 && width >= 1000) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        } else if (width < 1000 && width >= 800) {
            body.addClass('cm3-20')
            cont.addClass('col-mar-3-20')
        } else if (width < 800) {
            cont.addClass('col-mar-5-10')
            body.addClass('cm5-10')
        }
    }
    function col_count(width) {
        var cont = $('#cont');
        back_move_pic_text(all_transform);
        if (navigator.userAgent.match(/iPhone/i)) {
            if (getOrientation() == 'portrait') {
                set_column(1);
                binner_set_class_transform(false);
            } else {
                set_column(2);
                binner_set_class_transform(true);
            }
            return false;
        }
        if (width >= 1260) {
            set_column(5);
            binner_set_class_transform(true);
        } else if (width < 1260 && width >= 1015) {
            set_column(4);
            binner_set_class_transform(true);
        } else if (width < 1015 && width >= 750) {
            set_column(3);
            binner_set_class_transform(true);
        } else if (width < 750 && width >= 500) {
            set_column(2);
            binner_set_class_transform(true);
        } else if (width < 500) {
            set_column(1);
            binner_set_class_transform(false);
        }
        if (count_column >= 4 && show_time_line == false) {
            time_line_show();
            show_time_line = true;
        }
        if (count_column < 4 && show_time_line == true) {
            time_line_hide();
            show_time_line = false;
        }
    }
    function set_column(_cc) {
        var cont = $('#cont');
        var body = $('body');
        count_column = _cc;
        for (var i = 0; i <= 5; i++) {
            cont.removeClass("col-count-" + i);
            body.removeClass("cc-" + i);
        }
        cont.addClass('col-count-' + _cc);
        body.addClass('cc-' + _cc);
        move_pic_text('.transform_col_' + _cc);
    }
    function binner_set_class_transform(tr) {
        if (tr) {
            $('#in_cont').removeClass('notransform');
            $('#in_cont').addClass('transform');
        } else {
            $('#in_cont').removeClass('transform');
            $('#in_cont').addClass('notransform');
        }
    }
    function move_pic_text(block_name) {
        var title = '';
        $.each($(block_name), function () {
            title = $(this).find('.title').remove();
            $(this).prepend(title);
            all_transform[block_name] = 1;
        })
    }
    function back_move_pic_text(all_block_name) {
        for (block_name in all_block_name) {
            if (all_block_name[block_name]) {
                var title = '';
                $.each($(block_name), function () {
                    title = $(this).find('.title').remove();
                    $(this).find('.pic').after(title)
                    all_transform[block_name] = 0;
                })
            }
        }
    }
    patt = /adebug/g;
    if (patt.test(document.cookie)) {
        var la = 1
        $.each($('.layout-1, .layout-2, .layout-3'), function () {
            var b = 1;
            $.each($(this).children(), function () {
                $(this).append('<div class="name_block">' + la + '-' + b + '</div>');
                b++;
            })
            la++;
        })
    }

Well, in HTML and CSS, look at the styles of the blocks that are involved and that change in this case.
infox.sg/static/css.css?v109