8 min read JavaScript

ES2024 Features You Need to Know

Discover the most important JavaScript features arriving in 2024, from Records and Tuples to improvements in async handling and better error messages.

JavaScript ES2024 Features

## Why ES2024 Matters

JavaScript continues to evolve rapidly. The new features in 2024 bring productivity improvements and cleaner code. Let's explore what you need to know.

## Records and Tuples (Stage 3)

Records provide immutable object literals, while Tuples are fixed-length arrays:

javascript

// Records - immutable objects
const person = #{
  name: "Alice",
  age: 30,
  role: "Developer"
}

// Tuples - fixed-length arrays
const coordinates: [number, number] = #[10, 20]

// These are deeply immutable
const updated = person with { age: 31 }
console.log(person.age) // Still 30

## Improved Error Messages

Better error stack traces and error causes help with debugging:

javascript

try {
  await fetchData()
} catch (error) {
  throw new Error('Failed to fetch user data', {
    cause: error
  })
}

// Error chain shows the full context

## Promise.withResolvers()

Simplify promise creation with the new helper:

javascript

// Old way - complex and error-prone
let resolve, reject
const promise = new Promise((res, rej) => {
  resolve = res
  reject = rej
})

// New way - clean and simple
const { promise, resolve, reject } = Promise.withResolvers()

resolve("Success!")

## Array Grouping

Group array elements without complex reduce logic:

javascript

const items = [
  { category: 'fruit', name: 'apple' },
  { category: 'vegetable', name: 'carrot' },
  { category: 'fruit', name: 'banana' }
]

const grouped = Object.groupBy(items, item => item.category)
// {
//   fruit: [{ name: 'apple' }, { name: 'banana' }],
//   vegetable: [{ name: 'carrot' }]
// }

## Real-World Example: Data Processing

javascript

async function processUserData(userIds) {
  const { promise, resolve, reject } = Promise.withResolvers()

  try {
    const users = await Promise.all(
      userIds.map(id => fetchUser(id))
    )

    const grouped = Object.groupBy(users, user => user.status)

    resolve(grouped)
  } catch (error) {
    reject(new Error('User processing failed', { cause: error }))
  }

  return promise
}

## Conclusion

ES2024 brings practical improvements that make JavaScript cleaner and safer. Adopt these features in your projects to write more maintainable code.

// Thanks for reading!