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() | Returns a new string where "lone surrogates" are replaced with Unicode U+FFFD | |
| RegExp /v flag | An "upgrade" to the /u (unicode) flag | |
| 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);
Try it Yourself »
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);
Try it Yourself »
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();
Try it Yourself »
let text = "Hello World \uD800";
let result = text.isWellFormed();
Try it Yourself »
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).
The RegExp /v Flag
The v flag is an "upgrade" to the u flag.
The u (unicode) flag enables full Unicode support in regular expressions.
The v flag enables more Unicode-related features.
The new features are:
- The \p escape sequence matches strings, instead of just characters.
- The character class is upgraded to allow intersection, union, and subtraction syntaxes, as well as matching multiple Unicode characters.
Examples
let text = "Hello 😄";
let pattern = /\p{Emoji}/v;
let result = pattern.test(text);
Try it Yourself »
let text = "Hello 😄";
let pattern = /\p{Emoji}/;
let result = pattern.test(text);
Try it Yourself »
Using both flags (u and v) results in a SyntaxError.
/regexp/v is supported in all modern browsers since September 2023:
| Chrome 112 |
Edge 112 |
Firefox 116 |
Safari 17 |
Opera 98 |
| Apr 2023 | Apr 2023 | Aug 2023 | Sep 2023 | May 2023 |
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>
Try it Yourself »
Example Explained
- The <p id="demo"> initially shows "Waiting..."
- After 1 second, the promise resolves or rejects
- The result is written into "demo"
