ES6: 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.

1. 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 released the first version of the No. 262 standard document (ECMA-262), which stipulated the standard of the browser scripting language, and called this language ECMAScript, and this version is version 1.0.

The standard was written for the JavaScript language from the beginning, but it's not called JavaScript for two reasons. One is the trademark. Java is the trademark of Sun. According to the licensing agreement, only Netscape can legally use the name JavaScript, and JavaScript itself has been registered as a trademark by Netscape. The second is to reflect that the maker of this language is ECMA, not Netscape, which is conducive to ensuring 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 (other ECMAScript dialects include JScript and ActionScript). In everyday situations, the two terms are interchangeable.

2. 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 5.1, work began on version 6.0. 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 was impossible to include all the features to be introduced in one release. The normal practice is to release version 6.0 first, then release version 6.1 after a while, then version 6.2, version 6.3, and so on.

However, the authors of the standard did not want to do this. They want standard upgrades to be a regular process: Anyone, at any time, can submit proposals for new syntax to the standards committee, which then meets monthly to assess whether those proposals are acceptable and what improvements are needed. If, after several meetings, a proposal is mature enough, it can be officially entered into the standard. This means that standard version upgrades become a rolling process with changes every month.

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

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

Therefore, ES6 is not only a historical term, but also a general reference. It means 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 in 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" in general.

3. Grammar Proposal Approval Process

Anyone can propose changes to the language standard to the Standards Committee (also known as the TC39 committee).

A new grammar goes through five stages from proposal to formal standard. Changes in each phase require approval by the TC39 committee.

Stage 0 - Strawman (display stage)
Stage 1 - Proposal (solicitation stage)
Stage 2 - Draft (draft stage)
Stage 3 - Candidate (candidate stage)
Stage 4 - Finished (finalization stage)
As long as a proposal can enter Stage 2, It will almost certainly be included in future formal standards. All current proposals of ECMAScript can be viewed on the official website of TC39 at GitHub.com/tc39/ecma262 .

One of the writing goals of this book is to track the latest progress of the ECMAScript language and introduce all new syntax after version 5.1. New grammars that are definite or promising to be included in the standard are introduced.

4. History of ECMAScript

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

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

In 2000, ECMAScript 4.0 began to brew. This version didn't end up being adopted, but most of it was inherited by ES6. Therefore, the starting point for ES6 formulation is actually 2000.

Why didn't ES4 pass it? Because this version is too radical, a complete upgrade to ES3, some members of the standards committee are reluctant to accept it. ECMA's No. 39 technical expert committee (Technical Committee 39, referred to as TC39) is responsible for formulating the ECMAScript standard, and its members include Microsoft, Mozilla, Google and other large companies.

In October 2007, the draft version 4.0 of ECMAScript was released, and the official version was expected to be released in August of the following year. However, the parties have serious differences on whether to adopt this standard. Large companies, led by Yahoo, Microsoft, and Google, opposed major upgrades to JavaScript and advocated minor changes; Mozilla, led by JavaScript creator Brendan Eich, insisted on the current draft.

In July 2008, due to the fact that there were too many differences and fierce debates about which functions should be included in the next version, ECMA decided at a meeting to suspend the development of ECMAScript 4.0, and publish a small part of it involving the improvement of existing functions as ECMAScript 3.1, and expand the scope of other radical ideas into a later version. Due to the atmosphere of the meeting, the project code name of this version is Harmony (harmony). Shortly after the meeting, ECMAScript 3.1 was renamed ECMAScript 5.

In December 2009, ECMAScript version 5.0 was officially released. The Harmony project was divided into two parts. Some more feasible ideas were named JavaScript.next and continued to be developed, and later evolved into ECMAScript 6; Think again. The overall consideration of the TC39 committee is that ES5 is basically compatible with ES3, and major grammatical corrections and new features will be completed by JavaScript.next. At that time, JavaScript.next refers to ES6, and after the release of the sixth edition, it refers to ES7. TC39's judgment is that ES5 will become the mainstream standard for JavaScript development in mid-2013, and it 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. New features are envisaged to be put into ECMAScript 7.

In December 2013, a draft of ECMAScript 6 was released. Then there's a 12-month discussion period to get feedback from all sides.

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

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

Node.js is a server runtime for JavaScript. It has higher support for ES6. In addition to those features that are turned on by default, there are some syntax features that have been implemented, but are not turned on by default. Use the command below to view the ES6 experimental syntax that Node.js does not enable by default.

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

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

5. Babel Transcoder

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

// 转码前
input.map((item) => item + 1);

// 转码后
input.map(function (item) {
    
    
  return item + 1;
});

The original code above uses an arrow function, and Babel converts it into a normal function, which 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

5.1 Configuration file.babelrc

Babel's configuration file 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 transcoding rules. The official provides the following rule sets, which you can install as needed.

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# react 转码规则
$ npm install --save-dev @babel/preset-react

Then, add these rules to .babelrc.

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

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

5.2 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.

# 转码结果输出到标准输出
$ npx babel example.js


# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成source map文件
$ npx babel src -d lib -s

5.3 babel-node

The babel-node command of the @babel/node module provides a REPL environment that supports ES6. It supports all the features 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 run it directly.

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

5.4 @babel/register modules

The @babel/register module overrides the require command, adding a hook for it. Since then, whenever require is used to load files with .js, .jsx, .es, and .es6 extensions, they will be transcoded with Babel first.

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

To use, @babel/register must be loaded first.

// 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 transcoding in real time, it is only suitable for use in the development environment.

5.5 polyfill

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

For example, ES6 adds the Array.from method on the Array object. Babel will not transcode this method. If you want this method to work, you can use core-js and regenerator-runtime (the latter provides transcoding of generator functions), providing 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';
// 或者
require('core-js');
require('regenerator-runtime/runtime);

There are many APIs that Babel does not transcode by default. For a detailed list, see the definitions.js file of the babel-plugin-transform-runtime module.

5.6 Browser Environment

Babel can also be used in the browser environment, use the browser version provided by the @babel/standalone module, and insert it into the webpage.

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

Note that the web page converts ES6 code to ES5 in real time, which will have an impact on performance. The production environment needs to load scripts that have been transcoded.

Babel provides a REPL online compiler that can convert ES6 code to ES5 code online. The converted code can be directly inserted into the webpage as ES5 code to run.