JavaScript에서 두 배열의 가능한 모든 조합 만들기 — 카테시안 곱 완벽 가이드

JavaScript 개발을 하다 보면 두 개의 배열에 담긴 값들을 서로 조합해야 하는 경우가 자주 발생합니다. 예를 들어 색상 옵션과 사이즈 목록을 결합하거나, 여러 필터 조건을 조합하는 상황이 대표적입니다. 이번 글에서는 두 배열의 요소로 가능한 모든 조합을 만드는 방법을 단계별로 살펴보겠습니다.

문제 정의

다음과 같은 두 개의 문자열 배열이 있다고 가정해 보겠습니다.

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

첫 번째 배열의 각 요소를 두 번째 배열의 모든 요소와 차례대로 짝지어 새로운 배열을 만들어야 합니다. 이는 수학에서 말하는 카테시안 곱(Cartesian Product)을 구하는 것과 같습니다.

따라서 위 입력에 대한 기대 결과는 다음과 같습니다.

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

구현 방법 1: 중첩 for 반복문

가장 직관적인 방법은 두 개의 반복문을 중첩해서 사용하는 것입니다. 바깥쪽 반복문은 arr1을 순회하고, 안쪽 반복문은 arr2를 순회하면서 각 요소를 이어 붙여 결과 배열에 추가합니다.

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'
]

구현 방법 2: flatMap 활용하기

ES2019에서 도입된 flatMap() 메서드를 사용하면 동일한 로직을 한 줄로 더 간결하게 표현할 수 있습니다.

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

console.log(prepareCartesian(arr1, arr2));
// ['A1', 'A2', 'A3', 'B1', 'B2', 'B3', 'C1', 'C2', 'C3']

flatMap은 map 연산 후 결과를 한 단계 평탄화(flatten)해 주기 때문에, 중첩된 배열 없이 깔끔한 1차원 배열을 얻을 수 있습니다.

마무리

두 배열의 모든 조합은 중첩 반복문 또는 flatMap으로 손쉽게 구현할 수 있습니다. 결과 배열의 길이는 항상 arr1.length × arr2.length가 되며, 세 개 이상의 배열을 조합해야 할 때는 reduce와 함께 이 로직을 확장하면 됩니다. 입력 데이터의 크기가 커질수록 조합 수는 기하급수적으로 늘어나므로, 실무에서는 성능 영향도 함께 고려하는 것이 좋습니다.