JavaScriptで2つの配列のすべての組み合わせを生成する方法

はじめに

JavaScriptでは、2つの配列の要素を掛け合わせるように組み合わせたいケースがよくあります。例えば、以下のような2つの文字列の配列があるとします。

const arr1 = ["A", "B", "C"];
const arr2 = ["1", "2", "3"];

この2つの配列を受け取り、1つ目の配列の各要素と、2つ目の配列の各要素をすべて組み合わせて、新しい配列として返す関数を作成する必要があります。

つまり、上記の入力に対する期待される出力は次のようになります。

const output = ["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"];

これは数学における「デカルト積（直積）」と呼ばれる操作です。それでは、実際のコードを見ていきましょう。

実装方法：二重ループを使う

最もシンプルで分かりやすい方法は、for文による二重ループを使うことです。外側のループで1つ目の配列を走査し、内側のループで2つ目の配列を走査しながら要素を連結していきます。

const arr1 = ["A", "B", "C"];
const arr2 = ["1", "2", "3"];

const prepareCartesian = (arr1 = [], arr2 = []) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
        for(let j = 0; j < arr2.length; j++){
            res.push(arr1[i] + arr2[j])
        }
    };
    return res;
};

console.log(prepareCartesian(arr1, arr2));

実行結果

コンソールに出力される結果は以下の通りです。

[
    'A1', 'A2', 'A3',
    'B1', 'B2', 'B3',
    'C1', 'C2', 'C3'
]

別の方法：flatMapとmapを組み合わせる

よりモダンな書き方として、flatMap()とmap()を組み合わせる方法もあります。こちらの方がコードが簡潔になります。

const prepareCartesian = (arr1 = [], arr2 = []) => {
    return arr1.flatMap(a => arr2.map(b => a + b));
};

console.log(prepareCartesian(arr1, arr2));

flatMap()は、各要素に対する処理結果（ここではmap()で生成された配列）を自動的にフラット化してくれるため、入れ子になった配列を気にせずに済みます。

まとめ

2つの配列のすべての組み合わせを生成するには、二重ループまたはflatMap()とmap()の組み合わせを使用します。どちらの方法でも結果は同じですが、可読性やチームのコーディングスタイルに応じて使い分けるのが良いでしょう。なお、組み合わせの総数は「1つ目の配列の長さ × 2つ目の配列の長さ」となる点にも注意してください。大規模な配列を扱う場合はパフォーマンスへの影響も考慮しましょう。