How to form one string array based on two other arrays using map in ES5?

Question

I am writing a simple js/es5 script to combine all the strings in a CWL. The CWL only supports ES5, so there are many functions/features from ES6 cannot be used. I am not familiar with js in general.

For a minimal example:

var arr1 = ["a", "b"]
var arr2 = ["111", "222"]

Expected result:

["a_111", "b_111", "a_222", "b_222"] // order doesn't matter

I tried this way, but it did not work and only returned ["a_111", "b_111"]

arr1.map(function(x) {
  return arr2.map(function(y) {
    return x + "_" + y;
  });
});

Answer 1

I wouldn't bother using map for this. Just have a nested loop and push a string into a new array.

var arr1 = ['a', 'b'];
var arr2 = ['111', '222'];

var out = [];

for (var i = 0; i < arr2.length; i++) {
  for (var j = 0; j < arr1.length; j++) {
    var str = arr1[j] + '_' + arr2[i];
    out.push(str);
  }
}

console.log(out);

Answer 2

What you can use is a combination of reduce(), concat() and map():

let result = arr1.reduce((acc, a) => acc.concat(arr2.map((b) => a + "_" + b)), []);
// => [ 'a_111', 'a_222', 'b_111', 'b_222' ]

Alternatively when flat() is available you can use:

let result = arr1.map((a) => arr2.map((b) => a + "_" + b)).flat();
// => [ 'a_111', 'a_222', 'b_111', 'b_222' ]

I am not sure if flat() works with ES5 though.