The Top 5 JavaScript ES12 Features to Try Right Now

Learn about the fantastic features that the ECMAScript 2021 release has to offer.

The 12th edition of ECMAScript is now available, featuring new features and syntax enhancements. On June 22, 2021, ECMA International published the final specs. These improvements have been implemented to make JavaScript more robust and to help developers accomplish their tasks easily.

Get Alessandro Catania’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I’ll go through the top five features of ECMAScript 2021 in depth so you can start using them in your projects and improve your JavaScript experience. This article can help both new and seasoned developers.

Top 5 JavaScript Features from the ECMAScript 2021 Update

1. Numeric Separators
2. String.prototype.replaceAll
3. Promise. any() and AggregateError
4. Logical Assignment Operator
5. Private Class Methods and Accessors

1. Numeric Separators

The numeric separators allow you to insert underscores between digits in literal numbers, making them easier to understand. When the files are parsed, the underscores will be stripped away automatically. Refer to the following code snippet to understand how you can use numeric separators.

2. String.prototype.replace

The replaceAll()function on the String prototype allows you to replace all instances of a sub-string without using regex. When used on a string, only the first instance of that value is replaced. On the other hand, provides the functionality to replace all instances of that value. Refer to the following code snippet to understand how you can use replaceAll() .

3. AggregateError and Promise.any()

It’s the polar opposite of. If any of the promises are fulfilled, this event will be triggered. On the other hand, the will wait until all promises get resolved. The distinctions between, and are listed below.Promise.anyPromise.all()Promise.any()Promise.all()any()all()allSettled()

• Any() will execute if at least one promise is fulfilled, and will reject if all promises are unfulfilled.
• If all promises are resolved, this will execute, but if at least one is denied, it will reject.
• allSettled() is a function that returns a list of all the values that have been If all promises have been resolved or rejected, this will be executed.

To learn how to utilise the following code snippet, look at the example below.Promise.any().

AnAggregateErrorException will be generated if all of the Promises are refused. To learn how to handle the exception, look at the following code sample.

4. Logical Assignment Operators

In the ECMAScript 2021 release, three new logical assignment operators were included. These give a set of logical operators and assignment expressions in one package.

• Logical OR assignment operator||=
• Logical AND assignment operator&&=
• Nullish coalescing assignment operator??=

4.1. The assignment operator logical OR

If the left operand is false, the logical OR assignment operator ||=accepts two operands and assigns the right operand to the left operand. Learn how to utilise the logical OR assignment operator in the following code sample.

Short-circuiting occurs when the logical OR assignment operator is used. This operator ||= is identical to the logical OR operator in the following expression.

a || (a = b)

4.2. Logical AND assignment operator

If the left operand is true, the logical AND assignment operator &&=only assigns the right operand to the left operand. Learn how to utilise the logical AND assignment operator in the following code sample.

Also short-circuiting is the logical AND assignment operator. This operator &&=is equivalent to the logical AND operator in the following expression.

a && (a = b)

4.3. Nullish coalescing assignment operator

If the left operand is null or undefined, the nullish coalescing assignment operator ??=just assigns the right operand to it. The nullish coalescing assignment operator is demonstrated in the following code snippet.

Also short-circuiting is the nullish coalescing assignment operator??=. This operator is equivalent to the nullish coalescing operator in the following expression.

a ?? (a = b)

5. Private Class Methods and Accessors

By default, the class methods and properties are public, but private methods and properties can be established by prefixing them with a hash. Since the ECMAScript 2021 upgrade, privacy encapsulation has been required. These private methods and properties can only be accessed from inside the class. Refer to the following code snippet to learn how you can use the private methods.

Private Getters and Setters are the private accessors. A Getter is used to retrieve the value of a class property, whereas a Setter is used to set the value of a class property. You can define a private getter by using a hash prefix.#

#newAccountPassword() is a function that returns a new account password.

A hash prefix can also be used to establish a private setter.#

#generateAccountPassword(newPassword) if #generateAccountPassword(newPassword) if #generateAccountPassword(new

To learn how to use the private Getters and Setters, look at the code excerpt below.

Well Done! You’ve learned all of the features available in the JavaScript ES12 (ECMAScript 2021) release. You can now begin incorporating the features listed above into your existing or future projects.

If you liked this post and learned anything new, please give it a thumbs up, share it with your friends, and subscribe to my blog to receive updates on future entries. You can reach out to me on LinkedIn