ECMAScript 6 Introduction

ECMAScript 6.0 (hereinafter referred to as ES6) is the next-generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.

The relationship between ECMAScript and JavaScript

A common question is, what is the relationship between ECMAScript and JavaScript?

To clarify this issue, we need to look back at history. In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to the standardization organization ECMA, hoping that this language could become an international standard. The following year, ECMA issued the first edition of standard document No. 262 (ECMA-262), which stipulated the standard for browser scripting language, and called this language ECMAScript, and this version was version 1.0.

The standard was formulated for the JavaScript language from the beginning, but it is not called JavaScript for two reasons. One is a trademark. Java is a trademark of Sun. According to the license agreement, only Netscape can legally use the name JavaScript, and JavaScript itself has also been registered as a trademark by Netscape. The second is to reflect that the creator of this language is ECMA, not Netscape, which helps to ensure the openness and neutrality of this language.

Therefore, the relationship between ECMAScript and JavaScript is that the former is the specification of the latter, and the latter is an implementation of the former (the other ECMAScript dialects include JScript and ActionScript). In everyday situations, these two words are interchangeable.

Relationship between ES6 and ECMAScript 2015

The term ECMAScript 2015 (ES2015 for short) is also often seen. How does it relate to ES6?

In 2011, after the release of ECMAScript version 5.1, the 6.0 version began. Therefore, the original meaning of the word ES6 refers to the next version of the JavaScript language.

However, because this version introduces too many grammatical functions, and during the development process, many organizations and individuals continue to submit new functions. It soon became clear that it is impossible to include all the features that will be introduced in one version. The normal practice is to release version 6.0 first, then release version 6.1 after a period of time, then version 6.2, version 6.3, and so on.

However, the standard makers did not want to do this. They want to make standard upgrades a regular process: anyone can submit a proposal for a new grammar to the Standards Committee at any time, and then the Standards Committee meets once a month to evaluate whether these proposals are acceptable and what improvements are needed. If after many meetings, a proposal is mature enough, it can formally enter the standard. This means that the standard version upgrade has become a continuous rolling process, which will change every month.

The Standards Committee finally decided that the standard will be officially released in June each year as the official version of that year. In the following time, changes will be made on the basis of this version, until June of the next year, the draft will naturally become the new year's version. In this way, the previous version number is not needed, as long as it is marked with the year.

The first version of ES6 was released in June 2015, and the official name is "ECMAScript 2015 Standard" (referred to as ES2015). In June 2016, the slightly revised "ECMAScript 2016 Standard" (ES2016 for short) was released as scheduled. This version can be regarded as the ES6.1 version, because the difference between the two is very small (only the includes method of the array instance is added And exponential operator), basically the same standard. According to the plan, the ES2017 standard will be released in June 2017.

Therefore, ES6 is both a historical term and a general reference. The meaning is the next-generation standard of JavaScript after version 5.1, covering ES2015, ES2016, ES2017, etc., while ES2015 is the official name, specifically referring to the official version released that year Language standards. Where ES6 is mentioned in this book, it generally refers to the ES2015 standard, but sometimes it also refers to the "next-generation JavaScript language".

Approval process of grammar proposal

Anyone can submit a proposal to the Standards Committee (also known as the TC39 Committee) to request changes to the language standards.

A new grammar needs to go through five stages from a proposal to becoming a formal standard. Changes at each stage need to be approved by the TC39 committee.

-Stage 0-Strawman (show stage) -Stage 1-Proposal (stage for soliciting opinions) -Stage 2-Draft (draft stage) -Stage 3-Candidate (candidate stage) -Stage 4-Finished

As long as a proposal can enter Stage 2, it will almost certainly be included in future official standards. All current ECMAScript proposals can be viewed on the official website of TC39 GitHub.com/tc39/ecma262.

One of the writing goals of this book is to track the latest development of the ECMAScript language and introduce all the new grammars after version 5.1. For those that are clear or promising, new grammars that will be included in the standard will be introduced.

The history of ECMAScript

It took 15 years for ES6 to be developed from the beginning to the final release.

As mentioned earlier, ECMAScript 1.0 was released in 1997, and for the next two years, ECMAScript 2.0 (June 1998) and ECMAScript 3.0 (December 1999) were successively released. Version 3.0 is a huge success. It has been widely supported in the industry and has become a common standard, laying the basic syntax of the JavaScript language, and subsequent versions will be completely inherited. To this day, when beginners start learning JavaScript, they are actually learning the grammar of version 3.0.

In 2000, ECMAScript 4.0 began to brew. This version failed in the end, but most of its content was inherited by ES6. Therefore, the starting point for ES6 is actually 2000.

Why did ES4 not pass? Because this version was too radical, ES3 was completely upgraded, which caused some members of the standards committee to be unwilling to accept it. ECMA's Technical Committee 39 (TC39) is responsible for formulating ECMAScript standards, and its members include major companies such as Microsoft, Mozilla, and Google.

In October 2007, the draft version of ECMAScript 4.0 was released, and the official version was expected to be released in August of the following year. However, there are serious disagreements on whether to pass this standard. Big companies, led by Yahoo, Microsoft, and Google, oppose major upgrades of JavaScript and advocate minor changes; Mozilla, led by JavaScript creator Brendan Eich, insists on the current draft.

In July 2008, due to the fact that the parties had too much disagreement and too much debate about which functions should be included in the next version, ECMA decided to suspend the development of ECMAScript 4.0 and publish a small part of it that involves the improvement of existing functions as ECMAScript 3.1, and expand the scope of other radical ideas and put them into later versions. Due to the atmosphere of the meeting, the project code of this version was named Harmony. Soon after the meeting, ECMAScript 3.1 was renamed ECMAScript 5.

In December 2009, ECMAScript version 5.0 was officially released. The Harmony project is divided into two. Some more feasible ideas are named as JavaScript.next and continue to be developed, and later evolved into ECMAScript 6. Some ideas that are not very mature are regarded as JavaScript.next.next, in the far future Consider launching again. The overall consideration of the TC39 committee is that ES5 is basically compatible with ES3, and major grammatical corrections and new features are added, which will be completed by JavaScript.next. At the time, JavaScript.next referred to ES6, and after the sixth edition was released, it referred to ES7. TC39's judgment is that ES5 will become the mainstream standard for JavaScript development in the middle of 2013 and will maintain this position for the next five years.

In June 2011, ECMAScript version 5.1 was released and became an ISO international standard (ISO/IEC 16262:2011).

In March 2013, the ECMAScript 6 draft was frozen and no new features were added. The new features will be put into ECMAScript 7.

In December 2013, the ECMAScript 6 draft was released. Then there was a 12-month discussion period to listen to feedback from all parties.

In June 2015, ECMAScript 6 was officially passed and became an international standard. Counting from 2000, 15 years have passed.

Currently, major browsers support ES6 can be viewed kangax.github.io/compat-table/es6/.

Node.js is the server runtime environment (runtime) of JavaScript. It has higher support for ES6. In addition to the functions that are turned on by default, there are some syntax functions that have been implemented, but they are not turned on by default. Use the following command to view the ES6 experimental syntax that is not turned on by default in Node.js.

// Linux & Mac
$ node --v8-options | grep harmony

// Windows
$ node --v8-options | findstr harmony

Babel transcoder

Babel is a widely used ES6 transcoder, which can convert ES6 code to ES5 code for execution in older browsers. This means that you can write programs in ES6 without worrying about whether the existing environment supports it. Below is an example.

// Before transcoding
input.map((item) => item + 1);

// After transcoding
input.map(function (item) {
  return item + 1;
});

The original code above uses arrow functions. Babel converts it to a normal function and can be executed in a JavaScript environment that does not support arrow functions.

The following command installs Babel in the project directory.

$ npm install --save-dev @babel/core

Configuration file .babelrc

The configuration file of Babel is .babelrc, which is stored in the root directory of the project. The first step in using Babel is to configure this file.

This file is used to set transcoding rules and plug-ins. The basic format is as follows.

{
  "presets": [],
  "plugins": []
}

The presets field sets the transcoding rules. The following rule sets are officially provided, and you can install them as needed.

# Latest transcoding rules
$ npm install --save-dev @babel/preset-env

# react transcoding rules
$ npm install --save-dev @babel/preset-react

Then, add these rules to .babelrc.

  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

Note that you must write .babelrc first to use all the following Babel tools and modules.

Command line transcoding

Babel provides a command line tool @babel/cli for command line transcoding.

Its installation command is as follows.

$ npm install --save-dev @babel/cli

The basic usage is as follows.

# Transcoding results are output to standard output
$ npx babel example.js

# Write the transcoding result to a file
# --out-file or -o parameter specifies the output file
$ npx babel example.js --out-file compiled.js
# Or
$ npx babel example.js -o compiled.js

# Entire directory transcoding
# --out-dir or -d parameter specifies the output directory
$ npx babel src --out-dir lib
# Or
$ npx babel src -d lib

# -s parameter generates source map file
$ npx babel src -d lib -s

babel-node

The babel-node command of the @babel/node module provides a REPL environment that supports ES6. It supports all the functions of Node's REPL environment and can run ES6 code directly.

First, install this module.

$ npm install --save-dev @babel/node

Then, execute babel-node to enter the REPL environment.

$ npx babel-node
> (x => x * 2)(1)
2

The babel-node command can run ES6 scripts directly. Put the above code into the script file es6.js, and then run it directly.

# es6.js code
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2

@babel/register module

The @babel/register module rewrites the require command and adds a hook to it. After that, whenever you use require to load files with the suffixes of .js, .jsx, .es and .es6, they will be transcoded with Babel first.

$ npm install --save-dev @babel/register

When using it, you must first load @babel/register.

// index.js
require('@babel/register');
require('./es6.js');

Then, there is no need to manually transcode index.js.

$ node index.js
2

It should be noted that @babel/register will only transcode the file loaded by the require command, not the current file. In addition, since it is real-time transcoding, it is only suitable for use in a development environment.

polyfill

Babel only converts new JavaScript syntax by default, and does not convert new APIs, such as Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise And other global objects, and some methods defined on global objects (such as Object.assign) will not be transcoded.

For example, ES6 added the Array.from method to the Array object. Babel will not transcode this method. If you want this method to run, you can use core-js and regenerator-runtime (the latter provides transcoding of generator functions) to provide a shim for the current environment.

The installation command is as follows.

$ npm install --save-dev core-js regenerator-runtime

Then, at the head of the script, add the following two lines of code.

import'core-js';
import'regenerator-runtime/runtime';
// or
require('core-js');
require('regenerator-runtime/runtime);

There are many APIs that Babel does not transcode by default. For a detailed list, please refer to the definitions.js of the babel-plugin-transform-runtime module -plugin-transform-runtime/src/runtime-corejs3-definitions.js) file.

Browser environment

Babel can also be used in a browser environment. Use the browser version provided by the @babel/standalone module to insert it into a web page.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // Your ES6 code
</script>

Note that the webpage converts ES6 code to ES5 in real time, which will affect performance. The production environment needs to load the script that has been transcoded.

Babel provides a REPL online compiler, which can convert ES6 code to ES5 code online. The converted code can be directly inserted into the web page as ES5 code to run.