Over the last decade, JavaScript has significantly evolved with brand new feature upgrades introduced each year.

Let's dive into the top 5 standout features introduced in ES9, and discover which ones you might have overlooked.

Async generators were a notable addition from ES9.

Similar to normal generators, this one will output values after completing asynchronous tasks such as a network request or other similar operations.

So, when we use .next(), it will return a Promise:.

This tool is incredibly effective for streaming data in web applications in an organized and clear format—take a look at this function that buffers and streams data for a video-sharing app, much like YouTube:.

To utilize this generator, we will employ for await of for asynchronous iteration:.

I’m curious if the real YouTube JavaScript code utilizes generators in this manner.

You’ve probably encountered the modern spread syntax at some point, without a doubt.

A brilliant method to quickly and unchangeably clone arrays:

Before ES6, this feature was completely absent, but now it’s absolutely everywhere.

Redux is big one:

And beginning with ES9, this feature is also applicable to objects:

Overrides props:

This is particularly beneficial for enhancing default values, which is especially useful when creating a public utility.

Or by personalizing a default theme, similar to what I did with Material UI:.

Using the spread syntax, you can easily exclude certain object properties when making a copy.

That’s the method for immutably deleting properties from an object.

When I use String.raw, I'm essentially saying: Whatever I provide, just return it as is. Don't process anything.

Leave those escape characters alone:

No more escaping backslashes:

Instead of:

We write:

Ideal for creating regexes that involve an excessive number of backslashes:.

Something like this but much worse:

From this✅:

To this✅:

So “raw” as in unprocessed.

That's why we have String.raw() but not String.cooked().

And speaking of regexes ES9 didn’t disappoint.

It arrived packed with cutting-edge regex capabilities designed for sophisticated string search and replace tasks.

This was an added feature designed to ensure that only a specific pattern appears before the keyword you’re searching for:.

• A positive look-behind: Whitelist ?<=pattern.
• Negative look-behind: Blacklist ?<!pattern. Maintain the same style and feel, and leave phrases and HTML tags unchanged.

One of the most precious regex features for intricately transforming strings has consistently been capture groups.

Usually, the groups are identified by their sequential order in the regex: 1, 2, 3, and so on.

However, this made deciphering and modifying those ridiculously lengthy regexes significantly more difficult.

So, ES9 addressed this issue by introducing ?<name> for naming capture groups.

You know that moment when something goes wrong in VS Code, and you can simply Alt + Click to jump straight to the spot where it occurred? 👇.

VS Code utilizes capture groups to enable filenames to be clickable, facilitating swift navigation.

I’d say it’s something like this:

Finally we have Promise.finally 😉.

You know how finally executes some code regardless of any errors?

So, Promise.finally functions the same way, but it's designed for asynchronous tasks.

One major advantage of using Promise.finally() is when you have a long chain of Promises.

It also works well with Promise chains:

Brought forth by ES9.

ES9 represented a major advancement for JavaScript, introducing numerous features that have become vital for contemporary development.

Enabling you to quickly craft code that is cleaner, more concise, expressive, and clear.