[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법

[JavaScript] 배열 리스트를 객체로 그룹화 하는 방법

회사에서 GroupSelect 컴포넌트를 구현하였습니다.
props로 list를 넘겨주면 해당 컴포넌트 내에서 특정 type을 기준으로 그룹핑을 하였습니다.
이 부분이 불편하여 찾아보다가 좋은 방법을 발견하여 게시글을 작성합니다.

기존 방식

const groupBy = (array, type) => {
  return array.reduce((x, y) => {
    (x[y[type]] = x[y[type]] || []).push(y);

    return x;
  }, {});
};

const users = [
  {
    name: "강호동",
    gender: "man"
  },
  {
    name: "이효리",
    gender: "woman"
  },
  {
    name: "이수근",
    gender: "man"
  },
  {
    name: "김희선",
    gender: "woman"
  },
  {
    name: "김아중",
    gender: "woman"
  },
  {
    name: "김흥국",
    gender: "man"
  }
];


const { man, woman } = groupBy(users, "gender");
console.log("# man  : ", man);
console.log("# woman  : ", woman);

위 방식이 사용하던 방식을 간단하게 작성한 코드입니다.
TypeScript로 할 때 type만 잘 정의해준다면 문제는 없습니다.

그러나 굳이 위처럼 groupBy 함수를 구현하지 않고 간단하게 사용할 수 있는 방법이 있습니다.

Object.groupBy 사용하기 (node 21 이상)

Object.groupBy 를 사용하면 간단하게 배열을 그룹핑 할 수 있습니다.
아래 코드를 보시면 바로 이해가 가능하실 것입니다.

const users = [
  {
    name: "강호동",
    gender: "man"
  },
  {
    name: "이효리",
    gender: "woman"
  },
  {
    name: "이수근",
    gender: "man"
  },
  {
    name: "김희선",
    gender: "woman"
  },
  {
    name: "김아중",
    gender: "woman"
  },
  {
    name: "김흥국",
    gender: "man"
  }
];

const { man, woman } = Object.groupBy(users, ({ gender }) =>
  gender === "man" ? "man" : "woman"
);

console.log("# man  : ", man);
console.log("# woman  : ", woman);

비교해준 기준으로 그룹핑이 되어 return이 된 것을 확인할 수 있습니다.

주의점

위 함수를 사용하실 때 아래와 같은 에러를 확인하실 수 있습니다.

TypeError: Object.groupBy is not a function

위 에러가 발생하는 이유는 사용하는 node 버전이 낮아서 그럴 확률이 높습니다.
node 21 이상부터 사용할 수 있기 때문에 그 점 참고하시면 좋을 것 같습니다.

참고문헌

• Object.groupBy