JavaScript ES2021 Version (2021)

JavaScript ES2021 (ECMAScript 2021) is the twelfth major release of the JavaScript language specification. It was finalized in June 2021. ES2021 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2021 and how to use them in your JavaScript code.

Features of ES2021

ES2021 introduced several new features and enhancements to JavaScript. Some of the key features of ES2021 are:

1. String.prototype.replaceAll(): ES2021 introduced the String.prototype.replaceAll() method, which allows you to replace all occurrences of a substring within a string with another substring. The replaceAll() method replaces all occurrences of a specified substring with another substring and returns a new string.

   For example:

   String.prototype.replaceAll() Example

    let str = "Hello, World!";
    let newStr = str.replaceAll("o", "0");
    console.log(newStr); // Output: Hell0, W0rld!

2. Logical Assignment Operators: ES2021 introduced the logical assignment operators ||= (logical OR assignment) and &&= (logical AND assignment). These operators allow you to assign a value to a variable only if the variable is null, undefined, false, 0, NaN, or an empty string ("").

   For example:

   Logical Assignment Operators Example

    let x = 10;
    x ||= 20; // Equivalent to: x = x || 20;
    console.log(x); // Output: 10
   
    let y = 0;
    y &&= 5; // Equivalent to: y = y && 5;
    console.log(y); // Output: 0

3. Numeric Separators: ES2021 introduced numeric separators, which allow you to use underscores (_) as separators in numeric literals to make them more readable. Numeric separators are ignored by the JavaScript engine and are used only for formatting purposes.

   For example:

   Numeric Separators Example

    let billion = 1_000_000_000;
    console.log(billion); // Output: 1000000000
    
    let pi = 3.14159_26535;
    console.log(pi); // Output: 3.1415926535

4. WeakRef: ES2021 introduced the WeakRef object, which allows you to create weak references to objects. Weak references do not prevent the garbage collector from collecting the object they reference. The WeakRef object is useful for implementing caches or other data structures that need to hold references to objects without preventing them from being garbage collected.

   For example:

   WeakRef Example

    let obj = { name: "Alice" };
    let weakRef = new WeakRef(obj);
    console.log(weakRef.deref()); // Output: { name: 'Alice' }

5. FinalizationRegistry: ES2021 introduced the FinalizationRegistry object, which allows you to register objects for cleanup when they are garbage collected. The FinalizationRegistry object is used to perform cleanup actions on objects before they are collected by the garbage collector.

   For example:

   FinalizationRegistry Example

    let obj = { name: "Alice" };
    let finalizationRegistry = new FinalizationRegistry((heldValue) => {
        console.log(`Cleaning up: ${heldValue.name}`);
    });
    finalizationRegistry.register(obj, "held value");
    obj = null; // Allow obj to be garbage collected

6. Promise.any(): ES2021 introduced the Promise.any() method, which takes an iterable of Promises and returns a new Promise that resolves as soon as one of the input Promises is fulfilled. If all the input Promises are rejected, the Promise returned by Promise.any() is rejected with an AggregateError that contains an array of rejection reasons.

   For example:

   Promise.any() Example

    const promises = [
        Promise.reject("Error 1"),
        Promise.resolve("Success 1"),
        Promise.reject("Error 2"),
    ];
    
    Promise.any(promises)
        .then((value) => {
            console.log(value); // Output: "Success 1"
        })
        .catch((error) => {
            console.error(error); // Output: AggregateError: All promises were rejected
        });

7. AggregateError: ES2021 introduced the AggregateError object, which is used to represent multiple errors in a single error object. The AggregateError object contains an array of errors as its errors property.

   For example:

   AggregateError Example

    const error1 = new Error("Error 1");
    const error2 = new Error("Error 2");
    const aggregateError = new AggregateError([error1, error2]);
    console.log(aggregateError.errors); // Output: [Error: Error 1, Error: Error 2]

Browser Support for ES2021

Most modern web browsers support ES2021 features, but some older browsers may not fully support all ES2021 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2021 code into ES5 code, which is compatible with older browsers.

ES2021 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. However, it is always a good practice to check the compatibility of the features you are using with the target browsers to ensure a consistent user experience.

For more information on browser support for ES2021 features, you can check the compatibility tables provided by Can I use.

Conclusion

In this tutorial, we learned about the ES2021 version of JavaScript (ECMAScript 2021) and the new features introduced in ES2021. We explored features such as String.prototype.replaceAll(), logical assignment operators, numeric separators, WeakRef, FinalizationRegistry, Promise.any(), and AggregateError. You can start using these features in your JavaScript code to take advantage of the latest enhancements in the language.