Technology

Apptension Blog

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?". 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. 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! 

Read more

Even giants outsource = why you should develop a product externally
What Is a Hybrid App Development?
Kamil Kędzierski
Kamil Kędzierski
Senior Frontend Developer

Table of Contents

Does it sound like we speak the same language?
Get in touch

Tech news #2 ECMAScript 2022

February 21, 2022
3
minutes read
audio description available
TL;DR
0:00
0:00
Tech news #2 ECMAScript 2022
Tech news #2 ECMAScript 2022

Table of Contents

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?". 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. 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! 

Kamil Kędzierski
Kamil Kędzierski
Senior Frontend Developer
Download our free e-book and learn how to create DesignOps MVP for your organization 🚀
This field is required.
Thank you! You should receive the email with the e-book shortly!
Oops! Something went wrong while submitting the form.