Novedades en JavaScript: agrupando elementos en un array

Agrupar elementos en un array nunca ha sido tan fácil. En breve, tendremos de forma nativa en JavaScript la función groupBy que nos facilitará esta tarea tan común.

Imagina que tienes este array:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Ahora supón que quieres conseguir una estructura como esta:

const numerosAgrupados = {
  par: [2, 4, 6, 8, 10],
  impar: [1, 3, 5, 7, 9],
}

Antes, para hacer algo así teníamos que hacerlo iterando los elementos, con las funciones filter o reduce. Por ejemplo, una forma muy básica sería esta:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const numerosAgrupados = {}

numeros.forEach((num) => {
  const key = num % 2 === 0 ? "par" : "impar"

  // comprobamos si ya existe algún número para añadir el nuevo
  if (numerosAgrupados[key]) {
    numerosAgrupados[key].push(num)
  } else {
    numerosAgrupados[key] = [num]
  }
})

/* Resultado
{
  impar: [1, 3, 5, 7, 9],
  par: [2, 4, 6, 8, 10]
}
*/
console.log(numerosAgrupados)

No tiene mucha complicación, de acuerdo, pero... ¿Y si fuera tan fácil como hacer esto?

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const numerosAgrupados = numeros.groupBy((num) => {
  return num % 2 === 0 ? "par" : "impar"
})

/* Resultado
{
  impar: [1, 3, 5, 7, 9],
  par: [2, 4, 6, 8, 10]
}
*/
console.log(numerosAgrupados)

Al método groupBy Debemos pasarle una función que devuelva la agrupación que queremos.

Imagina este otro array, en este caso de objetos:

const listaCompra = [
  { categoria: "fruta", nombre: "naranjas" },
  { categoria: "fruta", nombre: "peras" },
  { categoria: "fruta", nombre: "fresas" },
  { categoria: "fruta", nombre: "aguacates" },
  { categoria: "verdura", nombre: "calabacines" },
  { categoria: "verdura", nombre: "cebollas" },
  { categoria: "verdura", nombre: "pimientos" },
]

Si quisiéramos agrupar este array de objetos, en la función de agrupación podemos pasar directamente la clave que indica la categoría:

const listaCompra = [
  { categoria: "fruta", nombre: "naranjas" },
  { categoria: "fruta", nombre: "peras" },
  { categoria: "fruta", nombre: "fresas" },
  { categoria: "fruta", nombre: "aguacates" },
  { categoria: "verdura", nombre: "calabacines" },
  { categoria: "verdura", nombre: "cebollas" },
  { categoria: "verdura", nombre: "pimientos" },
]

const listaAgrupada = listaCompra.groupBy((item) => item.categoria)

/* Resultado
{
  fruta: [
    { categoria: "fruta", nombre: "peras" },
    { categoria: "fruta", nombre: "peras" },
    { categoria: "fruta", nombre: "fresas" },
    { categoria: "fruta", nombre: "aguacates" },
  ],
  verdura: [
    { categoria: "verdura", nombre: "calabacines" },
    { categoria: "verdura", nombre: "cebollas" },
    { categoria: "verdura", nombre: "pimientos" }
  ]
}
*/
console.log(listaAgrupada)

¿Mola eh? Esta función va a ser de lo mejor que tendremos en JavaScript. Actualmente esta propuesta está en fase 3, por lo que no tendremos que esperar demasiado tiempo hasta que esté oficialmente disponible. De todos modos, puedes usar el poyfill de la librería core-js si lo quieres poder usar ya.