An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Use ECMAScript 6 Today
Today, ECMAScript 6 is in the process of being finalized. ECMAScript is the foundation of JavaScript and, hence, exploring the proposed features today also means that we get a sneak peak at how we will be writing JavaScript in the near future! In this article, we’ll explore ten new features, with a significant focus on tools, browsers and transpilers.
A Brief History: ECMA, ECMAScript and JavaScript
JavaScript was originally developed by Brendan Eich of Netscape, and officially released as part of Netscape Navigator 2.0 in 1995. A year later, JavaScript was submitted to ECMA International, a body that facilitates the standardization of information and communication technology and consumer electronics, so that it can be formalized industry-wise. ECMAScript, thus, became the name of the scripting language standardized in ECMA-262.
The ECMAScript standard forms the backbone of many other derived languages, including ActionScript and JScript. Through the years, ECMAScript has gone through four versions, with the discussions today very much revolving around version six, which has also been code-named, ECMAScript Harmony.
Version correspondence
Before we dive into these new features, it’s important to note that the ECMAScript standard forms the foundation of JavaScript. There are numerical differences between each of the JavaScript versions and the corresponding ECMAScript editions. This is to say that JavaScript is compatible with the ECMAScript standard, while providing more features. The table below summarizes the relationship between JavaScript and ECMAScript:
ES6 Overview
Goals
JavaScript has come a long way since its humble beginnings nearly twenty years ago. Today, developers are writing thousands of lines of code creating complex JavaScript applications. Before we dive into the detailed features of ES6, you may want to look at the big picture that is defined in the specification drafts, in terms of requirements, goals, means and themes. One of the goals for ES6 is to be a better language for creating:
- complex applications
- libraries
- code generators
Compatibility
The ES6 compatibility table is very useful, as it tells us the ES6 features that are supported in the current browser. It also gives us a handy link to the specifications for each of the features listed. Do note that some of the features’ existence might not mean full compliance with specifications. When working with Chrome, be sure to enable the “Experimental JavaScript” flags.
Features
Now that the big picture is defined, let’s explore how we can implement them. In the following sections, we will discuss ten features of ES6, using various tools so that we can understand ES6 both in theory and practice. Prior knowledge of JavaScript is a pre-requisite, so feel free to check out many resources on JavaScript.
Listed below are the features that we’ll go through with a different tool. Try them out one by one, or jump to the specific feature that you’d like to explore:
- Block scoping with
let
[ using Firefox browser ] - Block scoping with
const
[ using Chrome browser ] - Classes [ using Traceur ]
- Default function parameters [ using TypeScript ]
- Collections [ using NodeJS ]
- Destructuring [ using Firefox browser ]
- Rest parameters & Spread operator [ using Grunt plugin Traceur ]
- Iterators [ using Firefox browser ]
- Array comprehension [ using Firefox browser ]
- Modules (using ES6 Module Transpiler)
Feature 1 - Block Scoping with let
- Documentation:
let
- Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console
JavaScript variables are function-scoped. This means that, even if there are variables declared in a nested block, they are available throughout the function. Let’s review a short example below; we’ll simply use the web console in Firefox or Chrome to run them. What do you think will be the value of jsFuture
?
var jsFuture = "es6";(function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture);}());
In the above example, the value of jsFuture
in the console.log
statement will be “es5″. Crucial to your understanding is the fact that, in JavaScript, variable declarations are hoisted to the top, but variable initializations, on the other hand, are not. Hence, regardless of where the variables are initialized and declared, within the function scope, they will always be hoisted. The snippet below is exactly the same – with comments to illustrate this feature of variable hoisting.
var jsFuture = "es6";(function () { // var jsFuture = undefined; // variable hoisting if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); // "es5"}());
ES6 tackles this issue with let
, which is like var
, except for the fact that it is block scoped instead of function scoped. Let’s consider another example with var
below. Calling the function es[6]()
will give us the value of i = 10
. Notice that, even though var i = 0;
is declared in the for
loop, the scope of var i
defaults to global. Hence, when the function es[6]()
is executed, the value of i
is 10
.
var es = [];for (var i = 0; i < 10; i++) { es[i] = function () { console.log("Upcoming edition of ECMAScript is ES" + i); };}es[6](); // Upcoming edition of ECMAScript is ES10
Let’s now use let
. To code this out, we’ll use Firefox and open up the web console through the menu (Tools > Web developer > Web Console). Creating a block-scoped variable within the for
loop, let c = i;
made it block scoped.
var es = [];for (var i = 0; i < 10; i++) { let c = i; es[i] = function () { console.log("Upcoming edition of ECMAScript is ES" + c); };}es[6](); // Upcoming edition of ECMAScript is ES6