Goodbye reduce, hello Object.groupBy()

The first feature is the one that we're personally the most excited about, since we're probably going to be using it a lot. Grouping items in an array based on a certain property or condition is a common task in JavaScript, but strangely enough you'll have to write custom logic using reduce or other array methods to do so.

Well, ES2024 has come to the rescue with a handy new addition: Object.groupBy(). This new method provides a simple and intuitive way to group elements of an array into an object, while using a provided function to determine the grouping criteria.

Let's see it in action. Imagine you have an array of numbers, and you want to group them by whether they're odd or even:

// Traditional approach using reduce
const groupBy = (x, f) => x.reduce((a, b, i) => ((a[f(b, i, x)] || []).push(b), a), {});
const groupedNumbers = groupBy([1, 2, 3, 4, 5, 6, 7, 8, 9], v => (v % 2 ? "odd" : "even"));
// Output: { odd: [1, 3, 5, 7, 9], even: [2, 4, 6, 8] }
// Using Object.groupBy() in ES2024
const groupedNumbers = Object.groupBy([1, 2, 3, 4, 5, 6, 7, 8, 9], v => (v % 2 ? "odd" : "even"));
// Output: { odd: [1, 3, 5, 7, 9], even: [2, 4, 6, 8] }

As you can see, Object.groupBy() streamlines the grouping process, making your code more concise and readable. If you prefer to use a Map instead of an Object, you could use the new Map.groupBy() function. These two new methods are particularly interesting if you're interested in functional programming.

No more empty Promises (thanks to resolvers)

While we don't see them as often anymore, Promises are a cornerstone of modern JavaScript, especially when dealing with asynchronous operations. They come in handy when you're not sure yet what might happen in the future, like fetching data from an API or waiting for a user interaction.

However, creating and managing Promises can sometimes feel a bit clunky. The traditional approach often involves a complicated callback, but ES2024 introduces Promise.withResolvers(), a new static method that offers a cleaner and more structured way to work with Promises.  

This function returns an object containing both the Promise itself and its resolve and reject functions, which allows you to separate the creation of a Promise from its resolution logic. Check out this blog for a practical example.

This approach brings several benefits. Separating the Promise creation from its resolution makes your code more structured, and your asynchronous operations more dynamic and modular. By avoiding dense callbacks, you'll also make your code much easier to read and maintain.

Unicode is no longer a regex nightmare

Regular expressions are already complex on their own. When you throw in ‘special’ Unicode characters into the mix – think emojis, accents and other diacritics, and characters from other alphabets – into the mix, things can get messy real fast.

ES2024 introduces the /v flag, which can make your life easier with a more intuitive syntax for matching characters based on their Unicode properties. Instead of wrangling with obscure escape sequences, you can target characters by their script, block, or general category - making your regex patterns cleaner and more readable.

This one is certainly a more niche feature. We tend to avoid ‘regular’ regular expressions in our projects, let alone those with special Unicode characters, but it's good to know that the possibility exists for when you do need it.

ArrayBuffers and SharedArrayBuffers for low-level enthusiasts

Sometimes, you need to squeeze every ounce of performance out of your JavaScript code. When standard arrays just aren't cutting it, ES2024 offers a powerful alternative: ArrayBuffers and SharedArrayBuffers.

These low-level data structures give you direct access to raw binary data, allowing for more efficient memory management and faster processing in performance-critical scenarios like game development, WebAssembly, and computationally intensive applications.

ArrayBuffers are great when you need to work with data at a byte level. Examples include image and audio processing (manipulating pixel data or audio samples), binary data streams in network communications, and working with compressed or encrypted data.

SharedArrayBuffers take things a step further, allowing multiple web workers to access and modify the same underlying memory. This opens up possibilities for parallel processing and high-performance computing directly in the browser.

Small changes, big potential

ES2024 might not be making the same kind of waves as some of the earlier releases, but it's still packed with plenty of interesting features. Most of them will only be useful in specific scenarios, but these range from handling raw binary data to inserting emojis, which shows just how widespread the usefulness of JavaScript is.

Besides, there are always plenty of other promising features that are still making their way through the approval pipeline. We'll share an overview of our favourites soon, so keep an eye on our site!