En julio de 2023, ECMAScript lanzó varias especificaciones nuevas para JavaScript. Algunas de las características incluyen nuevos métodos de matriz que no modifican la matriz existente. En este blog hablaremos de tres de ellos (uno de 2024) que debes conocer si quieres estar al día de las últimas tendencias en Web y JavaScript !

matriz.toSorted()

El Array.sort() original ordena elementos de una matriz in situ. A veces es posible que no desees este comportamiento. En programación, generalmente es una buena práctica evitar modificar los valores existentes y, en su lugar, devolver una nueva versión.

Array.toSorted() resuelve este problema devolviendo una nueva matriz con los elementos ordenados como se describe en la función de devolución de llamada.

Me gusta especialmente esta característica porque ya había comenzado a usarla en mi código mucho antes de que VSCode y los navegadores web tuvieran soporte adecuado para ella.

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

Array.toReversed()

Array.toReversed() es una nueva incorporación que proporciona una forma inmutable de invertir una matriz. A diferencia de Array.reverse(), que modifica la matriz original, Array.toReversed() devuelve una copia invertida de la matriz, dejando el original sin cambios.

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() ofrece una forma no destructiva de eliminar, reemplazar o agregar elementos dentro de una matriz. El Array.splice() tradicional modifica la matriz directamente, pero Array.toSpliced() crea una nueva matriz con los cambios aplicados, dejando la matriz original sin cambios. Esto puede resultar beneficioso cuando necesita aplicar cambios sin afectar los datos de origen.

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]

Objeto.groupBy()

Este método se lanzó oficialmente en ES2024, pero todavía estaba disponible antes con polyfills y ya había avanzado a una etapa posterior de ECMAScript.

Object.groupBy() agrupa elementos de una matriz determinada en función de una propiedad de objeto específica. Esto es extremadamente útil y puede resultar muy útil cuando desea agrupar una determinada lista de objetos y luego iterar sobre ellos en consecuencia en una estructura clave-valor. Un hecho interesante acerca de este método es que no se implementó como método prototipo de una matriz debido a problemas de compatibilidad web. (Muchas bibliotecas de JavaScript más antiguas ya estaban implementando algún código dentro del espacio de nombres Array.prototype.group(), ¡por eso!)

BONIFICACIÓN: Implementar su propio Object.groupBy() para agrupar por múltiples elementos

Con el tiempo, es posible que también necesites agrupar por varias propiedades. El Object.groupBy() original se agrupa en un solo nivel.

¡Implemente el siguiente código en su proyecto para agrupar elementos por múltiples propiedades!

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;
}

Ejemplo:

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' }]
    }
  }
}

¡El fin!

Si has llegado al final de este artículo, ¡muchas gracias por leer! ?