Map.groupBy()

items

Array같은 그룹화될 순회 가능한 요소입니다.

callbackFn

순회 가능한 각 요소에 대해 실행할 함수입니다. 이 함수는 현재 엘리먼트의 그룹을 나타내는 값(object 또는 원시 값)을 반환해야 합니다. 이 함수는 다음 인수를 사용하여 호출됩니다.

element

처리할 현재 요소

index

처리할 현재 요소의 인덱스

각 그룹에 대한 키가 있는 Map 객체로서 각각 연결된 그룹의 요소가 포함된 배열에 할당됩니다.

Map.groupBy()는 순회 가능한 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출합니다. 콜백 함수는 연관된 요소의 그룹을 나타내는 값을 반환해야 합니다. callbackFn이 반환한 값은 Map.groupBy()가 반환한 Map의 키로 사용됩니다. 각 키에는 콜백이 동일한 값을 반환한 모든 요소가 포함된 연관 배열이 있습니다.

반환된 Map과 원본 순회 가능한 요소는 동일합니다. 깊은 복사가 아닙니다. 요소의 내부 구조를 변경하면 원본 순회 가능한 요소와 반환된 Map에 모두 반영됩니다.

이 방법은 시간이 지남에 따라 변경될 수 있는 특정 객체와 관련된 정보를 그룹화해야 할 때 유용합니다. 객체가 수정되더라도 반환된 Map의 키로 계속 작동하기 때문입니다. 대신 객체에 대한 문자열 표현을 생성하고 이를 Object.groupBy()의 그룹화 키로 사용하는 경우 객체가 변경되어도 원본 객체와 해당 표현 간의 매핑을 유지해야 합니다.

Map.groupBy는 this의 값을 읽지 않습니다. 이 함수는 모든 객체에서 호출할 수 있으며 새로운 Map 인스턴스가 반환됩니다.

먼저 다양한 식료품의 재고를 나타내는 객체가 포함된 배열을 정의합니다. 각 식품에는 type과 quantity이 있습니다.

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 },
];

아래 코드는 요소의 quantity < 6 여부에 따라 restock 또는 sufficient라는 객체 키를 반환하는 화살표 함수와 함께 Map.groupBy()를 사용합니다. 반환된 result 객체는 Map이기 때문에 배열을 얻으려면 키와 함께 get()을 호출해야 합니다.

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

함수의 인수 { quantity }는 함수 인수의 객체 구조 분해 구문의 기본 예시입니다. 이렇게 하면 매개변수로 전달된 객체의 quantity 속성을 풀고 함수 본문에 있는 quantity이라는 변수에 할당합니다. 이는 함수 내에서 요소의 관련 값에 접근하는 매우 간단명료한 방법입니다.

Map의 키는 수정한 후에도 계속 사용할 수 있습니다. 그러나 키를 다시 생성하여 계속 사용할 수는 없습니다. 따라서 맵을 사용해야 하는 모든 것이 해당 키에 대한 참조를 유지하는 것이 중요합니다.

// 키는 수정 가능하고 여전히 사용 중입니다.
restock["fast"] = true;
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]

// 같은 구조를 가지고 있더라도 새로운 키는 사용할 수 없습니다!
const restock2 = { restock: true };
console.log(result.get(restock2)); // undefined

• Polyfill of Map.groupBy in core-js
• 인덱스 기반 컬렉션 가이드
• Array.prototype.reduce()
• Map()
• Object.groupBy()