Object.groupBy(), la manera nativa de agrupar datos en JavaScript 👌

Índice

1. Introducción
2. Sintaxis
3. Ejemplos
4. Conclusiones
5. Referencias

1. Introducción

Acaba de llegar al estándar de JavaScript el método estático Object.groupBy() para poder agrupar data de manera nativa en JavaScript.
Entendamos la naturaleza de esta nueva característica de JavaScript a continuación:

2. Sintaxis

Object.groupBy(iterable, callbackFn);

Donde:

• Object.groupBy() es el método estático y el constructor que nos permite realizar el agrupamiento de los datos. El resultado de salida siempre será un nuevo objeto.
• iterable es el elemento en cuestión que queremos agrupar, usualmente un arreglo.
• callbackFn es una función que se ejecutará por cada item del arreglo y lo agrupará en base al criterio que establezcamos en la lógica de esta función.

3. Ejemplos

Ahora veamos algunos ejemplos para comprender todo de una mejor manera:

Ejemplo #1

const products = [
  { type: "fruit", name: "apple" },
  { type: "vegetable", name: "carrot" },
  { type: "fruit", name: "banana" },
  { type: "vegetable", name: "potato" },
];

const agruparPorTipo = Object.groupBy(products, (product) => product.type);
console.log(agruparPorTipo);

/*
{
  "fruit": [
    { type: "fruit", name: "apple" },
    { type: "fruit", name: "banana" },
  ],
  "vegetable": [
    { type: "vegetable", name: "carrot" },
    { type: "vegetable", name: "potato" },
  ],
}
*/

El resultado es un nuevo objeto donde cada llave será el valor de type del arreglo products.

Ejemplo #2

const customers = [
  { country: "US", name: "John Doe" },
  { country: "UK", name: "Jane Doe" },
  { country: "France", name: "Pierre Dupont" },
];

const agruparPorPais = Object.groupBy(customers, ({country}) => country);
console.log(agruparPorPais);

/*
{
  "France": [
    {
      country: "France",
      name: "Pierre Dupont",
    },
  ],
  "UK": [
    {
      country: "UK",
      name: "Jane Doe",
    },
  ],
  "US": [
    {
      country: "US",
      name: "John Doe",
    },
  ],
}
*/

Al tener 3 países diferentes, creamos una llave por cada país para poder hacer la agrupación por este criterio.
Nota que usamos desestructuración en el callback de agruparPorPais para simplificar un poco más la función.

Ejemplo #3

const numbers = [1, 2, 3, 4, 5];

const groupedNumbers = Object.groupBy(numbers, (number) => number % 2 === 0 ? "par" : "impar");
console.log(groupedNumbers);

/*
{
    "impar":[1, 3, 5],
    "par":[2, 4]
}
*/

En este caso queremos agrupar los números dependiendo si estos son pares o impares, para ello usamos un condicional muy sencillo y establecemos nuestras propias etiquetas personalizadas que se usaran de llave para la agrupación del arreglo numbers.

Ejemplo #4

const products = [
  { name: "Producto 1", category: "Electrónica", price: 500 },
  { name: "Producto 2", category: "Deportes", price: 300 },
  { name: "Producto 3", category: "Moda", price: 400 },
  { name: "Producto 4", category: "Electrónica", price: 100 },
];

const agruparPorCategory = Object.groupBy(products, (product) => product.category);
const llaves = Object.keys(agruparPorCategory); // [ Electrónica, Deportes, Moda ]

const sumaTotalesPorCategory = llaves.reduce((acc, item) => {
  return{
    ...acc,
    [item]: agruparPorCategory[item].reduce((acc, item) => acc + item.price, 0)
  }
}, {});

console.log(sumaTotalesPorCategory);
/*
  {
    "Electrónica": 600,
    "Deportes": 300,
    "Moda": 400
  }
*/

En este último ejemplo que quiere obtener un total por categoría.

4. Referencias

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
• https://philna.sh/blog/2023/09/14/javascript-array-grouping-methods/

5. Conclusiones

• Las nuevas funcionalidades nativas siempre son bienvenidas en cualquier lenguaje de programación.
• Ahora no es necesario hacer una implementación propia para hacer agrupamientos ni tampoco importar ni mantener dependencias de utilidades.
• No me parece importante saber todo sobre esta nueva funcionalidad de memoria, lo que si me parece necesario es saber que este tipo de funcionalidades existen en el lenguaje, con una revisada a la MND bastara.

---

Más post de mi autoría:

Probando generadores de texto a imagenes con IA, StableCog vs Mage🤖

Cristian Fernando ・ Jul 28 '23

#ai #promptengineering #beginners #productivity

Paracetamol.js💊| #213: Explica este código JavaScript

Cristian Fernando ・ Apr 5 '23

#javascript #webdev #spanish #programming

Paracetamol.js💊| #212: Explica este código JavaScript

Cristian Fernando ・ Apr 4 '23

#javascript #webdev #spanish #programming

Comments

[Camilo Martinez]

Hay alguna forma u opcion dentro del groupBy para excluir del resultado de cada grupo el valor que se usa para agruparlo y no quede repetido.

Por ejemplo type en el primer ejemplo, y quede algo como esto?

{
  "fruit": [
    { name: "apple" },
    { name: "banana" },
  ],
  "vegetable": [
    { name: "carrot" },
    { name: "potato" },
  ],
}

[Cristian Fernando]

Es una buena pregunta, pero no encontré la manera de poder llegar a ese resultado solo usando groupBy(). Implementando la siguiente lógica me fue posible llegar a la salida que propones:

const products = [
  { type: "fruit", name: "apple" },
  { type: "vegetable", name: "carrot" },
  { type: "fruit", name: "banana" },
  { type: "vegetable", name: "potato" },
];

const agruparPorTipo = Object.groupBy(products, (product) => product.type);

// Eliminar el campo `type` del objeto agrupado
const agruparPorTipoSinType = Object.entries(agruparPorTipo).map((entry) => {
  const [type, products] = entry;
  return {
    products: products.map((product) => {
      delete product.type;
      return product;
    }),
  };
});

console.log(agruparPorTipoSinType);

Muchas gracias por tu pregunta, espero que mi respuesta te sea de utilidad. Saludos.

[Maria Zaitseva]

¡Esto es muy bueno! Tengo la sensación de que usaré esto mucho. (traducido por google)

[Cristian Fernando]

Muchas gracias por tu comentario!