? 드디어 나왔습니다! 더 이상 필드의 특정 값을 기준으로 객체 배열을 그룹화하기 위해 보기 흉한 코드를 작성할 필요가 없습니다!

2023년 후반부터 이를 수행하는 groupBy()라는 Object의 공식 정적 메서드가 있습니다!
배열과 같은 Iterable과 각 요소에 대해 실행되고 해당 특정 요소의 "범주"를 반환해야 하는 함수를 허용합니다.
이 메서드는 각 키가 해당 특정 카테고리에 속하는 객체 배열을 포함하는 다른 카테고리인 새 객체를 반환합니다.

참고: 반환된 객체와 원래 반복 가능 항목의 요소는 동일합니다(전체 복사본이 아닙니다!). 요소의 내부 구조를 변경하면 원래 iterable 객체와 반환된 객체 모두에 반영됩니다.

예

모든 닌자 거북이 캐릭터를 연령별로 그룹화하는 것이 얼마나 쉬운지 실제 예를 들어 보겠습니다.

초기 배열

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

좋은 옛날 방식(감소 포함)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

현대적인 방식

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

팁: 객체 대신 지도를 반환하려면 Map.groupBy()를 사용하세요.

결과

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

데모

??‍? 평소처럼 코드를 가지고 놀기 위해 간단한 Stackblitz 프로젝트를 만들었습니다.

? 문서: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ 브라우저 지원: https://caniuse.com/mdn-javascript_builtins_object_groupby