JavaScript로 배열의 첫 번째 값을 기준으로 요소 그룹화하기

다음과 같이 숫자 배열을 요소로 가지는 배열이 있다고 가정해 보겠습니다.

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];

각 하위 배열은 반드시 두 개의 요소만 포함한다고 합시다. 이때 우리가 작성해야 할 함수는 첫 번째 값이 동일한 하위 배열들의 두 번째 요소를 하나로 묶어 새로운 배열을 만드는 것입니다.

기대 결과

위 배열을 처리하면 출력 결과는 다음과 같은 형태가 됩니다.

const output = [
    [45, 34, 49],
    [34, 67],
    [78, 65]
];

즉, 첫 번째 값이 1인 요소들의 두 번째 값(45, 34, 49)이 하나의 배열로 묶이고, 2와 4도 각각 같은 방식으로 그룹화됩니다.

해결 방법: reduce()와 Map() 활용

이 문제는 JavaScript의 Array.prototype.reduce() 메서드와 Map()

예제 코드

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];

const constructSimilarArray = (arr = []) => {
    const creds = arr.reduce((acc, val) => {
        const { map, res } = acc;
        if (!map.has(val[0])) {
            // 처음 등장한 키라면 새 그룹 생성
            map.set(val[0], res.push([val[1]]) - 1);
        } else {
            // 기존 그룹에 값 추가
            res[map.get(val[0])].push(val[1]);
        }
        return { map, res };
    }, {
        map: new Map(),
        res: []
    });
    return creds.res;
};

console.log(constructSimilarArray(arr));

동작 원리

• map: 첫 번째 값(key)이 결과 배열에서 몇 번째 인덱스에 위치하는지 추적합니다.
• res: 최종적으로 반환될 그룹화된 배열입니다.
• reduce()가 순회하는 동안 키가 없으면 res.push([val[1]])으로 새 배열을 만들고, 그 인덱스를 Map에 저장합니다.
• 키가 이미 존재하면 해당 인덱스의 배열에 두 번째 값을 추가합니다.

실행 결과

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

[ [ 45, 34, 49 ], [ 34, 67 ], [ 78, 65 ] ]

이처럼 reduce()Map()