In July 2023, ECMAScript released several new specifications for JavaScript. Some of the features include new Array methods that do not modify the existing array. In this blog, we will talk about three of them (one from 2024) that you must know if you want to be up-to-date with the latest trends in Web and JavaScript!

Array.toSorted()

The original Array.sort() sorts elements of an array in-place. Sometimes you might not want this behavior. In programming, it's generally a good practice to avoid modifying existing values and instead return a new version.

Array.toSorted() solves this problem by returning a new array with the sorted elements as described in the callback function!

I am especially fond of this feature as I had already started using it in my code long before VSCode and web browsers had proper support for it!

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

Array.toReversed()

Array.toReversed() is a new addition that provides an immutable way to reverse an array. Unlike Array.reverse(), which modifies the original array, Array.toReversed() returns a reversed copy of the array, leaving the original unchanged.

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() offers a non-destructive way to remove, replace, or add elements within an array. Traditional Array.splice() modifies the array directly, but Array.toSpliced() creates a new array with the changes applied, leaving the original array unchanged. This can be beneficial when you need to apply changes without affecting the source data.

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()

This method was officially released in ES2024, but was still available before with polyfills and had already advanced to a later stage of ECMAScript.

Object.groupBy() groups items of a given array based on a specific object property. This is extremely useful and can come in very handy when you want to group a certain list of objects and then iterate over them accordingly in a key-value structure. An interesting fact about this method is that it was not implemented as a prototype method of an array due to web compatibility issues. (Many older JavaScript libraries were already implementing some code within the Array.prototype.group() namespace, that’s why!)

BONUS: Implementing your own Object.groupBy() to group by multiple elements

Eventually, you may also need to group by multiple properties. The original Object.groupBy() groups at only one level.

Implement the code below in your project to group elements by multiple properties!

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

Example:

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

The End!

If you have made it to the end of this article, Thank you so much for reading! 💝