Exciting new features in ECMAScript 6

Published: Sun Dec 07 2014

JavaScript is everywhere these days! Both front end and the back end can be written in JavaScript, and in fact, this blog is an example of an application written entirely in JavaScript. Even though JavaScript has been around for a long time it's definitely a language in constant transition. The next really exciting milestone will be ECMAScript 6, which will usher in a whole host of new exciting additions to the language. In this post I will write about a few of the changes that excite me the most.

1) Block Scope

In pre ECMAScript 6 JavaScript there is no support for block scope which means we are limited to function scope. Effectively this means that variables declared anywhere in your code will be hoisted up to the nearest function scope by the JavaScript interpreter.

Take the example bellow:

function findElement1(elementName){ var elements = ['dog', 'cat', 'bird']; for(var i = 0; i < elements.length; i++){ if(elements[i] === elementName) { var foundElement = elements[i]; } } } function findElement2(elementName){ var elements = ['dog', 'cat', 'bird']; var i; var foundElement; for(i = 0; i < elements.length; i++){ if(elements[i] === elementName) { foundElement = elements[i]; } } }

These two functions may seem slightly different to the untrained eye because of the way the variables are declared. In findElements1 the variables “foundElement” and the loop counter “i” are declared in what, in other languages, would be considered block scope. However, since JavaScript doesn't support block scope the interpreter will transform findElement1 into findElement2 by hoisting the variables to the top of the function. As a developer it's important to know about this concept since ignoring it may lead to unintended behavior.

ECMAScript 6 gives us an alternative to this by introducing the let keyword which will enable us to define block scope.

function findElement1(elementName){ var elements = ['dog', 'cat', 'bird']; for(let i = 0; i < elements.length; i++){ if(elements[i] === elementName) { let foundElement = elements[i]; } } }

In the example above I have rewritten findElement1 using the let keyword instead of the var keyword. The result is that we now have truly local variables - not accessible outside their enclosing brackets. Some, including myself, might say the hoisting feature of JavaScript is a design flaw, but with ECMAScript 6, developers will have a choice between the current model and the block scope model.

2) Classes

JavaScript has always been an object oriented language, but the prototype object implementation is a big departure from the “classical” approach found in many object oriented languages. There have been attempts at wrapping this in custom layers to bridge the gap, but I am excited to see that ECMAScript 6 will finally bring native support for classes in JavaScript.

class Vehicle { constructor() { } start() { return "is started"; } } class Truck extends Vehicle { constructor(name) { super.constructor(); this.name = name; } drive() { super.start(); return "my truck is driving"; } }

As you can tell from the example above, classes will give us a more streamlined inheritance model using a paradigm that most developers are familiar with.

3) Arrow functions

JavaScript has always supported unnamed/inline functions, but ECMAScript 6 introduces a new shorthand notation for defining these functions.

var productArrowFunction = (val1, val2) => val1 * val2; var product1 = productArrowFunction(1,3); var productRegularFunction = function(val1, val2) { return val1 * val2; }; var product2 = productArrowFunction(1,3);

The above example shows how to create a product function using the new arrow syntax as well as the traditional way for comparison. The syntax might take some getting used to, but it will be very familiar to developers who are used to Lambda expressions in c# (.Net)

Sadly, full browser support of ECMAScript 6 is not realistic for a while, but the good news is that we will probably be able to benefit from it in NodeJS environments since it's not limited by the lowest common denominator of your browser support matrix :-)

Follow me on twitter @MoreTechStories