Em julho de 2023, ECMAScript lançou várias novas especificações para JavaScript. Alguns dos recursos incluem novos métodos Array que não modificam o array existente. Neste blog falaremos sobre três deles (um de 2024) que você deve saber se quiser estar atualizado com as últimas tendências em Web e JavaScript !

Array.toSorted()

O Array.sort() original classifica os elementos de um array no local. Às vezes você pode não querer esse comportamento. Na programação, geralmente é uma boa prática evitar a modificação de valores existentes e, em vez disso, retornar uma nova versão.

Array.toSorted() resolve esse problema retornando um novo array com os elementos classificados conforme descrito na função de retorno de chamada!

Gosto especialmente desse recurso porque já havia começado a usá-lo em meu código muito antes do VSCode e dos navegadores da web terem suporte adequado para ele!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() é uma nova adição que fornece uma maneira imutável de reverter um array. Ao contrário de Array.reverse(), que modifica o array original, Array.toReversed() retorna uma cópia invertida do array, deixando o original inalterado.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() oferece uma maneira não destrutiva de remover, substituir ou adicionar elementos em um array. Array.splice() tradicional modifica o array diretamente, mas Array.toSpliced() cria um novo array com as alterações aplicadas, deixando o array original inalterado. Isso pode ser benéfico quando você precisa aplicar alterações sem afetar os dados de origem.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Object.groupBy()

Este método foi lançado oficialmente no ES2024, mas ainda estava disponível antes com polyfills e já havia avançado para um estágio posterior do ECMAScript.

Object.groupBy() agrupa itens de um determinado array com base em uma propriedade específica do objeto. Isso é extremamente útil e pode ser muito útil quando você deseja agrupar uma determinada lista de objetos e, em seguida, iterar sobre eles de acordo em uma estrutura de valor-chave. Um fato interessante sobre esse método é que ele não foi implementado como método protótipo de um array devido a problemas de compatibilidade web. (Muitas bibliotecas JavaScript mais antigas já estavam implementando algum código dentro do namespace Array.prototype.group(), é por isso!)

BÔNUS: Implementando seu próprio Object.groupBy() para agrupar por vários elementos

Eventualmente, você também pode precisar agrupar por várias propriedades. O Object.groupBy() original agrupa em apenas um nível.

Implemente o código abaixo em seu projeto para agrupar elementos por múltiplas propriedades!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

Exemplo:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

O fim!

Se você chegou ao final deste artigo, muito obrigado pela leitura! ?