What’s new in EMCAScript 6 (ES6): A developer perspective

EMCAScript 6 (ES6) is that latest version of JavaScript that was released in June 2015. I have been using and testing ES6 over the past few weeks. I feel that there are some great features that will improve the quality of life for developers who use simple scripts, as well as complex web applications. I wanted to highlight some of these features that would be useful for anyone developing with JavaScript.

Note: The full specification for ES6 can be found at http://www.ecma-international.org/ecma-262/6.0/

Modules

One of the more exciting features in ES6 is the inclusion of modules, a feature that would alone make this latest version of JavaScript worthwhile. Many of the modern JavaScript frameworks have some sort of pattern where you are able to import/export code modules throughout your app. The updated software specification includes new syntax to manage modules in your code. Using modules helps keep all of your code organized in logical sections (modules) which results in an extensible and maintainable application.

Modules are designed around the export and import keywords. I’ve included a simple example below:

//lib/square.js

export function square(x) {
    return x*x;
}
//app.js

import {square} from “lib/square”;
console.log(square(5));   //25

Variables

The new specification also provides a couple new ways to define variables that are pretty neat from a quality of life standpoint.

LET

JavaScript developers are familiar with declaring variables using the var keyword. Now with the new spec, you can use let as well. You might be asking “What’s the difference?” and within that subtle difference lies in scope. With a var the result is a variable with the surrounding function as its scope, however the scope of a variable declared with let is only in the block it’s in. This allows or cleaner code with fewer variables We can see an example of this with a block of code for array iteration:

for(let i = 0, l = list.length; i < l; i++) {

     //do something list[i]

}

console.log(i); //undefined

 

CONST

 

We are also provided a new way to declare block-scoped variables through the use of “const”. The difference here is that the resultant variable is a read-only reference and must be assigned a value at time of declaration. Any change to that variable will cause an error. This can be useful for any constants that you need to define for code in a certain block of scope. Again this is another quality of life improvement that can yield a cleaner code base.

const EXAMP_CONST = 1;

EXAMP_CONST = 2; //error

const ANOTHER_CONST; //error

 

Arrow Functions

Arrow functions provide for another way to write short and concise code and are a great addition to JavaScript. The syntax change is to drop the function keyword, leaving zero or more arguments, the “fat arrow” ( =>) and the function expression. The return statement will be implied. The easiest way to understand this is with an example of code written in ES5 and ES6:

let movies = [{title:’A New Hope’, rating: ‘PG’}, {title: ‘The Terminator’, rating: ‘R’}];

//ES6:

let ratings = movies.map(item => item.rating);

//ES5:
var ratings = books.map(function(item) {
return item.title;
});
Overall, that is going to save time writing fewer lines of code, and is much easier to read.

 

ecmascript-6-logo