Inception
ECMAScript is the standardized scripting language which JavaScript and other languages like ActionScript implement. ES6 also known as ECMAScript 2015 is the latest version of the ECMAScript standard. JavaScript on the server is becoming popular and hence you can use JavaScript for desktop (Chrome Apps), native mobile apps and native Windows 8 apps. With some major updates on ES6, the ECMAScript will have a broad impact on web development.
Let us know a brief history along with JavaScript timeline:
- 1995: Birth of JavaScript as LiveScript
- 1997: ECMAScript standard got established
- 1999: ES3 comes out
- 2000 – 2005: AJAX, gains popularity in app like Outlook Web Access (in 2000) and Oddpost (in 2002), Gmail (in 2004) and Google Maps (in 2005)
- 2009: ES5 comes out with Object.create, forEach, Object.keys and standard JSON
- 2015: ES6 is here as ECMAScript2015
From programming_lg: ES6 and ES7 the future of Javascript #JavaScriptWorld #ES6 #ES7 #javascript #programming
☞ … https://t.co/oCLfU5vQ4i— Code Geek Planet (@Code_Geek_) September 15, 2016
ECMAScript 6 features
1: LET
In place of declaring variables like var, you can now use let as well. The only difference lies is in scope. While var results in a variable with the surrounding function as its scope, on the contrary, the variable declared using let has its scope only to the block it is in.
if(true) {
let x = 1;
}
console.log(x); // undefined
With few variables hanging around a clean code can be written. Look at the below mentioned array iteration code:
for(let i = 0, l = list.length; i < l; i++) {
// do something with
list[i]
}
console.log(i);// undefined
Ideally one would use, ‘j’ variable for another iteration in the same scope. But using let, since ‘i’ is defined and available only within its own block scope, you can safely declare 'i' again.
2: Arrow Functions in ES6
Many features in ES6 could fundamentally change the way how new JavaScript applications are architected. Now ES6 also have arrows which are just amazing because they would make ‘this’ behave properly. As far as arrow function is concerned it is not going to fundamentally change anything. Arrow function offers two features first is lexical scoping of the this keyword and another is less ceremony while defining an anonymous function.
When there was no arrow function, every function defines a this value. With arrow functions now you need not reassign this like mentioned in the second code snippet.
function Car() {
var self = this; //locally assign this that can be closed over
self.speed = 0;
setInterval(function goFaster() {
//this has a different scope, but we can use the self variable to reference the parent "this"
self.speed += 5;
console.log('now going: ' + self.speed);
}, 1000);
}
The above snippet could be rewritten as
http://www.es6fiddle.net/hrw5xz4f/
function Car() { //Note, we could use the new Class feature in ES6 instead
this.speed = 0;
setInterval(() => {
this.speed += 5; //this is from Car
console.log
console.log('now going: ' + this.speed);
}, 1000);
}
3: Modules
Have you ever wondered how good it would be if JavaScript would have been modular? However, there were always alternatives such as CommonJS used for Node.js and AMD (Asynchronous Module Definition) used for RequireJS before ES6 introduces modules as a native feature. Modules are indeed a great addition to JavaScript language and this feature added is worth exploring into ES6.
Modules in ES6 have the ability to radically changes how many JavaScript applications are structured and standardize best practice in some already modular applications. Via new import and export keywords Modules in ES6 provide a way to load and manage dependencies.
Modularity is a vital concept for large applications which makes very much understandable to include it as a core language feature.
Modules are designed around the export and import keywords.
Let’s understand it with an example with two modules:
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import { sum, pi } from "lib/math";
console.log('2π = ' + sum(pi, pi));
In the above code, there are multiple export statements. Each export must explicitly state type of the exported value (function and var).
Similar to destructuring the import statement in this example uses a syntax in order to explicitly define what is being imported.
The *wildcard combined with the as keyword can be used to import the module and give the module a local name:
// app.js
import * as math from "lib/math";
console.log('2π = ' + math.sum(math.pi, math.pi));
The module system features a default export. This can also be a function. In order to import the default value into the module, you just have to provide the local name.
// lib/my-fn.js
export default function() {
console.log('echo echo');
}
// app.js
import doSomething from 'lib/my-fn';
doSomething();
The import statements are synchronous, but the module code does not execute until all dependencies have loaded.
4: Classes in ES6
If you are fond of object-oriented programming (OOP), then you will surely be loving this feature.
ECMAScript introduces JavaScript classes which are built on existing prototype-based inheritance. The new syntax makes it easy to create objects hence taking leverage of inheritance and reuse
the code. Using such classes, beginners who are from other programming languages, can easily understand how JavaScript works. Classes support super calls, instance and static methods and constructors.
class SkinnedMesh extends THREE.Mesh
{
constructor(geometry,
materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera)
{
//...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static
defaultMatrix() {
return new THREE.Matrix4();
}
}
5: Symbols
Like Number and String symbols are a new primitive data type. Symbols allow properties to be keyed by either string or symbol.Symbols are unique but they are not private since they are exposed via reflection features.
var MyClass =
(function() {
// module scoped symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype =
{
doStuff:
function() {
... this[key] ...
}
};
return MyClass;
})();
var
c = new
MyClass("hello")
c["key"]
=== undefined
Other Things Worth Noting
More Features
Apart from the above-mentioned features, ECMAScript6 comprises of many other features like Destructuring, Generators, Promises, Template literals, Spread operator. Destructuring is a simplified way of extracting values from data stored in objects and Arrays.
Another important feature of ES6 is Generators. It helps in pausing and resuming functions. ES6
comprises of two types of literals viz template literals and tagged template literals. Though the name of these two literals are almost same and look alike but they are completely different and therefore importantly distinguished.
Promises, again a great feature is an alternative to callbacks for delivering the results of an asynchronous computation. Parameter handling in ECMAScript 6 has been upgraded and it now supports parameter default values, rest parameters and destructuring.
TypeScript
TypeScript is a superset of JavaScript which is also a free and open source programming language.It primarily provides static typing, classes, and interfaces. Developers can also rename their file from .js files to .ts files and hence ready to use TypeScript. It can be understood in a much better way that TypeScript files are compiled to readable JavaScript. Hence the migration back is also possible. Adopting TypeScript yields robust software for large JavaScript project.
While developing JavaScript applications, Types help developers in using highly productive development tools and practices viz static checking and code refactoring.
TypeScript also supports the latest and evolving JS features which also comprises from ECMAScript 2015.
Node and ES6
For running and interpreting JavaScript code Node.js relies on Google's V8 engine. Some features in ES6 are complete, others are in progress and few of them have not even started at all. There are two ways of finding whether a language feature is implemented in Node or not. First, the dynamically generated compatibility tables are of great use and stay updated. Second, the specific features can be found by viewing at V8 version included in Node.
In-closing
ECMAScript 6 is an emerging star and with all the libraries and frameworks developers are creating applications and with more and more production libraries they are ready to write applications in the new version of JavaScript. You can start using the ES6 now as you are stuffed with a lot of technical information and with the help of transpilers information you can enjoy benefits without bothering about browser compatibility. For brushing up your JavaScript programming skills and improve the quality of the code you write, stay tuned to our JavaScript Blogs.
References: leanpub, devcenter.wintellect, smashingmagazine, github lukehoban, hongkiat, webapplog, 2ality, quora, cuelogic, stackoverflow, typescriptlang, wikipedia, teamtreehouse
Rachit Agarwal
