Unlock ES2024: 8 Game-Changing JavaScript Features You Must Try

JavaScript continues to evolve, introducing new features each year to improve developer experience.

1. Promise.withResolvers()

This new feature provides a more elegant way to create and manage a Promise's resolve and reject functions.

<code>// Old way
let resolvePromise, rejectPromise;
const promise = new Promise((resolve, reject) => {
  resolvePromise = resolve;
  rejectPromise = reject;
});

// ES2024 new way
const { promise, resolve, reject } = Promise.withResolvers();

// Usage example
async function executeTask() {
  const { promise, resolve } = Promise.withResolvers();
  startAsyncOperation(resolve);
  return promise;
}
</code>

This is especially useful for scenarios that need to control a Promise's state outside its creation, such as event emitters or complex async flow control.

2. ArrayBuffer.prototype.transfer()

This method allows efficient transfer of an ArrayBuffer's ownership, avoiding memory copying.

<code>const buffer = new ArrayBuffer(1024);
const transferred = buffer.transfer();

console.log(buffer.byteLength); // 0, original buffer cleared
console.log(transferred.byteLength); // 1024

// Useful when sending data between Web Workers
worker.postMessage(buffer.transfer());
</code>

The feature is valuable when handling large binary data, significantly boosting performance.

3. String.prototype.isWellFormed() and toWellFormed()

These methods handle invalid Unicode surrogate pairs in strings.

<code>const string = 'Hello\uD800World'; // contains an isolated high surrogate
console.log(string.isWellFormed()); // false

// Convert to well‑formed string
const wellFormed = string.toWellFormed(); // replaces invalid characters
console.log(wellFormed.isWellFormed()); // true
</code>

They are useful for internationalized applications and any scenario requiring strict Unicode compliance.

4. The v flag for regular expressions

The v flag introduces more consistent escape sequence rules, making regexes more predictable.

<code>// Old syntax may be ambiguous
/\p{ASCII}/u.test('a'); // true
/\p{ASCII}/v.test('a'); // SyntaxError

// New syntax is clearer
/\p{ASCII_Hex_Digit}/v.test('A'); // true
/[\p{ASCII_Hex_Digit}]/v.test('A'); // true
</code>

5. Object.groupBy() and Map.groupBy()

These new methods provide a concise way to group data.

<code>const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];

const grouped = Object.groupBy(items, item => item.type);
console.log(grouped);
// {
//   fruit: [{type:'fruit',name:'apple'},{type:'fruit',name:'banana'}],
//   vegetable: [{type:'vegetable',name:'carrot'}]
// }
</code>

6. Atomics.waitAsync()

This adds asynchronous waiting capabilities to SharedArrayBuffer.

<code>const shared = new SharedArrayBuffer(4);
const int32 = new Int32Array(shared);

async function waitForChange() {
  const result = await Atomics.waitAsync(int32, 0, 0);
  console.log('Value changed:', result.value);
}

// In another context
Atomics.store(int32, 0, 42);
Atomics.notify(int32, 0);
</code>

7. Array extension methods: toSorted(), toReversed(), toSpliced()

These methods provide non‑mutating sorting, reversing, and splicing operations.

<code>const numbers = [3, 1, 4, 1, 5];

const sorted = numbers.toSorted();
console.log(numbers); // [3,1,4,1,5]
console.log(sorted);  // [1,1,3,4,5]

const reversed = numbers.toReversed();
console.log(reversed); // [5,1,4,1,3]

const spliced = numbers.toSpliced(1, 2, 6, 7);
console.log(spliced); // [3,6,7,1,5]
</code>

8. New convenient array methods

Additional useful array operations have been added to the specification.

<code>const array = [1,2,3,4,5];

const lastEven = array.findLast(x => x % 2 === 0); // 4
const lastEvenIndex = array.findLastIndex(x => x % 2 === 0); // 3
const allEqual = [1,1,1].every((x,_,arr) => x === arr[0]); // true
</code>

These features help write clearer and more efficient code; using appropriate polyfills or transpilation tools is recommended when targeting older environments.