Introducing ECMAScript
If you follow the news and latest trends about JavaScript, you might have heard the hype about ECMAScript 6 and ECMAScript 7. What does ECMAScript have to do with JavaScript and is there a difference?
ECMAScript is a scripting language specification. JavaScript is an implementation of this specification, as are Jscript and ActionScript.
ECMAScript 6 and ECMAScript 7
As we know, JavaScript is a language that runs mostly on browsers (also in servers using NodeJS), and each browser can implement its own version of the available functionalities of JavaScript (as you will learn later on in this book). This specific implementation is based on ECMAScript. Thus, the browsers offer mostly the same functionalities (our JavaScript code will run in all browsers); however, each functionality's behavior may be a little bit different from browser to browser.
All the code presented in this chapter so far is based on ECMAScript 5, which became a standard in December 2009. The most recent release of ECMAScript, at the time this book is being written, is ECMAScript 6, which was standardized in July 2015, almost 6 years after its previous version. The committee responsible for drafting the ECMAScript specifications made the decision to move to a yearly model to define new standards, where new features would be added as they were approved. For this reason, ECMAScript sixth edition was renamed to ECMAScript 2015 (ES6). There is a new version that is also being prepared to be released in the summer of 2016, which is called ECMAScript 2016 or ECMAScript 7 (ES7).
In this topic, we will cover some of the new functionalities introduced in ES6 and ES7.
The compatibility table
It is important to know that, even though ES6 has already been released, its features might not be supported by all browsers. For a better experience, it is best to use the latest version available for the browser you choose to use (Firefox or Chrome).
At the following links, you can verify which features are available in each browser:
Even if the features are not yet available, we can start using new syntax and new functionalities today.
By default, Firefox adds support to ES6 and ES7 as their team ships the implementation of the functionalities.
In Google Chrome, you can enable the functionalities by enabling the experimental JavaScript flag by opening the URL
chrome://flags
, as demonstrated in the following image:
Note
Even with the Enable Experimental JavaScript flag enabled, some of the ES6 features might not be supported in Chrome. The same can be applied to Firefox. To know exactly which features are already supported in each browser, take a look at the compatibility table.
Using Babel.js
Babel ( https://babeljs.io ) is a JavaScript transpiler, also known as a source-to-source compiler. It converts JavaScript code with ES6 and ES7 language features to equivalent code that uses only language features from the widely supported ES5 specification.
There are many different ways of using Babel.js. One of them is installing it according to its setup (https://babeljs.io/docs/setup/ ). Another one is using it directly in the browser through its Try it out option ( https://babeljs.io/repl/ ), as demonstrated in the following screenshot:
Along with each example of ES6 and ES7 that will be presented in the following topics, we will also provide a link so that you can run and test the examples in Babel.
