JavaScript에서 배열을 균등하게 청크(Chunk)로 나누는 방법

JavaScript에서는 문자열 또는 숫자 리터럴로 이루어진 배열 arr을 첫 번째 인수로, 숫자 n을 두 번째 인수로 받는 chunk() 함수를 작성해야 하는 경우가 있습니다.

이 함수는 최대 arr.length / n개의 요소를 가진 n개의 하위 배열(subarray)을 담은 배열을 반환해야 합니다. 이때 요소의 분배 방식은 다음과 같습니다.

첫 번째 요소는 첫 번째 하위 배열에, 두 번째 요소는 두 번째 하위 배열에, 세 번째 요소는 세 번째 하위 배열에 순서대로 배치됩니다. 모든 하위 배열에 하나씩 요소가 채워지면, 다시 첫 번째 하위 배열부터 두 번째 요소를 채우기 시작합니다. 마찬가지로 모든 하위 배열에 두 개의 요소가 채워진 후에야 첫 번째 배열에 세 번째 요소를 채우는 식으로 진행됩니다.

예시

// 입력 배열이 다음과 같다면:
const input = [1, 2, 3, 4, 5, 6];
// 출력 결과는 다음과 같아야 합니다:
const output = [
    [1, 4],
    [2, 5],
    [3, 6]
];

이제 이 함수의 코드를 작성해 보겠습니다. 원본 배열에 Array.prototype.reduce() 메서드를 사용하여 원하는 형태의 배열을 만들 수 있습니다.

코드 구현

const input = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const chunk = (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(chunk(input, 4));

동작 원리

이 코드의 핵심은 인덱스를 크기로 나눈 나머지(ind % size)를 활용하는 것입니다. 각 요소의 인덱스를 청크 크기로 나눈 나머지 값이 해당 요소가 들어갈 하위 배열의 위치를 결정합니다. 예를 들어 크기가 4라면, 인덱스 0, 4, 8의 요소들은 모두 나머지가 0이므로 첫 번째 하위 배열에 배치됩니다.

출력 결과

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

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

이처럼 reduce() 메서드와 나머지 연산자를 조합하면 복잡한 반복문 없이도 간결하게 배열을 원하는 개수의 청크로 분배할 수 있습니다.