[JavaScript]배열 그룹화하는 방법

이번 포스팅은 객체로 구성된 배열을 그룹화하는 방법을 소개합니다.

---

샘플 데이터

다음은 이번 포스팅에서 예제로 사용될 샘플 데이터입니다.

const fruits = [
  { name: 'banana', date: '2021', price: 10000 },
  { name: 'banana', date: '2022', price: 20000 },
  { name: 'apple',  date: '2021', price: 15000 },
  { name: 'apple',  date: '2022', price: 25000 },
  { name: 'orange', date: '2020', price: 40000 },
  { name: 'grape',  date: '2020', price: 25000 }
];

fruits라는 배열에는 과일의 가격을 연도별로 가지고 있습니다.

 

이 배열을 다음과 같이 과일별로 그룹화하거나

const groupByName = {
  'banana': [
    { name: 'banana', date: '2021', price: 10000 },
    { name: 'banana', date: '2022', price: 20000 }
  ],
  'apple': [
    { name: 'apple',  date: '2021', price: 15000 },
    { name: 'apple',  date: '2022', price: 25000 }
  ],
  'orange': [
    { name: 'orange', date: '2020', price: 40000 }
  ],
  'grape': [
    { name: 'grape',  date: '2020', price: 25000 }
  ]
};

다음과 같이 연도별로 그룹화할 수 있습니다.

const groupByName = {
  '2020': [
    { name: 'orange', date: '2020', price: 40000 },
    { name: 'grape',  date: '2020', price: 25000 }
  ],
  '2021': [
    { name: 'banana', date: '2021', price: 10000 },
    { name: 'apple',  date: '2021', price: 15000 }
  ],
  '2022': [
    { name: 'banana', date: '2022', price: 20000 },
    { name: 'apple',  date: '2022', price: 25000 }
  ]
};

그룹화하는 방법은 아래에서 설명합니다.

---

array.reduce() 함수

JavaScript 배열에 내장되어 있는 reduce() 함수를 사용하여 배열의 요소를 그룹화할 수 있습니다.

 

다음 예제는 과일 이름별로 배열을 그룹화합니다.

const groupByName = fruits.reduce((acc, obj) => {
  const {name} = obj;
  // acc[name]이 있으면 acc[name]의 값을 할당 없으면, 빈 배열을 할당
  acc[name] = acc[name] ?? []; 
  // acc[name]에 객체를 추가
  acc[name].push(obj);
  return acc;
}, {});

console.log(groupByName);

[실행 결과]

다음 예제는 연도별로 배열을 그룹화합니다.

const groupByName = fruits.reduce((acc, obj) => {
  const {date} = obj;
  acc[date] = acc[date] ?? [];
  acc[date].push(obj);
  return acc;
}, {});

console.log(groupByName);

[실행 결과]

JavaScript의 reduce() 함수는 배열의 각 요소를 순회하여 callback 함수가 return 하는 값을 누적하여 새로운 배열을 반환합니다.