DEV Community

Cover image for ECMAScript 2021 (ES12) new features
Naim Latifi
Naim Latifi

Posted on • Updated on

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

Night

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

Night


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.

Night

From the example above for the string This is an 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.

Night

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

Night


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.

Night

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.

Night

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.

Night

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.

Image description

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 #

Night

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.

Night


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.

Night

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!

Night

Discussion (14)

Collapse
gajjardarshithasmukhbhai profile image
gajjar darshit hasmukhbhai

Hi Bro ! Great Article. One Day We will meet and drink coffe together for this amazing article you're published (--;

Collapse
naimlatifi5 profile image
Naim Latifi Author

Hi,

Thanks for your kind words, sure we will do that :)

Collapse
fezi32 profile image
Felix Jordan

Thank you very much for sharing. Very good compromised. I‘m looking forward to use this new stuff 🤩

Collapse
naimlatifi5 profile image
Naim Latifi Author

Thank you for your kind words Felix! Great and happy to hear! :)

Collapse
yashagozwan profile image
Yasha Gozwan Shuhada

Thanks 👍

Collapse
naimlatifi5 profile image
Naim Latifi Author

You are welcome :)

Collapse
aerodarius profile image
Dario Cruz

That's the kind of articles I want to read. Short but full of content.

Collapse
naimlatifi5 profile image
Naim Latifi Author

Great to hear Dario! Enjoy it :)

Collapse
jackydev profile image
JacKyDev

Heyho,

Good content. I just miss the case, Promise.any with a reject and a resolve so that is clearer.

Collapse
naimlatifi5 profile image
Naim Latifi Author

Hi JackyDev,

Thank you! Sure and I will try to explain here. With the reject if none of the promise is resolved then an Aggregate error is returned as in the example that I intentionally rejected C and D to see the error. In the case of resolve, if any of the promise is resolved in the example A resolves faster than B the result is returned and doesn't care about B. Promise.any() works in opposite way with Promise.all() where all promises need to be resolved for a single promise to resolve. Hope this made more clear when working with promise.any :)

Collapse
dinex profile image
Dmitry Makarov

But numeric separators exists since es 2019

Collapse
naimlatifi5 profile image
Naim Latifi Author • Edited on

Thank you Dmitry! I agree but at that time it might have been in stage 3 proposal and not fully supported by all browsers.

Collapse
sibil70 profile image
Alexander

Hi, there! Thank you for sharing!
P.s. you need to check screenshot in "Logical AND assignment operator" part. There is a mistake in console.log

Collapse
naimlatifi5 profile image
Naim Latifi Author • Edited on

Hi Alexander!

Thank you! Great catch and I see that I am printing "user" variable from my previous screenshoot instead of "num1". Will update it, thank you again :)