ES6: Powerful upgrade for JS
Technically, ECMAScript (ES) is the language attempted to standardize the scripting languages such as JavaScript. Over the years, different versions of ES evolved. ECMAScript 6, code named “ES.next”, has gained significant traction that has got many enhancements and features that makes JavaScript code easier and maintainable. ES6 specs are still under experimental stage and a stabilized version is not officially out. In the ECMAScript 5 version of JavaScript, there are several new capabilities to the language without many changes in syntax. For instance, ES5 lacks sub-classing an array. Later ES6 was upgraded to tackle some fundamental language issues that require syntax changes that were needed to be fix, along with some new features to address shortcomings in ES5. Let’s investigate the differences between ECMAScript 5 and 6.
| ES5 IMAGE | ECMAScript 5 focus seemed to be on defining the so-called “magical” parts of JavaScript such as read-only properties and non-enumerable properties while setting the path forward to remove “the bad parts” with strict mode. |
First let’s understand what are the few interesting features of ES5 include:
• newer object model, using which, newer objects can be created easily and their extensibility can be controlled.
• native JSON support, which includes methods like JSON.parse( ) and JSON.stringify( ) which remove dependency on external libraries for working with JSON.
• Strict Mode- Which makes the programs simpler and less error-prone.
Much of developer’s annoyance usually has come from lack of tooling to scale JavaScript applications, but that is being rapidly addressed with frameworks like AngularJS and JS-based language like TypeScript. ECMAScript 6 is ready to alter the way we gaze at client applications. Web development is continuing to evolve as we see more adoption of new gears that enable JavaScript-based development for both web and mobile devices. ES6 will tackle many of the core language shortcomings addressed in many frameworks and ES5.
OK So What’s New?
ES6 has got new features which includes Classes (‘Class’ is a keyword in ES6), Arrow Functions, Modules, Block Scoping, and Promises. Developers are particularly excited at the features available in ES6 to reduce many aspects of coding. In ES6, built-ins like Array, Date and DOM Elements can be subclassed.
As such, several workarounds in ES6 have emerged which gave developers some great new options. Several existing JavaScript module systems and frameworks (AngularJS,Node.js and Require.JS ) support ECMAScript 6 via transpilers ( Typescript, Traceur, and 6to5).
Let’s dig into each of the above mentioned features in ES6:
Arrow functions – Arrow functions is a short cut to create an anonymous functions and make development more productive. When it comes to defining the functions Arrow functions are used for callbacks. Below example shows a regular way vs arrow functions.
Example:
var createGreeting = functiob (message, name) {
return message + name;
}
var arrowGreeting = ( message, name) => message + name;
Block scope(const, let, and functions)- let and const behave similarly in the sense that both are block scoped. Const values are read only and cannot be redeclared later on.
| for (var i = 0; i < 5; i++) { var j = i + i; } console.log(j); // 8 |
for (var i = 0; i < 5; i++) { let j = i+ i; } console.log(j); // Reference Error |
Classes (Class Keyword)-Classes are syntactic sugar that overlay the current constructor and prototype based approach to types.
Example of using:
class Language {
constructor (name, founder, year) {
this.name = name;
this.founder = founder;
this.year = year;
}
summary( ) {
return this.name + “was created by ” + this.founder + ” in ” +this.year;
}
}
Modules-Helps remove us from real global variables that pollute the namespace (a really good thing btw) and does a better job at managing asynchronousity. It has two new keywords: export and import.
Example of using:
export const PI = Math.PI;
export function square(x){
return x*x;
}
// app.js
import {PI,square} from ‘math'; //Alternativelycould be:import * as math from ‘math’
console.log(square(PI));//will be PI^2
Promises-Promises are a representation of an object. They are used in asynchronous JavaScript programming and are available today in many third party libraries, including JQuery, Angular, etc.
Example of using:
var promise = new Promise(
function (resolve, reject) { // (A)
…
if (…) {
resolve(value); // success
} else {
reject(reason); // failure
}
});
There are a lot more other interesting features, including rest parameters, generators, default parameters and more.
The features vary widely from completely new objects and patterns to syntax changes to new methods on existing objects. The exciting thing about ECMAScript 6 is that all of these changes are geared towards problems that developers are actually facing. There are several ECMAScript 6 features that replace ECMAScript 5 features, but you can still use ES5 as a foundation by using “transpilers” to bridge the ES5-ES6 gap.
ES6 is the most promising version of JavaScript that will certainly aid writing more modular and less quirky code. By taking advantage of the right tools and functionality of the future version ES6, one can address critical issues of earlier versions that help use these new features effectively. Now, the entire ES6 feature-set is beyond the scope of this post, for that you can check out its new features by trying them out.