bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/Debugging, Projects, and Reference
JavaScript•Debugging, Projects, and Reference

ECMAScript 2024

New Features in JavaScript 2024

Feature

Description

Object.groupBy() Groups object elements according to values returned from a callback function Map.groupBy() Groups map elements according to values returned from a callback function

String isWellFormed()

Returns true if a string is well formed String.toWellFormed()

Formula

Returns a new string where "lone surrogates" are replaced with Unicode U + FFFD

Promise.withResolvers()

Atomics waitAsync

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. The elements in the original and in the returned object are the same. Future changes will be reflected in both the original and in the returned 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. The elements in the original and in the returned object are the same. Future changes will be reflected in both the original and in the returned 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();
let text = "Hello World \uD800";
let result = text.isWellFormed();

Lone Surrogates

A lone surrogate is a Unicode surrogate code point that is not part of a valid surrogate pair used to represent characters in UTF-16 encoding.

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 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

<p id="demo">Waiting...</p> <script>

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;
;
});

</script>

Example Explained

Formula

The < p id ="demo"> initially shows "Waiting..."

After 1 second, the promise resolves or rejects The result is written into "demo"

Previous

Project - To-Do List

Next

JavaScript Error Reference