2024: Another incredible year of brand-new JS feature upgrades with ES15.

From sophisticated async features to syntactic array sugar and modern regex, JavaScript coding is now easier and faster than ever.

1. Native array group-by is here

Object.groupBy():

Literally the only thing keeping dinosaur Lodash alive — no more!

I was expecting a new instance method like Array.prototype.groupBy but they made it static for whatever reason.

Then we have Map.groupBy to group with object keys:

Almost no one ever groups arrays this way though, so will probably be far less popular.

2. Resolve promise from outside — modern way

With Promise.withResolvers().

It’s prevalent to resolve promises externally and before we had to do it with a Deferred class:

Or install from NPM — one more dependency!

But now with Promise.withResolvers() from ES15:

See how I use to rapidly promisify an event stream — awaiting an observable:

3. Buffer performance upgrades

Buffers are tiny data stores to store temporary data your app generates.

They make it incredibly easy to transfer and process data across various stages in a pipeline.

Pipelines like:

• File processing: Input file → buffer → process → new buffer → output file
• Video streaming: Network response → buffer → display video frame
• Restaurant queues: Receive customer → queue/buffer → serve customer

With buffers, each stage processes data at different speeds independent of each other.

But what happens when the data moving through the pipeline exceeds the buffer capacity?

Before we’d have to copy all the current data’s buffer to a bigger buffer.

Terrible for performance, especially when there’s gonna be a LOT of data in the pipeline.

ES15 gives us a solution to this problem: Resizable array buffers.

4. Asynchronous upgrades

Atomics.waitAsync(): Another powerful async coding feature in ES2024:

It’s when 2 agents share a buffer…

And agent 1 “sleeps” and waits for agent 2 to complete a task.

When agent 2 is done, it notifies using the shared buffer as a channel.

You’d be absolutely right if you thought this similar to normal async/await.

But the biggest difference: The 2 agents can exist in completely different code contexts — they only need access to the same buffer.

And: multiple agents can access or wait on the shared buffer at different times — and any one of them can notify to “wake up” all the others.

It’s like a P2P network; async/await is like client-server request-response.

5. Regex v flag & set operations

A brand new feature to make regexes much cleaner and more intuitive.

Finding and manipulating complex strings using expressive patterns — with the help of set operations:

To match ever-increasing sets of Unicode characters, like:

• Emojis: 😀, ❤️, 👍, 🎉, etc.
• Accented letters: é, à, ö, ñ, etc.
• Symbols and non-Latin characters: ©, ®, €, £, µ, ¥, etc

So here we use Unicode regex and the v flag to match all Greek letters:

Final thoughts

Overall ES15 is a significant leap for JavaScript with several features essential for modern development.

Helping you to write cleaner code with greater conciseness, expressiveness, and clarity.

Every Crazy Thing JavaScript Does

Just when you thought you knew all the quirks.
Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Get a free copy here today.

Originally published at codingbeautydev.com