ECMAScript 2024

New Features in JavaScript 2024

Warning

These features are relatively new.

Older browsers may need an alternative code (Polyfill)

JavaScript Object.groupBy()

Example

// Create an Array

const fruits = [

  {name:"apples", quantity:300},

  {name:"bananas", quantity:500},

  {name:"oranges", quantity:200},

  {name:"kiwi", quantity:150}

];

// Callback function to Group Elements

function myCallback({ quantity }) {

  return quantity > 200 ? "ok" : "low";

}

// Group by Quantity

const result = Object.groupBy(fruits, myCallback);

Description

The Object.groupBy() method groups elements of an object according to string values returned from a callback function.

The Object.groupBy() method return a new object.

The Object.groupBy() method does not change the original object.

JavaScript Map.groupBy()

Example

// Create a Map

const fruits = [

  {name:"apples", quantity:300},

  {name:"bananas", quantity:500},

  {name:"oranges", quantity:200},

  {name:"kiwi", quantity:150}

];

// Callback function to Group Elements

function myCallback({ quantity }) {

  return quantity > 200 ? "ok" : "low";

}

// Group by Quantity

const result = Map.groupBy(fruits, myCallback);

Description

The Map.groupBy() method groups elements of a map according to string values returned from a callback function.

The Map.groupBy() method returns a new map.

The Map.groupBy() method does not change the original object.

Object.groupBy() vs Map.groupBy()

The difference between Object.groupBy() and Map.groupBy() is:

Object.groupBy() groups elements into a JavaScript object.

Map.groupBy() groups elements into a Map object.

JavaScript String isWellFormed()

The isWellFormed() method returns true if a string is well formed.

Otherwise it returns false.

A string is not well formed if it contains lone surrogates.

Examples

let text = "Hello world!";

let result = text.isWellFormed();

JavaScript String toWellFormed()

The String method toWellFormed() returns a new string where all "lone surrogates" are replaced with the Unicode replacement character (U+FFFD). ### Examples ``javascript let text = "Hello World \uD800"; let result = text.toWellFormed(); ` --- ## JavaScript Promise.withResolvers() Promise.withResolvers()` is a static method that simplifies the creation and management of Promises.

Promise.withResolvers() provides a more convenient way to access the resolve and reject functions associated with a Promise outside of its executor function.

Instead of the traditional new Promise((resolve, reject) => { ... }) constructor pattern, Promise.withResolvers() returns an object containing:

• promise: The newly created Promise instance
• resolve: A function to fulfill the promise with a value
• reject: A function to reject the promise with a reason (error)

Example

Waiting...

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

// You can now use 'resolve' and 'reject' anywhere

// in your code to control the state of 'promise'.

// Simulate async work

setTimeout(() => {

  const success = Math.random() > 0.5;

  if (success) {

    resolve("Operation successful!");

  } else {

    reject("Operation failed!");

  }

}, 1000);

// Update the UI when the promise finishes

promise

  .then((message) => {

    document.getElementById("demo").innerHTML = message;

  })

  .catch((error) => {

    document.getElementById("demo").innerHTML = error;
;

  });

Example Explained

• The initially shows "Waiting..."
• After 1 second, the promise resolves or rejects
• The result is written into "demo"