What’s New in ES2024 (ECMAScript 2024)

The JavaScript landscape continues to evolve, and ES2024 (ECMAScript 2024) brings a fresh batch of features that aim to improve developer experience, boost performance, and provide more expressive power to the language. Let’s dive into the confirmed features for ES2024!

---

1. Set Methods

JavaScript finally brings native set operations to the Set object with these new methods:

• Set.prototype.union(other)
• Set.prototype.intersection(other)
• Set.prototype.difference(other)
• Set.prototype.symmetricDifference(other)
• Set.prototype.isSubsetOf(other)
• Set.prototype.isSupersetOf(other)
• Set.prototype.isDisjointFrom(other)

Example:

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

const union = a.union(b); // Set {1, 2, 3, 4, 5}
const intersection = a.intersection(b); // Set {3}

No more manual loops or utility libraries — clean and readable code with native support!

---

2. Array Grouping (groupBy and groupByToMap)

Group elements of an array into objects or maps using custom logic:

• Array.prototype.groupBy(callback)
• Array.prototype.groupByToMap(callback)

Example:

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

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

3. Promise.withResolvers()

Simplifies the creation of externally controlled Promises:

Example:

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

setTimeout(() => resolve('Done!'), 1000);

promise.then(console.log); // 'Done!' after 1 second

No more manual Promise wrappers — this is great for advanced asynchronous control!

---

4. Symbols as WeakMap and WeakSet Keys

Traditionally, only objects could be used as keys in WeakMap and WeakSet. ES2024 allows symbols as keys, making these structures more flexible.

Example:

const sym = Symbol('my-key');
const weakMap = new WeakMap([[sym, 'value']]); // Valid in ES2024

5. Explicit Resource Management (using / Disposable Resources)

A new using keyword helps manage resources that need cleanup, similar to with statements in other languages.

Example:

using file = await openFile('log.txt');
file.write('Log started...');

Objects need to implement a [Symbol.dispose] or [Symbol.asyncDispose] method to be used with using.

---

Final Thoughts

ES2024 makes JavaScript more powerful and expressive with features that:

• Reduce boilerplate
• Improve performance
• Make asynchronous code more manageable
• Align the language with developer needs

Stay tuned and keep your environment (like Node.js or modern browsers) updated to enjoy the benefits of ES2024!