Object.groupBy()

시도해 보기

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 9 },
  { name: "bananas", type: "fruit", quantity: 5 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 12 },
  { name: "fish", type: "meat", quantity: 22 },
];

const restock = { restock: true };
const sufficient = { restock: false };
const result = Object.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? "restock" : "sufficient",
);
console.log(result.restock);
// [{ name: "bananas", type: "fruit", quantity: 5 }]

구문

Object.groupBy(items, callbackFn)

매개변수

items

요소가 그룹화 될 순회 가능(Array 같은).

callbackFn

각 순회 가능 요소에 대해 실행할 함수. 현재 요소의 그룹을 가리키는 속성 키(문자열 혹은 심볼)를 반드시 반환해야 합니다. 이 함수는 다음의 요소와 함께 호출됩니다.

element

현재 처리 중인 요소.

index

현재 처리 중인 요소의 인덱스.

반환 값

연관된 그룹의 요소를 가지는 배열이 각각의 요소에 저장되어 있는 null-프로토타입 객체

설명

Object.groupBy()는 순회 가능한 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출합니다. 이 콜백 함수는 관련 요소의 그룹을 나타내는 문자열 또는 심볼을 반환해야 합니다 (문자열이나 심볼이 아닌 값들은 문자열로 강제 변환됩니다). callbackFn이 반환한 값들은 Map.groupBy()가 반환하는 객체의 키로 사용됩니다. 각 키는 콜백이 동일한 값을 반환한 모든 요소들을 포함하는 배열과 연관됩니다.

반환된 객체와 원본 순회 가능한 여러 요소는 동일합니다 (깊은 복사가 아닙니다). 요소들의 내부 구조를 변경하면 원본 순회 가능 요소와 반환된 객체 모두에 그 변경이 반영됩니다.

예제

Object.groupBy() 사용하기

첫 번째로 다양한 음식의 인벤토리를 표현하는 객체를 가지는 배열을 정의하겠습니다. 각 음식은 typeê³¼ quantity가 있습니다.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

요소의 type 속성의 값에 따라 요소를 그룹화합니다.

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

화살표 함수는 호출될 때마다 각 배열 요소의 type을 반환합니다. 함수 인자 { type }은 함수 인자를 위한 객체 구조 분해 문법의 기본적인 예시라는 점 명심하시기 바랍니다. 이는 매개변수로 전달된 객체에서 type 속성을 꺼내어 함수 본문 내에서 type이라는 이름의 변수에 할당합니다.

이는 함수 내에서 요소들의 관련 값에 접근하는 매우 간결한 방법입니다.

또한 요소들의 하나 이상의 속성 값으로부터 추론된 그룹을 만들 수 있습니다. 아래는 매우 유사한 예시로, quantity 필드의 값을 기반으로 항목들을 ok 또는 restock 그룹으로 나누는 방법을 보여줍니다.

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

/* Result is:
{
  restock: [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  ok: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

명세서

브라우저 호환성

같이 보기

• core-js에서의 Object.groupBy 폴리필
• 인덱스 기반 컬렉션 안내서
• Array.prototype.reduce()
• Object.fromEntries()
• Map.groupBy()