This is the second post in the series that will talk about JavaScript. In the previous post I presented a historical context of the emergence of language and how it has evolved so far.

In this post we will cover version 6 of ECMAScript giving some examples of what has changed and what has come again. If you are in doubt about the history of version 6, be sure to read the previous post in the series.

Why version 6?

When I started writing the series I intended to approach version 5 of the language, which is the most used version today. But this scenario is changing. There are numerous new projects being done using ES 6. In addition, I attended a seminar on this version and I really enjoyed the participation of those present.

So I decided to change the scope and approach version 6 so that this series serves as reference and so that it has a didactic value more according to the present day and those that are to come.

Where does ECMAScript 6 come from?

If you read the previous post in the series you probably know that ES 6 derives indirectly from version 4. ES 4 was dropped in July 2008 because it had a huge feature package. This would make acceptance of the new version a bit difficult, since the change would be very disruptive. The syntax changed, the functions changed, the classes arrived, anyway. Everything that JavaScript had not already arrived in version 4.

The TC-39 decided to abandon ES 4, create a patch for version 3 that did more than 3, but less than 4, and split the huge feature pack into two versions, which would become versions 6 and 7, But these were only available in June 2015, when the TC-39 approved ECMAScript 6.

What’s new?

The list of new features is huge. So I will cite only the most important and most anticipated.

Classes and inheritance

Classes, along with inheritance, came to bring the concept of object-orientation closer to the definition of language. This definition was inherited purely from Java.

Default parameters

It was inherited from Python and Perl and made a huge lack of language.

Generators

Generators are like functions that pause while returning a value that may have been preprocessed. If the generator is called again, it summarizes the execution from where it left off, preserving the entire scope.

Promises

Already present in Frameworks as the Angular, promises come native to ES 6.

Template literals

Classical inherited Perl and Python functionality.

Arrow functions

The syntactic reduction of anonymous functions. Besides size, they have another very interesting feature. They preserve the scope of the object where they are declared. The normal functions of JavaScript have their own scope and therefore this point it to the function itself and not to the object.

Scope Block

ES 5 is famous for not providing scope for variables in blocks. Only within functions did this happen. This made the programmer have to come up with ways to get around the problems it caused. Declaring the variables with let, the scope is preserved in the block where the variable is declared, regardless of whether it is a if, a, for or a function. If declared with var, the variables remain with the old behavior.

De-structured assignment

Syntactic sugar for extraction of internal attributes to an Array or Object.

Iterators

Similar to in already used in objects, but for use in Arrays, Sets, and Maps.

Spread Operators

Synthetic sugar that structures or disassembles arrays to facilitate the passage of parameters and avoid the use of arguments in functions, for example. React goes even further and enables this feature to be used to de-structure objects.

Not yet fully supported

The official definition of the TC-39 on ES 6 was made in June 2015. That’s why today’s browsers mostly do not fully support ES 6. Google Chrome 53 has 97% compatibility. So it’s possible to play with ES 6 on the Chrome console without worrying about something that is not supported.

There is a fairly reliable compatibility table that keeps the specifications of ES 6 updated, but not only this version, but also 7, among others. Note that Google Chrome, Microsoft Edge (yes, Edge!) And Node 6.5 are the most compatible applications.

How can I use ES 6 today?

The answer is: Babel !

Babel is a JavaScript compiler. Transcribing your ES 6 code with Babel will result in an ES 5 code. This is the best way to use ES 6 today without worrying about the environment where your code is running. In isolated environments, and ensuring that you run on a compiler that supports ES 6, Babel is not required. An example of this is Node 6.x.

How is the ES 6 code transcribed for ES 5?

Here are some examples of what Babel does to simulate in ES 5 the behavior of the ES 6 features. These are two simple examples, only to show that the behavior is fully reproducible with version 5.

Note that all transcript codes use strict mode. Strict mode is enabled by default in ES 6.

Scope Block

 

Arrow functions

If you are curious about how other Babel-transcribed codes are, try to get the code from one of the examples above and play it on try it out of Babel.

Babel uses presets to do the transcription. To transcribe code in ES 6, Babel uses the preset es2015. For ES 7 and React, for example, one can use the presets stage-2e react. This makes Babel extensible, so you can run JavaScript in the latest specs.

Things easy to do with ES 6 those were horrible to do with ES 5

Here are two examples of simple things to do with ES 6, which yielded a veritable dribble in language (and consequently a lot of code) with ES 5.

Classes

Of course, the best example! Classes do not exist in ES 5. To simulate this behavior, an immediate function (a self-executing closure) was declared to serve as an initializer and then it was declared a constructor function that received functions and attributes in the prototype. See the example in ES 5:

The equivalent in ES 6

Notice that the way to use it is exactly the same. But the statement is frighteningly different. And we can also take advantage of a literal template in the function phrase walk. ES 6 came with the classes to really make things easier.

I will not present here an example with inheritance because the code in ES 5 is very extensive. A real salad of code to do something that in ES 6 is done with one class Animal extends MyObject.

Scope Block

In ES 5 the variables do not have block scope. The only thing that gives scope to the variables are the functions. Therefore, it was common to see blocks encompassed by an immediate function to protect the scope of the variable. See the example in ES 5.

The equivalent in ES 6:

Notice the use of let. If the variables are declared with let, the scope will be preserved within the block {}.

Conclusion

ES 6 came to fix the house on the issue of syntax and features. What was a nightmare to do in ES 5 became simple to do in ES 6, as seen in the two examples above.

In addition, the classes finally arrived and gave even more power to the language, without taking advantage of the functions, which gained the arrow functions to make them even more powerful.

Did you like ES 6? Already develop using the technology? Tell us your experiences in the comments.