JavaScript에서 숫자 배열을 N개의 그룹으로 분할하는 방법

이번 글에서는 숫자로 이루어진 배열을 N개의 그룹으로 나누는 JavaScript 함수를 작성해 보겠습니다. 이때 각 그룹은 크기가 큰 것부터 작은 것 순서대로 정렬되어야 합니다.

예를 들어, 12개의 숫자로 이루어진 배열을 5개의 배열로 나눈다면 결과는 다음과 같이 균등하게 분배되며, 큰 그룹에서 작은 그룹 순으로 배치됩니다.

const arr = [1,2,3,4,5,6,7,8,9,10,11,12];
const output = [[1,2,3], [4,5,6], [7,8], [9,10], [11,12]];

함수 설계

함수는 첫 번째 인수로 원본 배열을, 두 번째 인수로 분할할 그룹의 개수를 받습니다. 핵심 아이디어는 매 단계마다 남은 요소 수 ÷ 남은 그룹 수를 올림하여 현재 청크(chunk)의 크기를 계산하는 것입니다.

동작 원리

• Math.ceil()을 사용해 남은 요소를 남은 그룹 수로 나눈 값을 올림하여 현재 청크의 크기를 구합니다.
• slice() 메서드로 해당 크기만큼 잘라내어 새로운 그룹에 추가합니다.
• 원본 배열에서 이미 추출한 부분을 제거하고, 그룹 개수도 하나씩 줄여가며 반복합니다.

예제 코드

const arr = [1,2,3,4,5,6,7,8,9,10,11,12];

const chunkArray = (arr = [], chunkCount) => {
  const chunks = [];
  while(arr.length) {
    const chunkSize = Math.ceil(arr.length / chunkCount--);
    const chunk = arr.slice(0, chunkSize);
    chunks.push(chunk);
    arr = arr.slice(chunkSize);
  }
  return chunks;
};

console.log(chunkArray(arr, 5));

실행 결과

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

[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8 ], [ 9, 10 ], [ 11, 12 ] ]

첫 번째 그룹부터 마지막 그룹까지 요소 개수가 3 → 3 → 2 → 2 → 2로 점차 줄어들면서 전체 12개 요소가 5개 그룹에 고르게 분배된 것을 확인할 수 있습니다. 이 방식은 데이터 시각화, 페이지네이션, 작업 분배 등 다양한 상황에서 유용하게 활용할 수 있습니다.