JavaScript에서 배열을 지정한 크기의 그룹으로 분할하는 방법

개요

JavaScript 개발에서 배열을 일정한 크기의 그룹(청크)으로 나누는 작업은 페이지네이션, 배치(batch) 처리 등 다양한 상황에서 유용하게 활용됩니다. 이번 글에서는 배열과 숫자를 인자로 받아, 배열(첫 번째 인자)을 길이가 n인 그룹들(두 번째 인자)로 분할한 뒤, 그 결과로 만들어진 2차원 배열을 반환하는 함수를 작성하는 방법을 알아보겠습니다.

예를 들어 배열과 숫자가 다음과 같다면 −

const arr = ['a', 'b', 'c', 'd'];
const n = 2;

출력 결과는 다음과 같아야 합니다 −

const output = [['a', 'b'], ['c', 'd']];

구현 예제

이제 실제 코드를 작성해 보겠습니다 −

const arr = ['a', 'b', 'c', 'd'];
const n = 2;
const chunk = (arr, size) => {
    const res = [];
    for(let i = 0; i < arr.length; i++) {
        if(i % size === 0){
            // 현재 값을 담은 새로운 배열을 res에 추가
            res.push([arr[i]]);
        }
        else{
            // 현재 값을 마지막 그룹 배열에 추가
            res[res.length-1].push(arr[i]);
        };
    };
    return res;
};
console.log(chunk(arr, n));

출력 결과

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

[ [ 'a', 'b' ], [ 'c', 'd' ] ]

코드 동작 원리

이 함수의 핵심은 현재 인덱스(i)를 그룹 크기(size)로 나눈 나머지를 확인하는 것입니다. 나머지가 0이면 새로운 그룹이 시작되는 시점이므로 현재 값을 첫 요소로 하는 새 배열을 생성하고, 그렇지 않으면 마지막으로 만든 그룹 배열에 값을 추가합니다. 이 과정을 배열의 끝까지 반복하면 원하는 크기의 그룹들로 구성된 2차원 배열이 완성됩니다.

대안: slice() 메서드 활용하기

같은 기능을 더 간결하게 구현하고 싶다면 slice() 메서드를 활용할 수 있습니다.

const chunk = (arr, size) => {
    const res = [];
    for(let i = 0; i < arr.length; i += size) {
        res.push(arr.slice(i, i + size));
    }
    return res;
};
console.log(chunk(['a', 'b', 'c', 'd'], 2));
// [ [ 'a', 'b' ], [ 'c', 'd' ] ]

이 방식은 반복문에서 인덱스를 size만큼 건너뛰며, slice()로 해당 범위의 요소들을 한 번에 잘라내기 때문에 코드가 훨씬 직관적입니다. 참고로 마지막 그룹이 지정된 크기보다 작을 경우, 남은 요소들만 포함된 더 짧은 배열이 반환됩니다.