Blog

In this article, we will see ES12 Features.

As the JavaScript ecosystem continues to evolve, new versions of the language bring exciting features and enhancements. ES12, also known as ECMAScript 2022, introduces a set of powerful features that empower developers to write cleaner, more efficient, and more expressive JavaScript code.

We’ll dive into the world of ES12 and explore its remarkable features, ranging from pattern matching to promise.any and more. Get ready to unlock the full potential of JavaScript with ES12!

ECMAScript 2021 (12th edition) or ES12 is new version of javascript released on 2021 with improvements and new ES12 features.

ES12 Features

See below for some of the new ES12 features.

1). Numeric Separators

Numeric separators are underscores (_) that help us to separate large numbers.

ES12 Features brings extended numeric separators, allowing developers to use underscores (_) as separators within numeric literals. This feature enhances code readability by enabling developers to group digits and improve visual parsing, especially in large numbers. Numeric separators make it easier to understand and maintain numeric literals, reducing the chance of errors in complex calculations.

let million = 10_00_000;
console.log(million); //output: 1000000

The browser will ignore the underscores. Numeric separators make developers’ lives easier when working with large numbers.

2). String.prototype.replaceAll

ES12 Features introduces the replaceAll method on the String prototype, providing a convenient way to replace all occurrences of a substring within a string. This feature eliminates the need to use regular expressions or multiple calls to replace, making string manipulation more intuitive and efficient. String.replaceAll simplifies common tasks like removing or replacing specific characters or substrings.

replaceAll() method is used to replace all substrings inside string.

Here is an example:

'phptutorialpoints.com'.replaceAll('com', 'in'); // output phptutorialpoints.in

3). Promise.any() and AggregateError

Promise.any() takes whichever promise resolves first. Hence its name – any.

ES12 introduces the Promise.any method, which resolves or rejects as soon as any of the promises in an iterable fulfills. This allows developers to handle scenarios where multiple promises are executed simultaneously, and the first successful result is needed. Promise.any enhances the control flow of asynchronous operations, making it easier to handle race conditions and perform efficient error handling.

try {     const firstPromiseResolved = Promise.any(promisesArray);    // do more work with the first promise resolved catch(e) {    // catch the error }

On the other side, if no promise resolves, Promise.any() throws an AggregateError exception. It also tells the reason for the rejection if all the promises are rejected.

4) Private Class Methods and Accessors

JavaScript has enabled the creation of private methods and properties on ES12 which is not possible on previous ES6.
To create private method, You have to prefix the identifier with a hash (#). See below example:

class Test {
  #getA() {
   return "60";
  }
  isA() {
   return this.#getA();
  }
}
const ta = new Test();
ta.getA(); //output: ta.getToken is not a function
ta.isA(); //output: 60

Similar to this private method,
we can create private accessors (getters and setters) using the same # prefix syntax.

5). WeakRef

WeakRef which stands for Weak references is primarily used to implement caches or mappings for holding large objects. That means it does not prevent the garbage collector from collecting the object.

ES12 introduces the WeakRefs API, which allows developers to create weak references to objects. Weak references do not prevent the garbage collector from collecting objects, enabling more efficient memory management. Additionally, ES12 introduces the FinalizationRegistry, which enables developers to register finalizers that are called when an object is garbage collected. These features enhance memory management and provide greater control over object lifecycle.

The Weak Reference is useful when we do not want to keep the object in the memory forever.

A WeakRef is created using new WeakRef(). Later the reference is read using .deref() method.

6). Logical Assignment Operator

ES12 introduces logical assignment operators (||= and &&=) that combine logical operators with assignment. These operators allow developers to assign a value to a variable only if the variable is currently undefined or null (for ||=) or if it is defined (for &&=). This feature simplifies conditional assignments, reducing the need for additional if statements and improving code conciseness.

With ES12, JavaScript added three kind of logical assignment operator:

1.Logical nullish assignment (??=) -> (x ??= y) (only assigns if x is null or undefined)

2.Logical AND assignment (&&=) -> (x &&=y) (only assigns if x is truthy)

3.Logical OR assignment (||?) -> (x ||=y ) (only assigns if x is falsy)

ES12 brings a wealth of powerful features that enhance the capabilities of JavaScript, empowering developers to write cleaner, more efficient, and more expressive code. From pattern matching and Promise.any to extended numeric separators, logical assignment operators, String.prototype.replaceAll, and WeakRefs with Finalizers, ES12 opens up new possibilities for JavaScript developers.

By embracing the ES12 features, developers can improve code readability, simplify complex logic, handle asynchronous operations more effectively, and enhance memory management. Stay at the forefront of JavaScript development by exploring and leveraging the potential of ES12. Upgrade your coding toolkit with ES12 features and unlock a new level of efficiency and expressiveness in your JavaScript projects.

I hope this article helps you to learn ES12 Features!