JavaScript: What’s new in ECMAScript 2018 (ES2018)?

👋 This post also got published on Medium. If you like it, please give it some love a clap over there.

At the latest TC39 meeting the new features that will make it into the “ECMAScript® 2018 Language Specification” (ES2018) have been selected. All proposals that have reached stage-4 since the consolidation of ES2017 got selected. This post gives one a quick look at the features that made it into ES2018.

💁‍♂️ Stage-4?

The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-4 is the Finished Stage and indicates that the proposal is ready to become part of the ECMAScript Specification.

~

Rest/Spread Properties

When destructuring, Rest/Spread Properties allow you to collect the remaining properties of an object into a new object. Think of it as a magic magnet attracting all leftovers.

I use this one myself a lot, especially in a React (Native) context where I pluck certain values from this.props for internal use, and then forward all other props to the returned child component.

Additionally, if you turn your thinking-logic around a bit, Rest/Spread Properties provide you with a good way to remove a property from an object in an immutable way.

~

Asynchronous Iteration

With Asynchronous Iteration we get asynchronous iterators and asynchronous iterables. Asynchronous iterators just like regular iterators, except their next() method returns a promise for a { value, done } pair. To consume asynchronous iterables, we can now use the await keyword with for … of loops.

~

Promise.prototype.finally()

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()

~

RegExp related features

In total 4 RegExp related proposals made it into ES2018:

I especially digg the “RegExp named capture groups” feature, as it improves readability:

More info on these features can be found at Mathias Bynens – one of the driving forces behind these proposals – his blog: ECMAScript regular expressions are getting better!

~

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.

~

What now?

Do note that not all these features are readily available in all browsers. Meaning that they’re Stage-4 means that they are finished, and that browser vendors should implement them (some already have, others are in the process).

As for the future, I’m already looking forward at what’s next to come for JavaScript. Things like the Optional Chaining Operator already get me very excited 🙂

💻 The examples embedded in this post are part of a talk on ESNext named “What’s next
 for JavaScript?”, which I recently gave at a Fronteers België meetup. I’m currently still in the process of preparing the slides for publication. I’m available for bringing this talk at your meetup/conference.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

7 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.