Features of Ecmascript6
EcmaScript is the standardized scripting language that JavaScript implements. JavaScript is one of the most essential languages in existence today. Every browser has a JavaScript interpreter. JavaScript on the server is becoming more popular, and now we are able to use JavaScript for desktop (Chrome Apps), native mobile (PhoneGap) and native Windows 8 apps.
EcmaScript6 you’ve probably heard about it. It is the next version of JavaScript and it has some great new features. These features are varying degrees of complexities and are useful in both simple scripts and complex applications. In this article, we are going to discuss the major features of ES6 that you can use in your everyday JavaScript coding.
BLOCK SCOPING
Scoping in JavaScript is a bit confusing for the developers with C,C#, and Java background. In ES5, variables are either globally or locally scoped. The lack of block scoping has caused confusion in ES5 and resulted in some of the interesting patterns to achieve block scope. In ES6 a user can use let keyword to achieve block scoping.
var num = 0; //globally scoped
for (let i = 0; i < 10; i++) { //i is block scoped
num += i;
console.log(‘value of i in block: ‘ + i);
}
console.log(‘Is i defined here?: ‘ + (typeof i !== ‘undefined’)); //Is i defined here?: false
CONST
There is another way to declare block-scoped variables. With const, a user can declare a read-only reference to a value. A user has to assign a variable directly. If a user tries to change the variable or if a user doesn’t set a value immediately, then the user gets an error.
const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error
Arrow Functions
Arrow functions are the great inclusion to the JavaScript language. Many features in ES6 could fundamentally change and new JavaScript applications are architected. Arrow functions are not going to fundamentally change anything.
let books = [{title: ‘X’, price: 10}, {title: ‘Y’, price: 15}];
let titles = books.map( item => item.title );
// ES5 equivalent:
var titles = books.map(function(item) {
return item.title;
});
If we look at the syntax of arrow functions, there is no function keyword. What remains is zero or more arguments, the “arrow” (=>) and the function expression. The return statement is unconditionally added.
METHODS
A couple of convenience methods have been added to the String prototype. Most of them basically phase-out some workarounds with the indexOf()method to achieve the same.
‘my string’.startsWith(‘my’); //true
‘my string’.endsWith(‘my’); // false
‘my string’.includes(‘str’); // true
MODULES
Modules have the prospective to radically change how many JavaScript applications are structured and standardized. Modules in ES6 provides a way to load and manage dependencies through the new import and export keywords.
PROMISES
Promises provide a mechanism to handle the results and errors from asynchronous operations. Promises provide more readability through method chaining succinct error handling. Promises are currently used in many JavaScript libraries. RSVP.js, Q.js, and the $q service in Angular.
getJSON(“/api/employee/1″).then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) { //you could chain multiple then statements
// proceed with access to employee
}).catch(function(error) { //succinct error handling
// handle errors in either of the two requests
});