Web Programming TutorialsThe New ECMA 2018 Javascript Features

The New ECMA 2018 Javascript Features

The all-new ES9 (ECMA 2018) is released in June 2018 with an improved feature set in and this write-up will illustrate you with these final feature sets that were finalized at the latest TC39 meeting that have reached the stage-4 since the merger of ES2017 got selected. The TC39 Committee has a 5 stage process in place that starts from stage 0 to up to stage 4, by which it develops a new language feature. Stage-4 is the “Finished”.

This will probably be the seventh edition of ECMA script, ES 2015 is the largest upgraded javascript since its creation but now ES 2018 adds many new more features to javascript that makes it more powerful than ever before.

The new features of ECMA 2018 Javascript include the following:

-Rest/Spread Properties
-Asynchronous iterations
-Promise.prototype.finally
-Template literals

New regular expression features include-
* RegExp named capture groups 
* RegExp Unicode Property Escapes 
* RegExp Lookbehind Assertions 
* .s(dotAll) flag for regular expressions

The Rest Spread Properties:

ECMA Script 2015 introduced the Rest/Spread properties for arrays with the three dots(…) signifies the rest property. Rest parameters convert the last arguments passed to a function into an array. Here we will see this property with an example:

>const prime = [2,3,5,7,11]
<undefined
>const[first,second,...rest] = primes;
<undefined
>console.log(first);
2
<undefined
>console.log(second);
3
.console.log(rest);
>(3) [5,7,11]
The rest function returns the rest of the values as seen in the example i.e. 5,7,11 in the prime numbers.
>const values = [99,100,-1,48,16];
>console.log(Math.max(...values)); //100

The spread operator works in the opposite way and turns an array into separate arguments which can be passed to a function. For example, Math.max() returns the highest value, given any number of arguments. ES2018 expanded this concept of rest or spread properties to the object as well.

Asynchronus Iterations:

Introduced in ES2015 the iterator interface returns an object with {value,done} keys via the next interface. It is possible to use it with iterables that are known as AHEAD OF TIME. The Asynchronous iterations allow you to replicate the same functionality for asynchronous operations and return the promise for {value,done} and we can now use the {await} keyword with (for … of) loops.

We will create our own async iterator here in the following:

async iterator

Just as you can use a generator to create iterator factories we can use an async generator to create async iterator factories. Async generates a mixture of async functions and generators. Let’s say we want to create an iterator that returns a random number but those random numbers came from a web service so the code for this program is shown as above.

Now from this code, it will keep on fetching the random numbers, thankfully we can use the {break} function to stop it.

fetch random numbers//the value is returned

Promise.prototype.finally

The promise.prototype.finally is enabled by default. In the v8 v6.3.165+ and chrome 63 and higher Promise.prototype.finally finalizes the whole promises implementation, allowing you to register a callback to be invoked when a promise is settled (either fulfilled or rejected).

A typical use case is to hide a spinner after a fetch() request: instead of duplicating the logic inside the last .then() and .catch(), one can now place it inside .finally()

A Promise chain can either succeed and reach the final .then() or fail and trigger a .catch() block. In some cases, you want to run the same code regardless of the outcome — for example, to clean up, remove a dialog, close a database connection etc.

The .finally() prototype allows you to specify final logic in one place rather than duplicating it within the last .then() and .catch():

Promise.prototype.finally

Template Literals

Introduced in ES2015 template literals come with some restrictions on escape sequence but now in ES2018 solves all the blockers. Finally, all syntactic restrictions related to escape sequences in template literals have been removed.

The proposed solution is to set the cooked value to undefined for template value that contains the illegal escape sequence and raw value is still accessible via the .raw so embedded dls that contain the undefined cooked values can use the raw string as we can see in the below code.

ES2015 template

Regular Expression Features:

.s(dotAll) flag for regular expression
In regular expression pattern, the dot matches any character but it is getting a little problematic with astral and line terminating character. The need for matching any character without restoring encrypted work is very common.

/ hello.world/s.test(‘hello\nworld’); // true

RegExp named capture groups

Number capture groups refer to a part of the string matched to a regular expression. Until now, it hasn’t been possible to access Unicode character properties natively in regular expressions. ES2018 adds Unicode property escapes in the form \p{…} and \P{…}  in regular expressions that have the Unicode flag set. For example:

Unicode property

Other new features
To top it off a tweak to template literals landed: when using tagged template literals the restriction on escape sequences are removed, thus allowing things like \xerxes. Before this tweak, an error would be thrown because \x is the start of a hex escape with erxes not being a valid hex value.

Tagged template literal

As per MDN: If there is an expression preceding the template literal, the template string is called a “tagged template literal”. In that case, the tag expression (usually a function) gets called with the processed template literal, which you can then manipulate before outputting.

As we can see that ES2018 is the new beginning of a new era of JavaScript we will see annual releases which will push the language forward with leaps and bounds.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -