자바스크립트에서 배열의 요소들을 특정 기준에 따라 그룹화하는 작업은 많은 경우에 사용되며, 데이터 처리나 분석과 같은 작업에서 유용하게 활용됩니다. 그룹화된 결과를 활용하여 데이터를 쉽게 조작하거나 원하는 형태로 표현할 수 있습니다. 이번 포스트에서는 자바스크립트에서 배열의 요소를 특정 기준으로 그룹화하는 방법을 알아보겠습니다.

1. reduce() 함수를 사용한 그룹화

reduce() 함수는 배열의 요소를 반복하여 단일 값으로 줄이는 기능을 제공합니다. 이를 활용하여 배열의 요소를 특정 기준으로 그룹화할 수 있습니다.

const array = [ 
  { name: 'Alice', age: 20, gender: 'female' },
  { name: 'Bob', age: 25, gender: 'male' },
  { name: 'Charlie', age: 30, gender: 'male' },
  { name: 'Dave', age: 35, gender: 'male' },
  { name: 'Eve', age: 30, gender: 'female' },
];

const grouped = array.reduce((acc, curr) => {
  const key = curr.gender;
  
  if (!acc[key]) {
    acc[key] = [];
  }
  
  acc[key].push(curr);
  
  return acc;
}, {});

console.log(grouped);

출력 결과:

{
  female: [
    { name: 'Alice', age: 20, gender: 'female' },
    { name: 'Eve', age: 30, gender: 'female' }
  ],
  male: [
    { name: 'Bob', age: 25, gender: 'male' },
    { name: 'Charlie', age: 30, gender: 'male' },
    { name: 'Dave', age: 35, gender: 'male' }
  ]
}

위의 예시에서는 reduce() 함수를 사용하여 gender 속성을 기준으로 요소들을 그룹화했습니다. reduce() 함수는 초기값으로 빈 객체({})를 사용하고, 요소들을 반복하면서 gender 속성을 키(key)로 사용하여 객체에 새로운 속성을 추가하고 해당 그룹에 요소를 추가한 후, 결과 객체를 반환합니다.

2. map()과 reduce() 함수를 함께 사용한 그룹화

map() 함수는 배열의 모든 요소에 대해 새로운 배열을 만들어 반환하는 기능을 제공합니다. map() 함수를 활용하여 그룹화된 결과를 원하는 형태로 변환할 수 있습니다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const grouped = array.reduce((acc, curr) => {
  const mod = curr % 2;
  
  if (!acc[mod]) {
    acc[mod] = [];
  }
  
  acc[mod].push(curr);
  
  return acc;
}, {});

const transformed = Object.entries(grouped).map(([key, value]) => ({
  type: key === '0' ? 'even' : 'odd',
  numbers: value,
}));

console.log(transformed);

출력 결과:

[
  { type: 'even', numbers: [2, 4, 6, 8, 10] },
  { type: 'odd', numbers: [1, 3, 5, 7, 9] }
]

위의 예시에서는 map() 함수를 사용하여 그룹화된 결과를 { type, numbers } 형태로 변환했습니다. Object.entries() 함수를 사용하여 객체를 배열 형태로 변환한 후, 배열의 각 요소들을 순회하면서 key와 value를 추출하여 원하는 형태로 변환하였습니다. 그룹화된 결과를 필요에 맞게 가공하는 작업이 가능해집니다.

이처럼 자바스크립트에서 배열의 요소를 특정 기준으로 그룹화하는 작업은 reduce() 함수와 map() 함수를 활용하여 간단하게 처리할 수 있습니다. 그룹화된 결과를 유용하게 활용하여 데이터 처리나 표현에 적용해보세요!