What's New in JavaScript in 2024

The ECMA262 crew got together and we have the new JavaScript spec coming fresh from the oven.

The 127th meeting of committee members happened on June 26, 2024 and now we have a lot of cool stuff to look at this year! So let’s go through all the main new features!

Synchronous Grouping in Maps and Objects#

Pretty similar to another proposal we talked about here, now we have a new method in Map and Object objects: groupBy. What it does is allow us to group array items according to a function. When used on a map, it gives us a map back, but we can also use it on an object.

1
Map.groupBy([1,2,3,4,5,6], (v) => v % 2 === 0 ? 'par' : 'impar')
2
// Map(2) { 'par' => [2,4,6], 'impar' => [1,3,5] }

The same way on an object:

1
Object.groupBy([1,2,3,4,5,6], (v) => v % 2 === 0 ? 'par' : 'impar')
2
// { par: [ 1, 3, 5 ], impar: [ 2, 4, 6 ] }

Promise.withResolvers#

This is another way we can define a Promise so that we can resolve it outside its scope. The withResolvers method returns an object with the promise constructor, as well as the resolve and reject functions:

1
const { promise, resolve, reject } = Promise.withResolvers()

The promise in question represents some kind of asynchronous work, while the two resolvers are decoupled from the promise itself. This is equivalent to something like:

1
let resolve, reject
2
const p = new Promise((res, rej) => {
3
  resolve = res
4
  reject = rej
5
})

So we can do something like:

1
const { promise, resolve, reject } = Promise.withResolvers()
2
resolve('resolved')
3
const res = await promise // res = 'resolved'

Overall, the use case for this kind of thing is pretty specific. It’s more for when you want total control of the promise, or call the resolve methods from outside the promise, for example in streams or events.

Here we have an interesting explanation of this method with some examples.

The /v Flag in Regex#

The /v flag enables unicode set comparison, for example, emojis that have more than one code-point, which couldn’t be compared like this before:

1
/^\p{Emoji}$/u.test('😵‍💫') // false

This doesn’t happen with this code:

1
/^\p{Emoji}$/u.test('🤯') // true

Because 😵‍💫 has three code-points (since it’s the combination of 😵 and 💫) and 🤯 has only one. But this can be fixed with this code:

1
/^\p{RGI_Emoji}$/v.test('😵‍💫') // true

This link has an extensive list of options and explanations about what’s what in the unicode world.

ArrayBuffers and SharedArrayBuffers Got Updates#

The update is that now both can be resized without needing to be recreated:

1
const buffer = new ArrayBuffer(2, {maxByteLength: 4})
2
const UIArr = new Uint8Array(buffer, 2) // starting at position 2
3
UIArr.length // 0 because we have two empty positions
4

5
buffer.resize(4) // we fill the position
6
UIArr.length // 2

Other Changes#

String got two new methods: isWellFormed and toWellFormed for strings that represent UTF-16 references
Atomics.waitAsync is a new method that allows us to wait asynchronously for a change in memory.