Question

상품 옵션을 구성하고 각 옵션을 조합한 모든 목록을 만들어서 화면에 구성해 주세요. 옵션은 2개 이상 구성할 수 있어야 합니다. 예시는 다음과 같습니다.

const A = ['블랙', '그레이', '베이지'];
const B = ['S', 'M', 'L'];

----------

[
  [ '블랙', 'S' ],
  [ '블랙', 'M' ],
  [ '블랙', 'L' ],
  [ '그레이', 'S' ],
  [ '그레이', 'M' ],
  [ '그레이', 'L' ],
  [ '베이지', 'S' ],
  [ '베이지', 'M' ],
  [ '베이지', 'L' ],
]
const A = ['티셔츠', '바지'];
const B = ['블랙', '그레이', '베이지'];
const C = ['S', 'M', 'L'];

----------

[
  ['티셔츠', '블랙', 'S'],
  ['티셔츠', '블랙', 'M'],
  ['티셔츠', '블랙', 'L'],
  ['티셔츠', '그레이', 'S'],
  ['티셔츠', '그레이', 'M'],
  ['티셔츠', '그레이', 'L'],
  ['티셔츠', '베이지', 'S'],
  ['티셔츠', '베이지', 'M'],
  ['티셔츠', '베이지', 'L'],
  ['바지', '블랙', 'S'],
  ['바지', '블랙', 'M'],
  ['바지', '블랙', 'L'],
  ['바지', '그레이', 'S'],
  ['바지', '그레이', 'M'],
  ['바지', '그레이', 'L'],
  ['바지', '베이지', 'S'],
  ['바지', '베이지', 'M'],
  ['바지', '베이지', 'L'],
]

Answer

const combineArrays = <T extends unknown>(...arrays: T[][]): T[] | T[][] => {
  const combinations: T[] = [];

  if (arrays.length === 0) return [];
  if (arrays.length === 1) return arrays[0];

  if (arrays.length === 2) {
    arrays[0].forEach((value1) => {
      arrays[1].forEach((value2) => {
        combinations.push([value1, value2].flat() as unknown as T);
      });
    });

    return combinations;
  }

  return combineArrays(arrays[0], combineArrays(...arrays.slice(1)) as T[]);
};

Playground 🚀

이전 글
#typescript
CamelCase Utility Type 만들기
다음 글
#developer
SSH 접속 시 비밀번호 자동 입력하기
어라운드어스

Coding everything around us

이 블로그는 Gatsby로 만들었습니다.

백은주 Sara
Frontend Developer @wadiz