How to merge and distribute the first array over the second one in JavaScript?

Question

What would be the elegant way to achieve the result demonstrated in the snippet below.

I'm merging two arrays into a new array by distributing each element of the first array on to the second array.

arr1 = ['XYZ', 'ABC']
arr2 = ['EUR', 'USD']
result = ['XYZ/EUR', 'XYZ/USD', 'ABC/EUR', 'ABC/USD']

 let symbolList = []; SYMBOLS = ['XYZ', 'ABC'] PAIRS = ['EUR', 'USD'] SYMBOLS.map(s => symbolList.push(PAIRS.map(p => s + '/' + p))); let processSymbols = symbolList.flat(); console.log(processSymbols)

Answer 1

Let's just go ahead and use flatMap :)

 const arr1 = ['XYZ', 'ABC'] const arr2 = ['EUR', 'USD'] const result = arr1.flatMap(val => arr2.map(e => `${val}/${e}`)) console.log(result)

Answer 2

I like to use reduce() :

 const arr1 = ['XYZ', 'ABC']; const arr2 = ['EUR', 'USD']; const result = arr1.reduce((a, c) => { arr2.forEach(e => a.push(`${c}/${e}`)); return a; }, []); console.log(result);

I hope that helps!

Answer 3

You could reduce an array of arrays and map the parts.

This approach works for more than two arrays as well.

 var array1 = ['XYZ', 'ABC'], array2 = ['EUR', 'USD'], result = [array1, array2].reduce((a, b) => a.flatMap(v => b.map(w => `${v}/${w}`))); console.log(result);