ES6 Features That Can’t Be Ignored (final part)

Hi folks,
Second and last part of the ES6 tuts.
Here we will have a look at the Generators, the new Promise object, how to destructure to realise fancy assignments, how the anonymous functions evolved and finally a sneak peek into the Symbols. Let’s get our hands dirty!

Generators

One of the coolest features that ES6 brings is the Generator. Now you can say **** you to the asynchronous aspect of JavaScript.

By creating a Generator function using the ‘*’ character, you can pause the execution of a method at a ‘yield‘ keyword. To resume the execution of the method, you need to grab the returned generator and call the method named next.

Here is an example where I yield the method at an asynchronous action then unpause it once I got the awaited result:

Promises

No need to use $q or whatever 3rd party library anymore. Now you can just use a Pure JavaScript Promise like this:

Destructuring

Destructuring is quite a touchy part of ES6 because it can make or break a developer. The major change of philosophy here is to accept that there might be some holes in the signatures, we generally try to fill those holes using null or undefined, so here the greatest challenge is to lose this “perfectionism“.
Here are some examples with an incremental difficulty:

You can also couple it with the shorthand examples from the previous post.

Anonymous functions

A very quick one here, if you are just like me and don’t like the syntax for anonymous functions, you can replace it by simply using {} instead of (function () {})();

Just like this:

Symbols

Another controversial feature here: the Symbols.
Just like many people, I think that there is something missing in this feature.
This feature was stolen created in order to prevent name clashing when manipulating objects.

An example of name clashing looks like this.
Someone access the object foo and use the key bar. Just after that you do the same and overwrite this property. That’s quite annoying right? And this is because the key is a String.
A symbol is very helpful in this case. A symbol is not private but it is collision free. Name clashing using Symbols is like burning down your house with a flamethrower then saying that you only forgot to put out a candle before sleeping.

Here is an example showing how to use Symbols to prevent collisions.
By keeping the symbol inside of the object we can limit the public manipulation of a property:

Nice isn’t it?

Unfortunately, it’s not perfect. Mainly because it’s not private. You can literally grab a symbol whenever you want, wherever you want:

kids-skeptical-es6-symbol

Since you can grab the symbol from anywhere, you can overwrite the data whenever you want, just like this:

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Conclusion

We have seen here some powerful tools like Generators and Desctructuring Assignement that transform the way that we code nowadays and in the future. Moreover, some features like Async in ES7 are inspired by features from ES6 (Generators in this case), hence those new principles will be propagated in the future implementations of JavaScript.
Some are good to know, like Vanilla JavaScript Promises and some are literally ignored like Symbols.

2 Comments

  1. Daniel J Dominguez Daniel J Dominguez
    November 16, 2016    

    Can you explain the anonymous function part a bit more, because it doesn’t seem like {} is equivalent to (function () {})().

    var test;
    {
    test = 2
    }
    console.log(test) // 2

    Works fine, but:

    {
    var test = 2;
    console.log(test);
    }

    Blow up on a syntax error.

    • Matthieu Drula Matthieu Drula
      December 27, 2016    

      Hi Daniel,
      Which type of syntax error?

Leave a Reply

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

5 Shares