No items found.

In short

The article explores new ECMAScript proposals beyond ES6, focusing on Babel presets for stages 0 to 3. It introduces features like the async/await syntax, object rest/spread, class properties, and the bind operator. The tutorial emphasizes the benefits of using Babel's transpiler to access these features and highlights the potential of upcoming proposals like async iteration, contributing to JavaScript's evolving capabilities.

From ES6 to ES-next

I’m writing this post with a lot of excitement. I’ve decided to play around with new ECMAScript proposals since ES6 has already been out there for quite a long time and ES7 comes with just two new features (which are the exponentiation operator (**) and the Array.prototype.includes() function).

The above (especially ES6) gave us huge improvements in code readability. Personally, I love syntax sugar, so things that are coming to JavaScript with ES8+ make me really happy.

Unveiling ES-next Features with Presets

Thanks to Babel’s stage-0 preset we can already use things that will be included in ES8 or later specifications, or even those that are at just proposals. Babel offers us quite a few presets — depending of how far we want to go in ES-next — and we can choose the preset that we feel like trying out. Here’s the list of currently available presets:

  • stage-0 — Strawman: just an idea, possible Babel plugin.
  • stage-1 — Proposal: this is worth working on.
  • stage-2 — Draft: initial spec.
  • stage-3 — Candidate: complete spec and initial browser implementations.
  • stage-4 — Finished: will be added to the next yearly release.

I’ll present some features from each preset — to hopefully get you to use this amazing transpiler and boost your code with some syntax improvements.

Diving into stage-3: The async-await marvel

I’ll start with my favorite feature of the stage-3 preset which is the transform-async-to-generator plugin. It adds two new keywords to our code, namely async and await. I’m using them constantly in my backend applications.

Here is the basic syntax:

It works just like generators — the await keyword makes our application wait until our promise is resolved. It’s very useful for API or DB calls. Here’s a small real-life example:

And that’s all — the result of our promise is assigned to ‘user’. The power of this transform is that it doesn’t use regenerator or any other runtime but desugars to native generators that are already supported on Node 6.x and other environments. You can get rid of a pyramid of callbacks in .then() functions, and make your code clean and readable.

Revolutionizing objects with stage-2: The object rest-spread plugin

Our next preset is stage-2 — it comes with one plugin only, but trust me — it’s a good one. Plugin transform-object-rest-spread is a game-changer. Using it, you can rest and spread object properties and reduce the amount of code you have to write in this specific use case. Here’s an example:

Amazing, isn’t it? If you haven’t been using it yet — now it’s about time you start. The deeper we go into the new ECMAScript proposals, the more amazing features we can use.

Stage-1 wonders: A glimpse at transform-class-properties

Proposal preset stage-1 used to give us the transform-decorators plugin — but since there is a pending proposal update — it has been temporarily disabled. But worry not — we will look at another amazing feature, the transform-class-properties plugin. It’s very useful with react (DOM or native) — technologies. Now you can use the following syntax to bind a property to a class:

You can use it to define state or check propTypes in react classes as follows:

Stage-0 marvels: Simplifying code with the bind operator

Last but not least, the stage-0 preset comes with my favourite ES-nextproposal — the bind operator (::). If you are tired of using .call() .bind()and .apply() functions, this syntax is just for you. Babel gives us an example below:

But i think you’ll see it all better in this example. Here is the code written in ES5:

And how we can make it simpler using the new syntax. Take a look:

Basically, those are the most important ES-next tools you can use at the moment. But I’m also curious about what’s coming to JavaScript in the next few years. One of the most interesting proposals is async iteration. AsyncIterator interface should be the same as the Iterator interface, except for the fact that each iteration method would return a promise. You could iterate like this:

This iterator comes with a variation of the for-of iteration statement, so you can iterate through your promises with syntax like this:

Peeking into the future

As you can see, all of these features give JavaScript a bright future, and can make the language even more powerful than it is now. You should of course visit Babel.js docs and customize your presets to match your needs and desires. There are still many more things to come. There are many GitHub repositories with new proposals that you can rate and contribute to. Any contribution, of course, will be of great value to the community.


No items found.
React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.