ES2024 New Features You Should Know

ES2024 (ES15) brings several new features to JavaScript. Let’s explore the most important ones.

Object.groupBy() and Map.groupBy()

javascript

const products = [
  { name: 'Apple', category: 'fruit' },
  { name: 'Carrot', category: 'vegetable' },
  { name: 'Banana', category: 'fruit' }
]

const grouped = Object.groupBy(products, product => product.category)
// { fruit: [{...}, {...}], vegetable: [{...}] }

Promise.withResolvers()

javascript

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

// Use resolve/reject anywhere
setTimeout(() => resolve('Done!'), 1000)

await promise // 'Done!'

Well-Formed Unicode Strings

javascript

const str = 'Hello\uD800World'
const wellFormed = str.toWellFormed()
// 'Hello\uFFFDWorld'

str.isWellFormed() // false
wellFormed.isWellFormed() // true

ArrayBuffer Transfer

javascript

const buffer = new ArrayBuffer(8)
const newBuffer = buffer.transfer(16)
// buffer is now detached
// newBuffer has 16 bytes with original data

Atomics.waitAsync()

For better async coordination in SharedArrayBuffer:

javascript

const result = Atomics.waitAsync(int32Array, 0, 0)
result.value.then(() => console.log('Value changed!'))

Browser Support

All major browsers support these features. For older environments, use polyfills.