The Top 10 Changes in ECMAScript 2024

ECMAScript 2024 is bringing some exciting new features that will significantly impact how we write JavaScript. Here are the 10 most important changes along with code samples and real-world use cases:

1. Top-level await

Top-level await allows async functions directly at the top level of modules without needing to wrap them in an immediately invoked async function expression (IIFE). This makes asynchronous code easier to read and write.

// Before ES2024
(async () => {
  const data = await fetch('/data.json');
  console.log(data);
})();

// ES2024 
async function main() {
  const data = await fetch('/data.json');
  console.log(data);
}

main();

Top-level await will enable simpler asynchronous module syntax and patterns like importing dynamically from another module:

import data from await fetch('/data.json');

2. Class fields and private methods

Class fields and private methods bring clear syntax for defining class properties and methods.

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  #sayName() {
    console.log(this.#name);
  }

  sayName() {
    this.#sayName(); 
  }
}

This simplifies class definitions and avoids the awkward workaround of using symbols for privacy in ES2015/ES6 classes.

3. Static fields

Static fields allow defining constants directly in classes without resorting to outside constants.

class DataStore {
  static readonly instance = new DataStore();

  // ...
}

This is cleaner than defining DataStore.instance outside the class body.

4. Class static blocks

Static blocks provide a way to execute initialization code for classes without needing an immediate function wrapper.

class DataStore {
  static {
    initDB();
  }

  // ...
}

They allow various initialization tasks to be co-located with the class definition for improved readability.

5. Well-formedness in strings

The new isWellFormed() method validates that a string contains a valid sequence of UTF-16 encoded code units.

if (!name.isWellFormed()) {
  throw new Error('Invalid name');
}

This enables better validation of strings as a whole before operating on individual code units.

6. Numeric separators in literals

Numeric literals can now include underscores as separators to improve readability of large numbers.

const phoneNumber = 1_234_567_8910;

This makes giant numbers easier to parse at a glance.

7. BigInt methods

BigInts gain many useful methods like toString(), bitwise operations, and math functions.

const two64 = 2n ** 64n;

This unlocks practical BigInt arithmetic and makes them feel more like a first-class numeric type.

8. WeakRefs

Weak refs allow holding readonly, weakly-referenced values that don't affect garbage collection.

const elem = document.getElementById('foo');
const wr = new WeakRef(elem);

They enable new memory management patterns like caches.

9. Aggregate errors

AggregateError combines multiple errors into one for reporting.

throw new AggregateError([
  new TypeError('Not an object'), 
  new ReferenceError('Unresolved reference')
]);

This simplifies handling of batches of errors compared to thrown exceptions chaining.

10. Array methods

Useful array methods are added like .at(), .findLast(), .toSorted(), .with().

[1,2,3].at(0); // 1
[...arr].toSorted((a, b) => b - a);

These bring array iteration and transformation capabilities closer to functional programming patterns.

In summary, ECMAScript 2024 brings some powerful new features that significantly improve asynchronous programming, classes, memory handling, numeric manipulation and more. Developers can expect nicer syntax and powerful new patterns with this yearly update.