Descobri um método recem lançado no JavaScript que tem como objetivo agrupar itens de um array de acordo com alguma informação em comum entre eles.
O suporte dos browsers é baseline a partir de março de 2024.
Pra testa-lo vamos fazer uma deduplicação de dados, e definir um Array com alguns itens de id iguais, cada index será um objeto simples:
let itens = [
{ id: 1, name: 'Um' },
{ id: 1, name: 'Um' },
{ id: 2, name: 'Dois' },
{ id: 2, name: 'Dois' },
{ id: 3, name: 'Três' },
{ id: 3, name: 'Três' },
]
Agora, agora com Object.groupBy usando `itens` como argumento:
let deduplicados = Object.groupBy(itens, (x) => x.id)
O primeiro argumento é o array que queremos deduplicar, e o segundo argumento é uma função que retorna qual informação do array queremos usar para usar como valor unico
Resultado da operação acima:
{
"1": [
{
"id": 1,
"name": "Um"
},
{
"id": 1,
"name": "Um"
}
],
"2": [
{
"id": 2,
"name": "Dois"
},
{
"id": 2,
"name": "Dois"
}
],
"3": [
{
"id": 3,
"name": "Três"
},
{
"id": 3,
"name": "Três"
}
]
}
A primeira coisa a notar, é que retornou um objeto em que cada propriedade deste objeto é o valor de uma propriedade id
A segunda coisa a notar, é que ele agrega na mesma propriedade um array com todos os itens duplicados
Map.groupBy vs Object.groupBy
Além do Object.groupBy, que retorna um objeto com métodos de objetos, também é possível usar a mesma funcionalidade com Map.groupBy
O Map.groupBy tem um retorno exatamente igual, porém ele retorna uma estrutura de dados do tipo Map o que trás alguns métodos possívelmente úteis:
Map.clear(), Map.delete(), Map.forEach(), Map.keys(), Map.size() e Map.set() que são os que achei mais interessante para mencionar aqui.
Aplicações interessantes
Alguns exemplos onde o groupBy poderia ser aplicado para agregar itens de um array
- Em uma lista de comentários, vc quer agrupar por uma palavra chave que aparece no conteúdo
- Em uma lista de veículos, você quer agrupar por tipo de transmissão
- Você quer deduplicar itens baseados em uma string
Com Objet.groupBy é possível deduplicar um array com apenas 1 linha, mas mais importante agregar itens de um array com qualquer informação em comum entre eles
Se a função no segundo argumento do groupBy consegue retornar um valor unico entre os itens, ele irá agrupar os itens de acordo com o retorno dessa função.
Performance
Numa breve discussão no Twitter com @ocodista alguém compartilhou este link que compara a performance do Object.groupBy com Array.reduce e for loop para deduplicar uma lista com 10 mil itens com ids aleatórios
A performance do Object.groupBy foi a mais ruim, porém demonstrou deduplicar 10 mil itens mais de 1000 vezes por segundo, o que da pra dar uma ideia de performance do método
Porém, ele perdeu do for loop e para reduce, então se sua aplicação tem alguns itens para deduplicar provavelmente groupBy será uma mão na roda
Mas se tiver uma necessidade de performance e aqui é importante notar a importancia de não otimizar prematuramente seu código, ai sim nestes casos você vai preferir usar um for loop no lugar.
Na imagem, o mais performativo é o for loop em primeiro lugar com 12,224 ops/s, o segundo melhor foi o Array.reduce com 8,204 ops/s, e o terceiro melhor foi o Object.groupBy com 1,100 ops/s
Estes números devem variar de acordo com tipo de computador/celular e navegador.
Conclusão
O maior poder do Object.groupBy não é remover duplicados, mas agrupar itens de uma lista baseado em alguma informação, se a função consegue retornar algo que identifique o conteúdo, o groupBy irá agrupa-los pra você de maneira fenomenal.
Eu achei muito legal este método novo, e com certeza irei usa-lo no meu dia-a-dia, espero que você tenha aproveitado a leitura, compartilhe comigo suas ideias no Twiter e vamos aprender algo novo juntos!