JavaScript에서 배열을 n개의 청크로 분할하는 방법

문제 정의

문자열 또는 숫자 리터럴로 구성된 배열 arr을 첫 번째 인자로, 숫자 n을 두 번째 인자로 받는 함수 chunk()를 작성해 보겠습니다.

이 함수는 n개의 하위 배열을 담은 배열을 반환해야 하며, 각 하위 배열에는 최대 arr.length / n개의 요소가 포함됩니다.

요소 분배 규칙

요소는 다음과 같은 방식으로 분배됩니다.

• 첫 번째 요소는 첫 번째 하위 배열에, 두 번째 요소는 두 번째 하위 배열에, 이런 식으로 순서대로 배치됩니다.
• 모든 하위 배열에 요소가 하나씩 채워지면, 다시 첫 번째 하위 배열부터 두 번째 요소를 채우기 시작합니다.
• 모든 하위 배열에 두 개씩 요소가 채워진 뒤에야 세 번째 요소가 첫 번째 배열에 추가되며, 이 과정이 반복됩니다.

입력 및 기대 출력 예시

예를 들어 입력 배열이 다음과 같고,

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];

n이 3이라면 출력은 다음과 같아야 합니다.

const output = [
    [ 656, 67, 54 ],
    [ 756, 43, 768 ],
    [ 5345, 76, 34 ]
];

reduce()를 활용한 구현

원본 배열에 Array.prototype.reduce() 메서드를 사용하면 원하는 형태의 배열을 간결하게 만들 수 있습니다.

예제 코드

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];
const divideArray = (arr, size) => {
    return arr.reduce((acc, val, ind) => {
        const subIndex = ind % size;
        if(!Array.isArray(acc[subIndex])){
            acc[subIndex] = [val];
        }else{
            acc[subIndex].push(val);
        };
        return acc;
    }, []);
};
console.log(divideArray(input, 3));

동작 원리

코드의 핵심 로직은 다음과 같습니다.

• ind % size: 현재 요소의 인덱스를 size로 나눈 나머지를 계산하여, 해당 요소가 속할 하위 배열의 인덱스를 결정합니다.
• Array.isArray(acc[subIndex]): 해당 위치에 아직 하위 배열이 없으면 새 배열을 생성하고 요소를 저장합니다.
• 이미 배열이 존재한다면 push() 메서드로 요소를 추가합니다.

출력 결과

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

[ [ 656, 67, 54 ], [ 756, 43, 768 ], [ 5345, 76, 34 ] ]