Introduction to ECMAScript 2024

Every year, the ECMAScript specification 📜 undergoes updates, and this year we are eagerly anticipating ECMAScript 2024 🚀, set to be officially launched in June 2024. The candidate version has already been released, showcasing a variety of practical features 🛠️. Let’s delve into what’s new! 👀

Promise.withResolvers

The Promise.withResolvers() feature allows the creation of a new Promise 🤝 while also providing access to both the resolve ✅ and reject ❌ functions. This is particularly useful when you need to interact with these functions after the Promise has been created.

Here’s a simplified version of how it works:

let resolve, reject;

const promise = new Promise((res, rej) => {

resolve = res;

reject = rej;

});

Normally, you would create a Promise using an executor function 🛠️, which gives you access to resolve and reject. However, with Promise.withResolvers(), you can keep using these functions within the same scope, enabling advanced scenarios like reusing them across events, which is especially handy for streams and queues 🌊.

Here's a usage example:

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

setTimeout(() => resolve('Success!'), 1000);

promise.then(value => {

console.log(value); // Outputs: Success!

});

Object.groupBy / Map.groupBy

The Object.groupBy and Map.groupBy methods streamline the process of grouping arrays 📊. For instance, if you have an array of people and want to group them by age, traditionally, you might use a forEach loop, which can become cumbersome:

const people = [

{ name: "Alice", age: 28 },

{ name: "Bob", age: 30 },

{ name: "Eve", age: 28 },

];

const peopleByAge = {};

people.forEach(person => {

const age = person.age;

if (!peopleByAge[age]) {

peopleByAge[age] = [];

}

peopleByAge[age].push(person);

});

console.log(peopleByAge);

This would output:

{

"28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}],

"30": [{"name":"Bob","age":30}]

}

Using Object.groupBy, this can be simplified to:

const peopleByAge = Object.groupBy(people, (person) => person.age);

Keep in mind that the resulting object from Object.groupBy will not have methods like hasOwnProperty, which could lead to errors if you attempt to access them.

ArrayBuffer.prototype.resize and transfer

The resize() method allows you to adjust the size of an ArrayBuffer 🧩, provided it’s resizable and the new size doesn’t exceed the maximum limit:

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });

if (buffer.resizable) {

buffer.resize(12);

}

An error will occur if you attempt to resize a detached or non-resizable buffer. On the other hand, the transfer() method copies the contents into a new ArrayBuffer while detaching the original:

const buffer2 = buffer.transfer();

String.prototype.isWellFormed and toWellFormed

The isWellFormed() method checks whether a string is correctly encoded in UTF-16 without isolated surrogate characters. If any such characters are found, the toWellFormed() method can convert them into a safe format:

const cleanedString = illFormed.toWellFormed();

Atomics.waitAsync

This new asynchronous method allows code to wait for changes in shared memory without blocking the main thread:

const result = Atomics.waitAsync(int32, 0, 0, 1000);

Regular Expression v Flag

The new v flag enhances regular expressions by allowing Unicode property escapes, facilitating better pattern matching for complex character sets.

The video titled "Duolingo New Tasks 2024 - How They Look Like and Feel Like?" provides further insights into these features and their implications for JavaScript development.

Conclusion

In summary, these newly introduced features in ECMAScript 2024 are a preview of what’s to come and may undergo changes before the official release. Stay updated on these enhancements as we prepare for the arrival of ECMAScript 2024! 🚀

Thank you for being part of the In Plain English community! Don’t forget to connect with us on various platforms for more updates.