The Latest JavaScript Features Released in 2024

JavaScript continues to evolve, and 2024 has introduced exciting new features with the release of ECMAScript 2024 (ES15). These updates enhance developer efficiency, improve readability, and introduce powerful new capabilities. Let’s explore the key features of this release.

1. Object.groupBy and Map.groupBy #

The Object.groupBy and Map.groupBy static methods provide a convenient way to group elements of an iterable based on a specified criterion, simplifying data manipulation.

Example using Object.groupBy: #

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

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

2. Promise.withResolvers #

The Promise.withResolvers method simplifies promise creation by returning an object containing the promise and its resolve/reject functions, reducing boilerplate code.

Example: #

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

promise.then(value => {
  console.log('Resolved with:', value);
}).catch(error => {
  console.error('Rejected with:', error);
});

// To resolve the promise
resolve('Success');

3. Enhanced Set Methods #

New methods have been added to the Set prototype, making set operations more intuitive:

• Set.prototype.intersection: Returns a new set containing elements present in both sets.
• Set.prototype.union: Combines elements from multiple sets.
• Set.prototype.difference: Returns elements present in one set but not another.
• Set.prototype.symmetricDifference: Returns elements present in either set but not both.

Example of intersection: #

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

const intersection = setA.intersection(setB);
console.log(intersection); // Output: Set { 2, 3 }

4. Regular Expressions /v Flag #

The new /v flag enhances Unicode support, enabling better pattern matching.

Example: #

const regex = /\p{Letter}/v;
console.log(regex.test('A')); // Output: true
console.log(regex.test('1')); // Output: false

5. Top-Level await #

Developers can now use await at the top level of modules, eliminating the need to wrap asynchronous code inside functions.

Example: #

// module.mjs
const data = await fetchData();
console.log(data);

6. Decorators #

Decorators provide a declarative syntax for modifying classes and class members, improving readability and maintainability.

Example: #

function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Example {
  @readonly
  name() {
    return 'example';
  }
}

const ex = new Example();
console.log(ex.name()); // Output: 'example'
ex.name = function() { return 'modified'; }; // Error: Cannot assign to read-only property 'name'

These features demonstrate JavaScript’s ongoing commitment to enhancing developer experience and keeping the language modern and efficient. With ES15, developers can write cleaner, more expressive, and more efficient code.