JavaScript 배열을 2개씩 묶어 청크(Chunk)로 나누는 방법

JavaScript에서 배열의 요소를 정확히 길이가 2인 하위 배열(subarray)로 나누어 새로운 배열을 반환하는 함수를 작성해 보겠습니다. 만약 원본 배열의 길이가 2로 나누어 떨어지지 않는다면, 마지막 하위 배열에는 요소가 하나만 남게 됩니다.

문제 이해하기

예를 들어 다음과 같은 입력 배열이 있다고 가정해 보겠습니다.

const arr = [1, 2, 3, 4, 5, 6, 7];

이 경우 기대하는 출력 결과는 다음과 같습니다.

const output = [[1, 2], [3, 4], [5, 6], [7]];

배열의 길이가 7이므로 앞의 여섯 개 요소는 두 개씩 묶여 세 개의 하위 배열을 만들고, 마지막 요소 7은 혼자 남아 하나의 요소만 가진 하위 배열이 됩니다.

구현 코드

이제 이 로직을 구현한 함수 코드를 살펴보겠습니다.

const arr = [1, 2, 3, 4, 5, 6, 7];

const chunk = arr => {
    const size = 2;
    const chunkedArray = [];
    for (let i = 0; i < arr.length; i++) {
        const last = chunkedArray[chunkedArray.length - 1];
        if (!last || last.length === size) {
            chunkedArray.push([arr[i]]);
        } else {
            last.push(arr[i]);
        }
    }
    return chunkedArray;
};

console.log(chunk(arr));

코드 동작 원리

이 함수의 핵심 로직은 다음과 같습니다.

1. 마지막 하위 배열 확인: 매 반복마다 chunkedArray의 마지막 하위 배열을 가져옵니다. 아직 하위 배열이 없거나(!last), 마지막 하위 배열이 이미 지정된 크기(size = 2)에 도달했다면 새로운 하위 배열을 생성합니다.

2. 요소 추가: 마지막 하위 배열이 아직 가득 차지 않았다면, 새 하위 배열을 만들지 않고 기존 하위 배열에 현재 요소를 추가합니다.

3. 결과 반환: 모든 요소를 순회한 후 완성된 청크 배열을 반환합니다.

실행 결과

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

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

추가 팁: 범용적인 청크 함수

청크 크기를 고정하지 않고 매개변수로 받도록 개선하면 더 유연하게 활용할 수 있습니다.

const chunk = (arr, size) => {
    const chunkedArray = [];
    for (let i = 0; i < arr.length; i += size) {
        chunkedArray.push(arr.slice(i, i + size));
    }
    return chunkedArray;
};

console.log(chunk([1, 2, 3, 4, 5, 6, 7], 2)); // [[1, 2], [3, 4], [5, 6], [7]]
console.log(chunk([1, 2, 3, 4, 5, 6, 7], 3)); // [[1, 2, 3], [4, 5, 6], [7]]

이 버전은 slice() 메서드를 활용하여 반복 횟수를 줄이고, 원하는 크기로 배열을 자유롭게 나눌 수 있어 실무에서 더욱 유용하게 사용됩니다.