I am trying to wrap my head around the map() method, in this case using it to bine (zip) two arrays of different lengths. I have checked previous questions regarding zipping in JavaScript but they have mostly concerned arrays of equal length.

I have two arrays:

const countries = ['US', 'FR', 'IT']
const area = [100, 105, 110, 115, 120, 125, 130]

let merge = countries.map(function (c) {
    area.map(function (a) {
        return c + a
    // This returns an array of length 3 (prints country + all areas into one array position)
    // However if I create a third array and use push(c + a) here instead then length is 21 (which is what I am trying to achieve). 
    })
})

Am I returning the wrong values? Like I wrote in the ment, if I print or push (c+a) into another array then I get all 21 possible binations. The whole point of map() is getting a new array so I would prefer not pushing into a third one. I have also heard that nested forEach loops is bad practice (if I was to go for it anyhow).

I am trying to wrap my head around the map() method, in this case using it to bine (zip) two arrays of different lengths. I have checked previous questions regarding zipping in JavaScript but they have mostly concerned arrays of equal length.

I have two arrays:

const countries = ['US', 'FR', 'IT']
const area = [100, 105, 110, 115, 120, 125, 130]

let merge = countries.map(function (c) {
    area.map(function (a) {
        return c + a
    // This returns an array of length 3 (prints country + all areas into one array position)
    // However if I create a third array and use push(c + a) here instead then length is 21 (which is what I am trying to achieve). 
    })
})

Am I returning the wrong values? Like I wrote in the ment, if I print or push (c+a) into another array then I get all 21 possible binations. The whole point of map() is getting a new array so I would prefer not pushing into a third one. I have also heard that nested forEach loops is bad practice (if I was to go for it anyhow).

• javascript
• arrays
• dictionary
• zip

3 Answers 3

.map will necessarily create a new array which is the same length as the array being iterated over. Because countries has 3 items, your output will also have 3 items (an array of arrays) if you use countries.map.

Using .map won't work here, because none of your input arrays are the same length as the desired output array. Either .push to an outside variable, like you already know about, or use .reduce and push to the accumulator:

const countries = ['US', 'FR', 'IT']
const area = [100, 105, 110, 115, 120, 125, 130]

const merged = countries.reduce((merged, c) => {
  area.forEach((a) => {
    merged.push(c + a);
  });
  return merged;
}, []);
console.log(merged);

The algorithm to create a 21-length array from arrays of length 7 and 3 will necessarily involve a nested loop - there's nothing wrong with that.

Your code is fine, the only thing you need to do flatten the array after mapping, as internal map will return an array whereas you want a single array containing all the value, so you just need to flatten the array. flat MDN

const countries = ['US', 'FR', 'IT']
const area = [100, 105, 110, 115, 120, 125, 130]

let merge = countries.map(function (c) {
    return area.map(function (a) {
        return c + a
    })
}).flat()

console.log(merge)

One more way is to use flatMap

const countries = ['US', 'FR', 'IT']
const area = [100, 105, 110, 115, 120, 125, 130]

let merge = countries.flatMap((c, i) => area.map(a => c + a))

console.log(merge)

I think you want something more like this:

const countries = ['US', 'FR', 'IT'];
const area = [100, 105, 110, 115, 120, 125, 130];
let merge = countries.map(x => [x, area]);
console.log(merge);

and you should get

Array [Array ["US", Array [100, 105, 110, 115, 120, 125, 130]], Array ["FR", Array [100, 105, 110, 115, 120, 125, 130]], Array ["IT", Array [100, 105, 110, 115, 120, 125, 130]]]