ES6 (ES2015) and Beyond: Understanding JavaScript Versioning

In recent years, the development of JavaScript has been surging. New ECMAScript specifications are released every year, making JavaScript version management, feature support for each version, and how to write future-oriented code is confusing.

To better understand the reasons behind this seemingly continuous wave of updates, let's briefly review the history of JavaScript and its versions and understand why the standardization process is so important.

Key Points

• ES6 (also known as ES2015) marks a major shift in JavaScript version management, introducing features such as classes, promises, arrow functions, ES modules, generators and iterators. This is an important foundation update that lays the foundation for future annual small JavaScript version updates.
• ES2015 establishes a proposal-based TC39 process for discussion and adoption of new language features. This process consists of five stages: Strawman (preface), Proposal (proposal), Draft (draft), Candidate (candidate), and Finished (finished). Each stage gradually normalizes and implements the proposed features.
• After ES2015, subsequent versions are released every June, and ES2016 (ES7) and ES2017 (ES8) introduce incremental features and improvements. ES2018 introduces some powerful new features such as asynchronous iterators as well as object expansion and residual properties.
• Renamed ES6 to ES2015 to reflect its release year and get rid of the version number. This move is to avoid confusion and demonstrate that JavaScript is a dynamic language that is constantly updated and improved. New naming conventions also help to indicate the regularity of language updates and improvements.

Early History of JavaScript Version Management

The prototype of JavaScript was written in May 1995 by Brendan Eich in just ten days. He was initially recruited to implement the Scheme runtime for Netscape Navigator, but the management team pushed to use a C-style language to complement the then-new Java.

JavaScript debuted in December 1995 in Netscape Navigator Version 2. The following year, Microsoft reverse engineered JavaScript and created its own version, called JScript. Released with Internet Explorer browser version 3, JScript is almost exactly the same as JavaScript — even including all the same bugs and quirks — but it does have some extra Internet Explorer-specific features.

The birth of ECMAScript

The need to ensure that JScript (and any other variants) remains compatible with JavaScript prompts Netscape and Sun Microsystems to standardize the language. They did this with the help of the European Association of Computer Manufacturers (ECMA), which will be responsible for hosting the standard. The standardized language is called ECMAScript to avoid infringement of Sun's Java trademarks—a move that has caused quite a bit of confusion. Ultimately, ECMAScript is used to refer to the specification, while JavaScript (and still is) is used to refer to the language itself.

The working group responsible for JavaScript version management and maintenance of ECMAScript is known as Technical Committee 39, or TC39. It consists of representatives from all major browser vendors such as Apple, Google, Microsoft and Mozilla, as well as invited experts and representatives from other companies interested in web development. They hold regular meetings to determine the direction of the language.

When JavaScript was standardized by TC39 in 1997, the specification was called ECMAScript version 1. Initially, subsequent versions of ECMAScript were released annually, but ended up sporadic due to a lack of consensus and a large set of features that were difficult to manage around ECMAScript 4. So the version was terminated and narrowed down to 3.1, but was not finalized by that name, but eventually evolved into ECMAScript 5. It was released in December 2009, 10 years after the release of ECMAScript 3, and introduced features such as the JSON serialization API, Function.prototype.bind, and strict mode. Two years later, a maintenance version was released to clarify some ambiguity in the latest iteration 5.1.

ECMAScript 2015 and annual releases revival

As TC39 resolves the disagreement caused by ECMAScript 4, Brendan Eich stressed the need for a shorter, smaller release. The first of these new specifications is ES2015 (originally named ECMAScript 6 or ES6). This release is a huge but necessary cornerstone that supports future annual JavaScript release management. It contains many features that many developers today love very much, such as:

• Category
• Promise
• Arrow function
• ES module
• Generator and iterator

ES2015 is the first version that follows the TC39 process , a proposal-based model for discussing and adopting language features.

TC39 Process

It must go through five stages before the proposal is accepted into the upcoming ECMAScript version.

Stage 0: Strawman (preface)

This is a convenient step that allows for the submission of ideas to the specification. Anyone can make feature suggestions—i.e. TC39 members and non-members registered as contributors.

Stage 1: Proposal (Proposal)

The first phase of formalization of the proposal. Must:

• Describe any existing issues corrected by this solution
• Provides API overview, as well as advanced implementation details, as well as polyfills and/or demonstrations
• Discuss potential obstacles in advance

A person in charge must be selected to adopt and advance the proposal. This person must be a TC39 member. Stage 2: Draft (draft)

This is a milestone that this feature may be included in future ECMAScript releases. Here, the syntax and semantics of the proposal are detailed using the formal language described by the specification. An experimental implementation should be provided at this time.

Stage 3: Candidate (candidate)

Here, most of the content and support technologies of the proposal have been developed, but further feedback from users and implementers (such as browser manufacturers). Once acquired and action is taken, summary and specification details will be finalized and signed by the designated reviewer and the designated editor. Since this stage requires a consistent implementation, only critical changes will be accepted thereafter.

Stage 4: Finished (completed)

This proposal has been accepted and can be added to ECMAScript. Therefore, it inherently:

• Acceptance tests for part of the Test262 suite written in JavaScript have been written to demonstrate compliance and behavior of the feature
• At least two compliant implementations are available and released, all of which prove their robustness and developer availability
• The pull request has been submitted to the official ECMA-262 code base and has been signed by the specification edit.

The above code base contribution documentation further details the use of GitHub issues and pull requests to manage the addition of languages.

Looking forward

After completing the JavaScript version management and update process for ES2015 and establishing TC39, subsequent versions are released each June, with the proposal being included for one year. At the time of writing, there are three new specifications already.

ES2016

Also known as ES7, this is the first smaller, incremental version of ECMAScript. Besides bug fixes, it only adds two features.

Array.prototype.includes

This example method simplifies the operation of searching for values ​​in an array:

// ES2016 之前：
const hasBob = names.indexOf('bob') > -1;

// ES2016：
const hasBob = names.includes('bob');

Exponent operator

Before ES2016, exponent operation can be performed using Math.pow(base, exponent). This version introduces an operator (**) that has its own priority:

// ES2016 之前
Math.pow(5, 3); // => 125

// ES2016
5 ** 3; // => 125

ES2017

ES2017 (aka ES8) is a slightly larger version that contains some useful methods and syntax structures.

Async function

Promise has rescued us from callback hell, but their APIs are still showing verbose. Asynchronous functions abstract them using synchronous codes that are very similar to synchronous codes:

// Promise
const getProfile = name => {
  return fetch(`https://some-api/people/${name}`)
    .then(res => res.json())
    .then(({ profile }) => profile); // 从解析的对象中解构 `profile`
};

// async/await
const getProfile = async name => {
  const res = await fetch(`https://some-api/people/${name}`);
  const { profile } = await res.json();
  return profile;
};

String fill method

String.prototype.padStart(length, padder) and padEnd(length, padder) will repeatedly add padder at the beginning and end of the string (this is optional, defaults to spaces) until length characters are reached:

'foo'.padStart(6);          // => '   foo';
'foo'.padEnd(6);            // => 'foo   ';
'foo'.padStart(10, 'bar');  // => 'barbarbfoo';
'foo'.padEnd(10, 'bar');    // => 'foobarbarb';

Other features include trailing commas, shared memory and atomic operations, and static object methods (Object.entries(), Object.values(), and Object.getOwnPropertyDescriptors()).

ES2018

At the time of writing, this latest release introduces a small number of powerful new features.

Async Iterator

While Promise.all() allows you to wait for the parsing of multiple Promises, in some cases you may need to iterate over the values ​​retrieved asynchronously. You can now wait for the asynchronous iterator with the Promise array:

// ES2016 之前：
const hasBob = names.indexOf('bob') > -1;

// ES2016：
const hasBob = names.includes('bob');

Object Expand and Remaining Properties

On the surface, these two syntax improvements have become popular among JavaScript developers due to the availability of compilers such as Babel. Object expansion and residual properties are similar to array expansion and residual properties and allow for shallow copying and grouping deconstruction of object properties:

// ES2016 之前
Math.pow(5, 3); // => 125

// ES2016
5 ** 3; // => 125

Other accepted proposals include Promise.prototype.finally(), as well as enhancements to regular expressions and template literals.

Conclusion

JavaScript has developed greatly in a very short period of time. While this is due to the excellent work of the ECMAScript standard and TC39, it was initially a arduous journey due to the lack of stability and cohesion in previous JavaScript version management and development.

Because the proposal process is relatively mature, the language can only be improved in a pragmatic and controllable way. This is a great time for web developers!

FAQs about JavaScript Version Management: ES6 and ES2015

What is the main difference between ES6 and ES2015?

ES6 and ES2015 are essentially the same. ES6 is the sixth edition of the ECMAScript programming language internationally standardized by ECMA. ES2015 is just the new name for ES6, reflecting the year it was released. Renames are meant to reflect the release year and get rid of the version number, which can be confusing.

Why rename ES6 to ES2015?

Renamed ES6 to ES2015 to reflect its release year and get rid of the version number. This move is to avoid confusion and demonstrate that JavaScript is a dynamic language that is constantly updated and improved. New naming conventions also help to indicate the regularity of language updates and improvements.

What key features are introduced in ES6/ES2015?

ES6/ES2015 introduces many new features for JavaScript, including let and const for variable declarations, arrow functions for shorter function syntax, template literals for string interpolation, for Object-oriented programming classes, Promise for asynchronous programming, modules for code organization, and so on.

ES6/ES2015 How to improve JavaScript encoding?

ES6/ES2015 Improves JavaScript encoding in a variety of ways. It introduces new syntax and features that make the language more powerful and easier to use. For example, arrow functions provide a cleaner syntax for function writing, while Promise makes handling asynchronous operations easier. The introduction of modules also helps to better organize the code, making it easier to manage and maintain.

How to get started using the ES6/ES2015 feature in my JavaScript code?

To get started with the ES6/ES2015 feature in JavaScript code, you can use a translator like Babel that converts ES6 code into ES5 code that can run in the current browser. You can also use a module packer like Webpack to manage and bundle your JavaScript modules.

Is there any compatibility issues with ES6/ES2015?

While most of the features of ES6/ES2015 are supported by most modern browsers, there may be some compatibility issues with older browsers. To ensure compatibility, you can use polyfill, which provides features you expect native support from your browser.

What is the difference between JavaScript and ECMAScript?

JavaScript is a programming language originally developed by Netscape. ECMAScript is a JavaScript standard version that is internationally standardized by ECMA. JavaScript implements ECMAScript, which means it follows the rules and structures defined in the ECMAScript standard.

What is the future of JavaScript after ES6/ES2015?

After ES6/ES2015, JavaScript will continue to evolve, with new versions released every year, and each version introduces new features and improvements. The future of JavaScript may see stronger features, better performance, and higher compatibility across different platforms and devices.

What is the relationship between TypeScript and ES6/ES2015?

TypeScript is a superset of JavaScript that adds static types to the language. It supports all features of ES6/ES2015, and even some additional features not found in JavaScript. TypeScript code is translated to JavaScript, so it can run in any JavaScript environment.

What are the benefits of using ES6/ES2015 than using earlier versions of JavaScript?

Using ES6/ES2015 offers many benefits compared to earlier versions of JavaScript. It introduces new syntax and features that make the language more powerful and easier to use. It also improves code organization and maintainability and provides better support for complex applications and large code bases.

The above is the detailed content of ES6 (ES2015) and Beyond: Understanding JavaScript Versioning. For more information, please follow other related articles on the PHP Chinese website!