DEV Community

Cover image for GroupBy no JavaScript: a forma fácil de indexar e organizar dados
Angela Caldas
Angela Caldas

Posted on

GroupBy no JavaScript: a forma fácil de indexar e organizar dados

#javascript #braziliandevs #frontend #programming

Quantas vezes você precisou usar reduce para organizar arrays de objetos? No meu artigo anterior sobre Indexação de dados para aplicações front-end, explorei exatamente isso, mostrando como organizar estruturas complexas usando reduce e até Map.

Mas, convenhamos, reduce tende a deixar o código complexo e difícil de entender...

Quer uma boa notícia? Desde o lançamento do ECMAScript 2024 temos uma forma muito mais simples, expressiva e legível para fazer isso, utilizando os métodos Object.groupBy e Map.groupBy.

Sumário

Por que agrupar dados?
Object.groupBy
Map.groupBy
Conclusão

Group hug!

Por que agrupar dados?

Agrupar dados é uma forma de indexação: você pega uma lista linear e reorganiza tudo usando uma chave. Esse tipo de organização melhora a performance, além de facilitar buscas e o consumo de dados em interfaces dinâmicas.

Antes dessas novas APIs, recorrer ao reduce era quase obrigatório. Funcionava, claro, mas exigia escrever mais código do que o necessário e a legibilidade acabava sofrendo:

// Como fazíamos antes
const produtos = [
  { nome: "iPhone", categoria: "eletrônicos", preco: 5000 },
  { nome: "Notebook", categoria: "eletrônicos", preco: 3000 },
  { nome: "Camiseta", categoria: "roupas", preco: 50 },
  { nome: "Calça", categoria: "roupas", preco: 120 },
];

const agrupados = produtos.reduce((acc, produto) => {
  const categoria = produto.categoria;
  if (!acc[categoria]) acc[categoria] = [];
  acc[categoria].push(produto);
  return acc;
}, {});
Enter fullscreen mode Exit fullscreen mode

Object.groupBy

O Object.groupBy chega para resolver o agrupamento mais simples — aquele em que a chave é uma string. Você passa a lista e uma função que retorna a chave e pronto. O JavaScript devolve um objeto organizado, sem precisar criar inicializações manuais, verificações ou boilerplate.

const produtosPorCategoria = Object.groupBy(
  produtos, // aqui a lista
  (produto) => produto.categoria // e aqui a função
);

console.log(produtosPorCategoria);
console.log(produtosPorCategoria instanceof Object); // true
Enter fullscreen mode Exit fullscreen mode

O resultado é direto, limpo e fácil de interpretar:

{
  eletrônicos: [
    { nome: 'iPhone', categoria: 'eletrônicos', preco: 5000 },
    { nome: 'Notebook', categoria: 'eletrônicos', preco: 3000 }
  ],
  roupas: [
    { nome: 'Camiseta', categoria: 'roupas', preco: 50 },
    { nome: 'Calça', categoria: 'roupas', preco: 120 }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Voltar ao sumário

Map.groupBy

Já Map.groupBy atende aos casos em que a chave não pode ser tratada como texto comum. Quando você precisa agrupar usando:

  • datas,
  • objetos,
  • símbolos,
  • ou qualquer valor que não deve virar string,

é ele que faz a diferença:

const vendas = [
  { valor: 100, data: new Date("2024-01-15") },
  { valor: 200, data: new Date("2024-01-15") },
  { valor: 150, data: new Date("2024-01-16") },
];

const vendasPorData = Map.groupBy(
  vendas, // novamente, a lista
  (venda) => venda.data.toDateString() // e a função
);

console.log(vendasPorData instanceof Map); // true
console.log(vendasPorData);

/*
{ 
  'Sun Jan 14 2024': [ 
    {valor: 100, data: 'Sun Jan 14 2024...'}, 
    {valor: 200, data: 'Sun Jan 14 2024...'}, 
  ], 
  'Mon Jan 15 2024': [ 
    {valor: 150, data: 'Mon Jan 15 2024...'} 
  ] 
}
*/
Enter fullscreen mode Exit fullscreen mode

Acessar ou manipular os grupos fica mais explícito, o que ajuda bastante em projetos maiores:

const vendasDia15 = vendasPorData.get("Tue Jan 15 2024");
console.log(vendasDia15);
Enter fullscreen mode Exit fullscreen mode

A principal vantagem é justamente essa: o Map mantém o tipo original da chave, o que evita conversões automáticas e ambiguidades — algo que pode gerar problemas silenciosos quando usamos objetos normais.

No fim das contas, Map.groupBy acaba sendo a alternativa mais flexível para quem lida com coleções diversas no JavaScript moderno.

Voltar ao sumário

Conclusão

Os novos métodos de agrupamento chegam para simplificar algo que sempre fez parte do nosso cotidiano de desenvolvimento. Em vez de escrever blocos repetitivos com reduce, agora podemos contar com soluções nativas, pensadas exatamente para esse propósito.

Quando combinados com as técnicas que apresentei no artigo anterior, eles deixam o fluxo de indexação mais claro, mais direto e muito mais expressivo.

Se você trabalha com listas, filtros, tabelas ou dashboards, vale experimentar essas APIs, provavelmente elas vão enxugar bastante o seu código.

⚠️ Nota sobre compatibilidade

Se você está se perguntando sobre suporte nos navegadores, boa notícia: segundo os dados do Can I Use, tanto Object.groupBy quanto Map.groupBy são amplamente suportados nos navegadores modernos.
A única exceção relevante é o Internet Explorer, que não oferece suporte a essas APIs — e não receberá.

Ou seja: se o seu público não usa IE, você pode adotar groupBy sem preocupações.

Top comments (0)