JavaScript에서 동일한 속성 값 기준으로 객체 그룹화하기

JavaScript를 사용하다 보면 배열 안의 여러 객체를 특정 속성 값 기준으로 묶어야 하는 경우가 자주 발생합니다. 이번 글에서는 unit 속성 값이 같은 객체들을 하나로 그룹화하고, 나머지 속성(brand)을 쉼표로 연결해 병합하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 배열이 있다고 가정해 보겠습니다.

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

여기서 요구되는 작업은 unit 속성 값이 동일한 객체들의 brand 값을 하나로 합치는 것입니다. 위 배열을 처리하면 결과는 다음과 같아야 합니다.

const output = [
    {unit: 35, brand: 'CENTURY, BADGER'},
    {unit: 25, brand: 'CENTURY, XEGAR'},
    {unit: 15, brand: 'CENTURY'}
];

해결 접근 방식

핵심 로직은 다음과 같습니다.

배열을 순회하면서 각 객체의 unit 값을 확인합니다.
결과 배열에 이미 해당 unit 값을 가진 객체가 있는지 헬퍼 함수로 검색합니다.
존재한다면 기존 객체의 brand 값 뒤에 새 brand를 쉼표와 함께 이어 붙이고,
존재하지 않는다면 새로운 객체를 결과 배열에 추가합니다.

구현 코드

다음은 전체 구현 예제입니다.

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];
const indexOf = function(unit){
    return this.findIndex(el => el.unit === unit)
};
Array.prototype.indexOf = indexOf;
const groupArray = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
       const ind = res.indexOf(arr[i].unit);
       if(ind !== -1){
          res[ind].brand += `, ${arr[i].brand}`;
       }else{
          res.push(arr[i]);
       }
   };
   return res;
};
console.log(groupArray(arr));

코드 설명

indexOf 헬퍼 함수는 findIndex를 활용해 결과 배열 내에서 일치하는 unit 값을 가진 객체의 인덱스를 반환합니다. 만약 일치하는 요소가 없으면 -1을 반환하며, 이 경우 해당 객체를 그대로 결과 배열에 추가(push)합니다. 일치하는 요소가 있다면 템플릿 리터럴을 이용해 brand 문자열을 쉼표로 구분하여 덧붙입니다.

참고: 실무 환경에서는 Array.prototype을 직접 수정하기보다는 Map 객체나 reduce() 메서드를 활용하는 것이 더 안전하고 권장되는 방식입니다. 원본 프로토타입 변경은 다른 라이브러리나 코드와 충돌을 일으킬 수 있습니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

[
    { unit: 35, brand: 'CENTURY, BADGER' },
    { unit: 25, brand: 'CENTURY, XEGAR' },
    { unit: 15, brand: 'CENTURY' }
]

이처럼 간단한 순회와 조건 분기만으로도 동일한 속성 값을 가진 객체들을 손쉽게 그룹화할 수 있습니다. 데이터 집계나 중복 제거 로직을 구현할 때 유용하게 활용할 수 있는 패턴이니 꼭 익혀두시기 바랍니다.