JavaScript로 여러 배열의 모든 조합을 동적으로 생성하는 방법

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

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

이렇게 주어진 여러 개의 배열을 받아서, 각 배열에서 요소를 하나씩 선택해 만들 수 있는 모든 가능한 조합을 생성하는 JavaScript 함수를 작성해야 합니다.

위 두 배열의 경우 결과는 다음과 같아야 합니다.

const output = ['ad', 'ae', 'af', 'bd', 'be', 'bf', 'cd', 'ce', 'cf'];

배열의 개수가 고정되어 있지 않기 때문에, 가변 인수(rest 파라미터)와 재귀 호출을 활용하면 어떤 개수의 배열이 들어와도 유연하게 처리할 수 있습니다.

구현 예제

이를 구현한 코드는 다음과 같습니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

const combineArrays = (...arr) => {
  const res = [];
  const combinePart = (part, index) => {
    arr[index].forEach(el => {
      const p = part.concat(el);
      if(p.length === arr.length){
        res.push(p.join(''));
        return;
      };
      combinePart(p, index + 1);
    });
  };
  combinePart([], 0);
  return res;
}

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

코드 동작 원리

이 함수는 재귀(recursion) 방식으로 동작합니다.

combineArrays(...arr)는 rest 파라미터를 사용해 전달된 모든 배열을 하나의 배열로 받습니다. 내부 함수 combinePart(part, index)는 현재까지 만들어진 조합(part)과 처리 중인 배열의 인덱스(index)를 인자로 받습니다.

각 배열의 요소를 하나씩 붙여 가며 재귀적으로 탐색하고, 조합의 길이가 배열의 총 개수와 같아지면 해당 조합을 문자열로 합쳐(join('')) 결과 배열에 추가합니다. 이 방식은 수학의 카테시안 곱(Cartesian Product)과 같은 원리로, 세 개 이상의 배열이 입력되어도 정상적으로 동작합니다.

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
  'ad', 'ae', 'af',
  'bd', 'be', 'bf',
  'cd', 'ce', 'cf'
]