Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 배열을 n개의 하위 배열로 균등하게 나누는 방법

이번 글에서는 문자열 또는 숫자로 이루어진 배열 arr를 첫 번째 인수로, 숫자 n을 두 번째 인수로 받는 함수를 작성해 보겠습니다.

이 함수는 n개의 하위 배열(subarray)을 반환해야 하며, 각 하위 배열은 최대 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 ]
];

구현 방법

이 문제는 원본 배열에 Array.prototype.reduce() 메서드를 사용하여 원하는 형태의 배열을 만들면 깔끔하게 해결할 수 있습니다. 핵심 아이디어는 현재 요소의 인덱스를 size로 나눈 나머지(%)를 이용해 해당 요소가 속할 하위 배열의 위치를 결정하는 것입니다.

코드 예제

다음은 전체 구현 코드입니다.

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));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

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

동작 원리 정리

코드의 동작 과정을 단계별로 살펴보면 다음과 같습니다.

  • 초기값 설정: reduce()의 초기 누적값으로 빈 배열 []을 지정합니다.
  • 인덱스 계산: ind % size를 통해 현재 요소가 몇 번째 하위 배열에 들어갈지 결정합니다. 예를 들어 인덱스 0, 3, 6번 요소는 모두 첫 번째 하위 배열(인덱스 0)에 배치됩니다.
  • 조건부 생성: 해당 위치에 아직 배열이 없다면 새 배열을 만들고 요소를 추가하고, 이미 배열이 존재한다면 push()로 요소를 추가합니다.

이러한 라운드 로빈(round-robin) 방식의 분배는 데이터를 여러 그룹에 고르게 나눌 때 유용하게 활용될 수 있습니다.