Introduction

If you want every pairing between two arrays, you are looking for the Cartesian product. The rule is simple: take each element from the first array and pair it with every element from the second array.

Nested loops are the clearest solution

The most readable implementation is usually a nested loop. In JavaScript:

1const left = [1, 2, 3];
2const right = ["A", "B"];
3
4const pairs = [];
5
6for (const a of left) {
7  for (const b of right) {
8    pairs.push([a, b]);
9  }
10}
11
12console.log(pairs);

Output:

1[
2  [1, "A"],
3  [1, "B"],
4  [2, "A"],
5  [2, "B"],
6  [3, "A"],
7  [3, "B"]
8]

This is the best starting point because it makes the pairing logic obvious.

A compact functional version

If you prefer a more compact style, flatMap expresses the same Cartesian product:

1const left = [1, 2, 3];
2const right = ["A", "B"];
3
4const pairs = left.flatMap(a => right.map(b => [a, b]));
5
6console.log(pairs);

This is concise and still readable for many developers. It works well when the arrays are small to medium size and you actually want the full result in memory.

When the result set gets large

The total number of pairs is:

left.length * right.length

That grows quickly. If both arrays contain 10,000 items, the full product contains 100 million pairs. At that point, building one big array may be too expensive.

A generator avoids materializing everything at once:

1function* cartesian(left, right) {
2  for (const a of left) {
3    for (const b of right) {
4      yield [a, b];
5    }
6  }
7}
8
9for (const pair of cartesian([1, 2], ["A", "B"])) {
10  console.log(pair);
11}

This is a better pattern when you want to stream combinations into another process instead of storing them all.

More than two arrays

The same idea extends to more arrays, but complexity grows multiplicatively. For three arrays, every element in the first array is paired with every element in the second and every element in the third.

If you need the general case, reduce over the arrays:

1function cartesianMany(arrays) {
2  return arrays.reduce(
3    (acc, current) =>
4      acc.flatMap(prefix => current.map(value => [...prefix, value])),
5    [[]]
6  );
7}
8
9console.log(cartesianMany([[1, 2], ["A", "B"], [true, false]]));

That pattern is powerful, but it also becomes memory-heavy quickly. Use it only when you genuinely need all combinations.

Combination versus permutation versus product

This terminology trips people up:

• Cartesian product means every cross-array pairing
• combination often means choosing items without regard to order
• permutation means arranging items where order matters

For two arrays, "all combinations" usually means the Cartesian product. If you actually need unique unordered pairs from one array, this is the wrong algorithm.

Common Pitfalls

• Forgetting that the result size multiplies, which can create huge arrays.
• Using the word combination when the real requirement is a Cartesian product.
• Materializing all pairs when a generator or stream would be enough.
• Mixing up pairs from two arrays with pair generation inside one array.
• Writing a clever one-liner that is harder to read than a simple nested loop.

Summary

• The full set of pairings from two arrays is the Cartesian product.
• Nested loops are the clearest implementation.
• 'flatMap provides a concise alternative when you want the full result array.'
• Use a generator when the product is too large to store comfortably.
• Be clear about whether you need a Cartesian product, combinations, or permutations.