ECMAScript 2021 (ES12) new features

ECMAScript, the standardized version of JavaScript is increasing its popularity and is becoming powerful every day. Since the introduction of ECMAScript 2015 (ES6) which was an immense growth forward, new features are added every year around June. Those features are mostly improvements to the JavaScript language by providing new functions and by expressing things in much simpler way. It also changes the way developers structure the program.

On June 22 The ECMA International approved the latest version of the official specification ES12 aka ECMAScript 2021 by providing capabilities for strings, promises, classes and much more. The following list show those new features of ES12

• Numeric separators
• String replaceAll()
• Logical assignment operator
• Promise.any
• Private class methods
• Private getters and setters
• WeakRef

---

Numeric separators

Numeric separators are used for larger numbers that are hard to read by separating them with (_) between a group of digits. Let see this by an example

As we see from the example above it is hard to read the value if it is a million, ten million, or a billion. With the help of the numeric separators (_), we can divide the same number in group of digits as in example below

---

String replaceAll()

I find this method as my favorit one to use further in my codebase when working with strings and substrings replacements as there is no need on using regular expressions.

From the example above for the string This is interesting book that contains interesting examples we want to replace the word interesting with JavaScript in all substrings. The first method that we usually think of when replacing strings is the replace() method. However, as seen from the example above this method doesn't return the desired result since this method replace only the first occurrence on the substring This is JavaScript book that contains interesting examples but what we want is to have the string as This is JavaScript book that contains JavaScript examples. To achieve the desired result we usually use regular expressions for which they are unsafe to use as they contain escape characters.

Without using regular expression and with the help of ES12 feature replaceAll() we can achieve the same result as below

---

Logical assignment operator

As we already may know JavaScript currently support arithmetic i.e a +=b (equiv. to a = a + b) and bitwise i.e a &=b (equiv. a = a & b) assignment operators but what was missing is the ability to combine logical operator (&& || and ??) with assignment. With ES12 feature there are three such 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)

The logical nullish assignment operator performs the assignment only if the left-hand operand is nullish (undefined or null). From the example below the string Superman is assigned to variable user only if the user is null or undefined and not otherwise. Nullish assignment operator is much simple as we just need to write one line of code compared to the old way as we need to have an if statement and check if the variable user is undefined or null then assign the value to the user.

Logical AND assignment operator performs assignment only if the left-hand operand is truthy. From the example below num2 is assigned to num1 if num1 is truthy and not null,undefined, false, 0, or NaN.

Logical OR assignment operator is opposite of logical AND assignment operator and performs assignment if the left-hand operand is falsy. From the example below num2 is assigned to num1 if num1 is null, undefined, false, or 0.

Promise.any

Promise.any accepts an iterable of promises and resolves as soon as one of the promise is resolved. If none of the promises aren't resolved then an AggregateError error is returned as an array with individual errors for each promise. Promise.any works in the opposite way of Promise.all() where all iterable promises needs to be resolved for a single promise to resolve.

From the example above we have set A and B and C promises where A and B resolve and C rejects and as result A is returned since it is resolved faster than B and C that is rejected whereas in case D and E we set all promises to be rejected and as a result an AggregateError is printed.

---

Private class methods

Since the introduction of ES6 developers can create classes in JavaScript that changed the way when thinking Object-oriented models. These classes by default have public properties and methods that are accessible from outside of the class. To overcome this issue there was a need for a naming convention with an underscore (_) for those properties and methods to be private even though this was just a hint and nothing preventing them from accessing outside of the class. Now with the new class features of ES12 we can define properties or methods as private by setting a #

From the example above when we try to access the method #private() we get an error because this method is private in the class. If we want to access this method outside of the class then we need to create a public method inside a class and call the #private() as seen in method showAll().

---

Private getters and setters

In a similar way as private class method works also private getters and setters in the class.

---

WeakRef

WeakRef that stands for Weak references are primarily used to implement caches or mappings for holding large objects. JavaScript has a garbage collector mechanism that collects and automatically removes variables that are not reachable but this mechanism differs with reference objects which keeps the object in memory and leaves you with less memory. Thus, with use of WeakRef large objects are not kept alive because they appears in a cache or mapping. However you should be careful when using them and possible avoid them as advised from TC39 even though they can be useful in some cases.

From the example above we created an imaginary large object and then created Weak reference by using new instance with new WeakRef. We can access the reference by calling the method deref()

Final thoughts

Whenever I learn and try something new I am always passionate to share my knowledge by helping other people on reaching their goals.I really hope you find this article interesting and helpful on learning ES12 features from it.

Any feedback, suggestions or recommendations are appreciated. This will really help and motivate me for further post sharing

Happy coding!