JavaScript has been around for more than two decades. The language has evolved over the years without breaking the Web, in spite of many browser wars. That the Web has not crashed is not a matter of luck, but through the coordinated efforts of the standards body named ECMA – European Computer Manufacturers Association headquartered at Geneva.
The first version of JavaScript, then called Mocha, came out in March 1996 as part of Netscape Navigator 2.0. The creator, Brendan Eich, had created it in just 10 days! Now compare it with other programming languages like C and Java, which took four to five years. In 1997, Netscape handed over the language specifications for standardisation to ECMA. Though its commonly known as JavaScript, the official name accepted by the standards body is ECMAScript. Standardisation was essential for other browser vendors to also implement the language to keep the Web open. Companies like Microsoft, though, wanted a proprietary flavour of scripting in their browsers. The first version of the specification was released in June 1997. The third version, which was released in December 1999, was of great significance. The ambitious version 4 was abandoned and those features are later brought out as part of the current version 6 (Harmony).
Understanding the many names for the current version
It took six years for ECMAScript 2015 to become standard. Initially, this version was code named ES.next, also referred to as Harmony. Another short name, ES6 is also popular. But the current version is finally being called ECMAScript 2015. Why? There is an interesting reason. Considering the pace at which the Web is evolving, six years is an epoch by web timelines (the last version came out in 2009), to wait for a new version of the language that fuels the Web. The ES6 version did not seem to have a definitive timeline. With the intention of being more time-bound with releases, the final standard has been named ECMAScript 2015. Going forward, the year will be used to denote versions. The good news is that ECMAScript 2016 and ECMAScript 2017 are already in the pipeline. What about browser support? Can browser vendors keep pace with new versions? Yes, that is another very important aspect. All major browser vendors, including Microsoft, are ready to release features at that pace.
In the rest of this article, I will use JavaScript to denote ECMAScript. I will also use the short form ES6 to refer to ECMAScript 2015, for the sake of brevity. But bear in mind that JavaScript is language implementation and ECMAScript is language specification. Going through the specifications could be a daunting task. The specification is more user friendly for compiler developers than for casual JavaScript programmers. This article is to simplify and explain the new features.
The direction in which the language is evolving
Before we go into the nitty-gritty of what the new version of JavaScript has, let us understand what the major goals were, while rolling out the language.
- To make writing complex applications easier
- To make writing libraries easier
- The development of code generators like compilers, translators, transpilers and IDEs
- To always remain backward compatible and not break any existing Web pages or applications
New themes
The new version of JavaScript is a significant update in the last decade. There are a number of good features borrowed from different languages such as Python, C# and Java. It has dozens of major themes and hundreds of new features. For a comprehensive list, refer to the Kangex site in the References section.
Themes include fixing bad parts, introducing high-level programming language features, programmatic conveniences, optimisation for machine level languages, libraries for functional programming, syntax of object-oriented programming, allowing multiple libraries and frameworks to be used without conflict, etc.
The most criticised part of JavaScript is the scope of variables. There is only the function scope and global scope with the var keyword. Brendan Eich, the creator of JavaScript, attributes this to the short time given to him to create the first version of the language. The new version has let. The new let gives block scope to JavaScript.
There are tons of programmatic conveniences like arrow functions, for..of constructs, string functions, function parameters with default values, variable parameters, destructuring and template strings.
The new features such as high-level languages include Promise and meta programming. With Promise, you can have actions completed in a deferred fashion. If you are familiar with jQuery.Deferred, then you know Promise. Meta programming is more a theme than a feature. Meta programming includes Symbols, Reflect and Proxies.
For those inclined towards functional programming, theres the new Math library, new data structures such as Maps, Sets, WeakMaps and WeakSets.
Support for object-oriented constructs is possible with fully defined class and extends keywords. With enhanced support of modules and facilities of import/export, you can load or pick only the required portions of a library. This is efficient and helps avoiding conflicts.
This article is just a broad view of what is going to be covered in detail in the coming months.
Language environment
Different browsers have varied levels of support for ES6 at this point. There are two ways to learn ES6. The first is by using the cloud editor (es6fiddle.net, see References) to try code samples. You can also type, evaluate and learn. The second way is by using translators such as Babel and Traceur, which translate ES6 code to ES5. The resulting JavaScript code is used in production to be sure your application works in the same way across all browsers.
Why move to ES6?
There are multiple reasons to move to ES6, depending on your role in an organisation and your interests. If you are a developer, you will find ways to write more elegant JavaScript that is easy to write and read. It is more maintainable and with less side effects. If you are an architect, it will help you make right choices when selecting JavaScript libraries and frameworks. You might be better off using pure JavaScript, if the new version eliminates the need for an additional framework. And on the server side, you can right away use JavaScript, new version without worrying about client browser support. If you suspect your clients may not use browsers that are of the latest versions, you can use JavaScript compilers to convert to the ES5 version, as most browsers support it.
Block scoping with let and const
Let us start learning the new features. To start with, block scoping is an easy-to-understand feature. You now can restrict a variable to block scope such as for a loop, if-then or if-else blocks. The variable is available even within sub-blocks.
1. for (let i = 0; i < 3; i++) {
2. console.log(iterator + i);
3. }
4. console.log(iterator + i++); // error: i is not defined
Code 1: An example for let
The new keyword const can be used to define a constant. Note that const is more like let in relation to scope, than var (see Code 1, Code 2 and Code 3).
1. const version = 6; 2. console.log(version); 3. version = 7; // error: version is read-only
Code 2: An example for const
1. {
const version = 6;
console.log(version);
2. }
3. version = 7; // error: version is not defined
Code 3: An example for const with scope
Template strings
In JavaScript, string concatenation has been through a series of strings, variables and the + operator. This makes log message statements cumbersome and error-prone with double-quotes spread all over. Most programmers would have experienced missing a closing double-quote and the resulting weird behaviour of the program!
Note that the quote type used is backtick or back-quote. It is not the single quote.
1. let i = 1;
2. console.log(`iterator ${i}`); // print: iterator 1
Therell be more coverage on these topics in the coming months.
References
[1] ECMAScript 2015 Language Specification http://www.ecma international.org/publications/standards/Ecma-262.htm
[2] ECMAScript 2015 Language support across browsers https://kangax.github.io/compat-table/es6/
[3] Try ES6 coding and learn through examples http://www.es6fiddle.net/
[4] Babel JavaScript Compiler https://babeljs.io/
[5] ECMAScript on GitHub https://github.com/tc39
[6] Mozilla Developer Network – New features https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
