JavaScript 개발을 하다 보면 2차원 배열의 데이터를 특정 기준에 따라 그룹화해야 하는 경우가 자주 발생합니다. 이번 글에서는 색상과 과일 데이터가 담긴 2차원 배열을 카테고리별 객체 배열로 변환하는 방법을 알아보겠습니다.
예를 들어, 다음과 같이 과일과 색상 정보가 담긴 2차원 배열이 있다고 가정해 보겠습니다.
const data = [
['orange', 'fruit'],
['red', 'color'],
['green', 'color'],
['orange', 'color'],
['banana', 'fruit'],
['blue', 'color'],
['lemon', 'fruit'],
['mango', 'fruit'],
['lemon', 'color'],
];문제 정의
우리가 작성해야 할 함수는 위 배열을 입력받아 각 항목들을 카테고리(그룹)별로 묶은 배열을 반환해야 합니다.
위 예제에는 'fruit'와 'color'라는 두 가지 카테고리만 존재하므로, 출력 결과는 다음과 같이 두 개의 객체를 담은 배열이 되어야 합니다.
[
{
group: 'fruit',
value: [ 'orange', 'banana', 'lemon', 'mango' ]
},
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]참고: 이 예제에서는 두 가지 카테고리만 사용했지만, 실제 구현 시에는 카테고리의 개수가 몇 개든 동적으로 처리할 수 있는 범용적인 솔루션을 만들어야 합니다.
해결 방법: reduce() 활용하기
이 문제는 Array.prototype.reduce() 메서드를 사용하면 깔끔하게 해결할 수 있습니다. 로직은 다음과 같습니다.
- 배열의 각 하위 배열을 순회하면서 값(value)과 그룹 이름(groupName)을 분리합니다.
- 누적 배열(acc)에 해당 그룹이 이미 존재하는지
findIndex()로 확인합니다. - 그룹이 존재하면 기존 객체의 value 배열에 새 값을 추가(push)하고, 존재하지 않으면 새로운 그룹 객체를 생성하여 누적 배열에 추가합니다.
구현 예제
const data = [
['orange', 'fruit'],
['red', 'color'],
['green', 'color'],
['orange', 'color'],
['banana', 'fruit'],
['blue', 'color'],
['lemon', 'fruit'],
['mango', 'fruit'],
['lemon', 'color'],
];
const groupData = arr => {
return arr.reduce((acc, val) => {
const [value, groupName] = val;
const groupIndex = acc.findIndex(el => el?.group === groupName);
if(groupIndex !== -1){
acc[groupIndex].value.push(value);
}else{
acc.push({
group: groupName,
value: [value]
});
}
return acc;
}, []);
};
console.log(groupData(data));실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[
{ group: 'fruit', value: [ 'orange', 'banana', 'lemon', 'mango' ] },
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]마무리
이처럼 reduce() 메서드와 findIndex()를 조합하면 별도의 외부 라이브러리 없이도 2차원 배열을 원하는 기준으로 손쉽게 그룹화할 수 있습니다. 이 접근 방식은 카테고리 수가 늘어나거나 줄어들어도 그대로 동작하므로, 실무에서 다양한 데이터 그룹화 작업에 응용할 수 있습니다.