Í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