JavaScript 중첩 배열에서 객체를 키별로 그룹화하는 방법

문제 소개

parentArray라는 배열이 있다고 가정해 보겠습니다. 이 배열은 크기가 모두 동일한 여러 개의 하위 배열(subarray)을 포함하고 있으며, 각 하위 배열은 key와 value라는 두 가지 속성을 가진 객체들의 목록입니다.

하나의 하위 배열 안에서는 두 객체가 동일한 key를 가질 수 없습니다. 반면, 모든 하위 배열은 서로 동일한 n개의 키 쌍(n은 하위 배열의 크기)을 공유합니다.

우리가 해결해야 할 과제는 다음과 같습니다. 각 key를 기준으로, 해당 키에 연관된 모든 value들을 하나의 배열로 모아 새로운 객체를 만드는 것입니다.

예제 데이터

아래는 샘플로 사용할 부모 배열입니다.

const parentArray = [[
    {
       key: 123,
       value: 'India'
    }, {
       key: 124,
       value: 'USA'
    }, {
       key: 125,
       value: 'Japan'
    }, {
       key: 126,
       value: 'Denmark'
    }, {
       key: 127,
       value: 'Austria'
    },
], [
    {
       key: 124,
       value: 'Kenya'
    }, {
       key: 126,
       value: 'UK'
    }, {
       key: 123,
       value: 'Germany'
    }, {
       key: 127,
       value: 'Spain'
    }, {
       key: 125,
       value: 'Portugal'
    },
]];

해결 접근 방식

핵심 로직은 매우 단순합니다. parentArray를 먼저 순회한 뒤, 그 안의 각 하위 배열을 차례대로 탐색합니다. 이 과정에서 이미 등장한 적 있는 key를 만나면 해당 키의 value 배열에 값을 추가(push)하고, 처음 등장한 키라면 새로운 value 배열을 생성합니다.

전체 코드

const map = {};

parentArray.forEach(arr => {
    arr.forEach(obj => {
        const { key, value } = obj;
        if(map[key]){
            map[key].push(value);
        } else {
            map[key] = [value];
        }
    })
});

console.log(map);

실행 결과

위 코드를 실행하면 콘솔에 아래와 같이 출력됩니다. 동일한 키를 가진 값들이 하나의 배열로 잘 묶인 것을 확인할 수 있습니다.

{
    '123': [ 'India', 'Germany' ],
    '124': [ 'USA', 'Kenya' ],
    '125': [ 'Japan', 'Portugal' ],
    '126': [ 'Denmark', 'UK' ],
    '127': [ 'Austria', 'Spain' ]
}

마무리

이처럼 중첩 배열 구조의 데이터는 forEach와 일반 객체(또는 Map)만 활용해도 간단하게 그룹화할 수 있습니다. 실무에서는 API 응답 데이터를 카테고리별로 정리하거나, 통계 집계를 수행할 때 자주 사용되는 패턴이므로 꼭 익혀두시길 권장합니다.