🔥10 New Features of ECMAScript 2024

Hello everyone! Almost 10 years have passed since the release of one of the main ES6 standards and almost 30 years have passed since the release of JavaScript!! In this article, I would like to write about the new features in JavaScript that you will have to face at work, at school, or just programming for yourself.

It's amazing, but what we are used to when programming in other languages, or when working with libraries and frameworks, is gradually becoming standard. Moreover, the most cool thing is that it does not seem to be quite noticeable. If you remember what kind of hype was when fetch or let was introduced, const in the ECMAScript standard and what happened in the new standard, although it can also "compete" in terms of the importance of changes.

Here is a short list of what was introduced in the ecmascript 2024 version:

1. Promise.withResolvers

Simplifies promise creation by providing the promise object along with its resolve and reject methods.

Example:

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

setTimeout(() => resolve("Resolved!"), 1000);
promise.then(console.log); // Output: "Resolved!" after 1 second

This will allow you to reduce the code that is generated when working with the server and not only, because usually you need to chain promises and this will allow you to get away from functions as much as possible, because if you remember the problem with callback hell, the code will be just awful.

2. String.isWellFormed and String.toWellFormed

These methods handle UTF-16 encoding issues, ensuring well-formed strings.

Example:

console.log(String.isWellFormed("Hello")); // true
console.log(String.isWellFormed("\uD800")); // false

console.log(String.toWellFormed("\uD800")); // "\uFFFD" (corrected surrogate pair)

Once in a hundred years it might come in handy

3. Unicode Sets /v Regex Flag

Introduces advanced Unicode handling for regular expressions.

Example:

const regex = /\p{Script=Greek}/v;
console.log(regex.test("α")); // true
console.log(regex.test("a")); // false

When regex capabilities are expanded, it is always good, because manually parsing a string can be inconvenient.

4. Decorators

Now comes the most interesting part. Let's remember how many years we have been working with decorators in Angular, Nest.js, Mobx with validators, and even if we take Laravel for PHP, this idea as a basis goes through all these and other popular modules. So, it happened, 2024 and now JavaScript OFFICIALLY has decorators!

This is really cool, because now in the browser, without connecting any libraries or polyfills, you can use this ubiquitous functionality. By the way, it was the same when entering classes "instead" of the constructor function.

The decorators themselves enable modification of class behavior and properties.

Example:

function log(target, key, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`Calling ${key} with args: ${args}`);
        return original.apply(this, args);
    };
}

class Example {
    @log
    greet(name) {
        return `Hello, ${name}!`;
    }
}

const ex = new Example();
console.log(ex.greet("Alice"));
// Logs: Calling greet with args: Alice
// Output: Hello, Alice!

5. Atomics.waitAsync

Allows non-blocking waiting for changes in shared memory.

Example:

const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

Atomics.store(view, 0, 0);

Atomics.waitAsync(view, 0, 0).value.then(() => {
    console.log("Value has changed!");
});

setTimeout(() => {
    Atomics.store(view, 0, 1);
    Atomics.notify(view, 0);
}, 1000);

6. Grouping with Map.groupBy and Object.groupBy

Effortlessly group array elements into Map or plain objects.

Example:

const items = ["apple", "banana", "cherry", "avocado"];

const grouped = Array.groupBy(items, item => item[0]);
console.log(grouped);
// { a: ["apple", "avocado"], b: ["banana"], c: ["cherry"] }

This is also an interesting method, since Map and Set seem to lack the same flexibility as an array.

7. Resizable ArrayBuffer

Adds the ability to resize ArrayBuffer after creation.

Example:

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
console.log(buffer.byteLength); // 8

buffer.resize(12);
console.log(buffer.byteLength); // 12

8. WeakRefs and FinalizationRegistry

Improve memory management by tracking object finalization.

Example:

let obj = {};
const weakRef = new WeakRef(obj);
const registry = new FinalizationRegistry(value => console.log(`${value} was collected`));

registry.register(obj, "Object1");
obj = null; // Dereference

setTimeout(() => console.log(weakRef.deref()), 1000); // undefined if garbage collected

9. Private Methods and Accessors

Enhance class encapsulation with private methods and getters/setters.

Example:

class Person {
    #name;

    constructor(name) {
        this.#name = name;
    }

    #greet() {
        return `Hello, ${this.#name}!`;
    }

    get greeting() {
        return this.#greet();
    }
}

const person = new Person("Alice");
console.log(person.greeting); // "Hello, Alice!"

Now the era of _privateMethod will definitely be behind us.

10. Temporal API

A modern API for working with dates and times, replacing the outdated Date API.

Example:

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // e.g., "2024-11-19T14:23:00"

const birthDate = Temporal.PlainDate.from("1990-01-01");
const age = now.since(birthDate).years;
console.log(age); // e.g., 34

Another API that will allow you to work with dates without additional libraries - this is only respect.

In conclusion, I would like to say

Every year, the functionality we are used to gradually becomes the standard in vanilla JavaScript. The example of decorators and classes shows that web programming, like ES6, is gradually changing. Today, if you write old code, you are more likely to be fired quickly after the first review than to be sorted out, so it is so important today to know the innovations and create cool sites!

Thank you all for reading the article!

By the way, I am currently working on the HMPL project. You can check it out at the link below :)

HMPL Repo