Object.groupBy(), la manera nativa de agrupar datos en JavaScript 👌
Tags: javascript, webdev, spanish, programming
Published: 2023-10-06 15:17:15

#**Índice**   
1. [Introducción](#id1)
2. [Sintaxis](#id2)
3. [Ejemplos](#id3)
4. [Conclusiones](#id4)
5. [Referencias](#id5)

## **1. Introducción** <a name="id1"><a/> 
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** <a name="id2"><a/> 

```js
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** <a name="id3"><a/> 
Ahora veamos algunos ejemplos para comprender todo de una mejor manera: 

### **Ejemplo #1**
```js
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**

```js
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**

```js
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**
```js
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** <a name="id4"><a/> 
* 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** <a name="id5"><a/> 
* 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:

{% link https://dev.to/duxtech/probando-generadores-de-texto-a-imagenes-con-ia-parte-i-3fmf %}
{% link https://dev.to/duxtech/paracetamoljs-217-explica-este-codigo-javascript-4ci %}
{% link https://dev.to/duxtech/paracetamoljs-216-explica-este-codigo-javascript-4g6d %}

![gif](https://media.giphy.com/media/beNeX29fBOizu/giphy.gif)