JavaScript에서 배열의 동일한 항목들을 그룹으로 묶는 방법

문제 상황

중복된 값이 포함된 숫자 배열이 있을 때, 이 배열을 인자로 받아 동일한 항목끼리 하나의 하위 배열(subarray)로 묶고, 그렇게 형성된 새로운 배열을 반환하는 함수를 작성해야 합니다.

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

const arr = [234, 65, 65, 2, 2, 234];

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

const output = [[234, 234], [65, 65], [2, 2]];

접근 방법

이 문제는 해시맵(Hash Map)을 활용하면 효율적으로 해결할 수 있습니다. 해시맵에는 이미 등장한 요소가 속한 그룹의 인덱스를 기록해 두고, for 루프로 배열을 한 번만 순회하면서 각 요소를 해당 그룹에 추가하는 방식입니다.

• 요소가 처음 등장하면 새로운 하위 배열을 생성하고, push 메서드가 반환하는 새로운 길이에서 1을 뺀 값을 인덱스로 저장합니다.
• 이미 등장한 요소라면 저장된 인덱스를 참조하여 기존 하위 배열에 값을 추가합니다.

그럼 실제 코드를 작성해 보겠습니다.

예제 코드

const arr = [234, 65, 65, 2, 2, 234];
const groupArray = arr => {
   const map = {};
   const group = [];
   for(let i = 0; i < arr.length; i++){
      if(typeof map[arr[i]] === 'number'){
         group[map[arr[i]]].push(arr[i]);
      }else{
         //push 메서드는 배열의 새로운 길이를 반환하며,
         //새로 추가된 요소의 인덱스는 길이-1입니다.
         map[arr[i]] = group.push([arr[i]])-1;
      }
   };
   return group;
}
console.log(groupArray(arr));

출력 결과

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

[ [ 234, 234 ], [ 65, 65 ], [ 2, 2 ] ]

코드 설명

핵심 로직을 단계별로 살펴보면 다음과 같습니다.

1. map 객체는 각 고유한 값이 몇 번째 그룹(인덱스)에 속하는지 저장하는 역할을 합니다.
2. group 배열은 최종적으로 반환될 2차원 배열입니다.
3. typeof map[arr[i]] === 'number' 조건을 통해 해당 값이 이전에 등장했는지 여부를 확인합니다.
4. 처음 등장한 값이라면 group.push([arr[i]])로 새 그룹을 생성하고, push가 반환하는 새 길이에서 1을 빼면 방금 추가된 하위 배열의 인덱스를 얻을 수 있습니다.

이 방식은 배열을 단 한 번만 순회하므로 시간 복잡도가 O(n)으로 매우 효율적이며, 대량의 데이터를 처리할 때도 안정적인 성능을 보여줍니다.