Tech news #2 ECMAScript 2022

Today, we will talk about new stuff coming with the ECMAScript2022 update, which should be released in June 2022! Of course, the JavaScript forecast includes lots of things, but in this post, I'll only cover those that are the most interesting ones, in my opinion. To be more precise, I picked 5 most influential features. So, without further ado, let's go! 

1. Top-level await operator

This one is a pretty cool feature! Let me tell you why. Currently, if we want to declare the await keyword outside of the async function, it will result in an error.

In ES2022, it will be finally possible to declare await operators outside of the async functions and classes! However, you must keep in mind that this is only available on the top-level scope! So, if you want to get some async data inside a regular function, you'll still need to use async.

Example:

‍2. at() function

The standard way to get data of an array's specific element is to use square brackets. In ES2022, we'll have an additional way of doing that - the .at() function! You probably ask yourself, "Why do I need a new way for that?".

You may also like: How to manage AWS ECS environment variables with Chamber?

The difference between the "old" way and the .at() function is that the first one is not able to accept the negative index (it'll return undefined), and the new way does provide that possibility. When we provide the negative value to the .at() function, it will start the iteration from the end. See the example below.

Example:

‍3. RegExp match indices

If you're familiar with RegEx, you may know that String.matchAll returns an iterator where you can iterate over all matches - if you were not aware of that, then you already learned a new thing.

These results contain the input string, index of the match, and both full strings of characters + the matching parenthesized substrings. In ES2022, a new field will be returned in the results if we add a fresh new `/d' flag. This field will also show each matched capture group's start and end positions. Let's see this in action as well.

Example:

4. Private class fields

As you may know, to define the properties of a class, we use a constructor. However, currently, we're able to define only public properties. Currently, a naming convention is used for a private class (adding _ before the field name ex. this._value), but it's still the public field and can be accessed from outside the class.

Worth checking: How to combine React Query & Constate? Practical guide

Here comes ES2022, which introduces private fields and an easier way to declare public ones. Let's look below at how it works.

Example:

5. Object.hasOwn() function

In JavaScript, we’ve got a method Object.prototype.hasOwnProperty(), which returns a boolean indicating whether the object has the specified property as its own property.

Unfortunately, this method can be easily overwritten. Here’s where the ES2022 comes in with Object.hasOwn() that solves that issue! See how below. 

Example:

The Bottom Line 

These were the top 5 features of the upcoming ES2022 update that will simplify the lives of numerous developers. I hope you're as excited about the forthcoming release. And for now, let us know what you think about the new features! 

Might be interesting: Constate Library - alternative to global state of the app management

Did you like this article? Then, you absolutely need to check out this one: 'Constate Library: An Alternative to Managing the Global State of Application'