ES6 or ECMAScript 6 is now the latest official version of the ECMAScript standard as of June 2015 and is the first significant update to the language, since 2009 when ES5 was standardised.
ES6 brings some exciting and powerful additions to the language and in this post we will be taking a look at those that excite me the most.
##Let and const statements##
let keyword gives us block scope. The
const keyword also gives us block scope, but cannot be re-assigned to or redeclared within that scope.
Allow me to illustrate, first using
As we can see using
const statements your program will respect block scope. In my experience function scope works just fine, but block scope is the more powerful model of the two so from now on, I’ll be using
let instead of
var. When I want a value that persists I will use
Rest parameters fix a long term issue - that the arguments object is not an array, it is an array-like object with numbered keys. Therefore if we wish to invoke native array methods on it, we must either convert it to an array or use the Array prototype using some ugly code like:
.prototype.forEach.call(arguments). Using rest parameters we can just invoke those methods directly, because it is an array.
the syntax for rest paramters is three periods followed by a name:
...params for example.
Rest parameters also have another, highly useful characteristic: They contain all the remaining parameters, after those that are declared.
Let me illustrate
This is a highly useful addition to the language, and will aid us in building higher order, resuable and mathematiclly pure functions. Those that are interested in functional programming will love this feature.
Arrow functions, which are found in http://coffeescript.org/ are useful for two reasons, firstly they give you some syntatical sugar: They don’t require the
function keyword and if it’s a single line function, they also don’t require the ‘return’ keyword to return a value. Secondly they give the
this keyword lexical binding.
An example of an arrow function that squares the values of a passed array. First will be the function written using ES6 Arrow functions, the second with the ES5 equivalent.
The ES6 version is what is commonly refered to as a Lambda in functional programming.
A thing to note with arrow functions are the parentheses around parameters. if there are no parameters you must supply an empty pair of parentheses, if you have a single parameter they may be ommited, if you have multiple parameters they must be included. To avoid confusion I suggest they always be included.
like a regular function you can create a function body with curly braces with mulitple statements and a return value. For example
The above is a valid, if rather pointless function.
The other highly useful aspect of arrow functions that I mentioned is how the
this keyword is bound.
In a regular function the
this keyword is bound at the call site for the function, in most circumstances ‘this’ will point to the global object, if it’s a method of an object,
this will be bound to that object, similarly in constructors
this will be bound to the newly created object.
Most of us are aware of
.apply() where we can pass in an argument that
this will be bound to and
.bind() which returns a function to be later executed with that binding also known as hard binding.
Arrow functions work in a sort-of similar way to bind, where
this is lexically bound to the functions context. If the function lives within an object,
this will be hard bound to it, meaning you cannot override the
this keyword with
This behaviour is useful because now we won’t have to close over variables that point to
So with the above in mind we cannot replace all functions with arrow functions, regular functions still have their place, but in ES6 we should see less
function keywords and less
var self = this polluting our programs.
##Proper tail calls##
There are many other exciting features in ES6 such as Destructuring, weak-maps, modules (These will be a godsend)
There will be some bad parts, I think
class is a poor addition, just to appease developers coming from classical languages such as Java. We all know the prototypal model is the more powerful, but even then I find it very, very rare that I need to use inheritance at all. Functions being a far more useful and robust method of code re-use.
There’s a fantastic transpiler available called Babel that can be found over at http://babeljs.io, they even have a little playground where you can write ES6 and see it’s ES5 equivalents, which makes for a great learning tool.
Babel also have Grunt and Gulp tasks so you can begin to write ES6 in your projects right away. Those who use React.js, it also comes with an ES6 Transpiler.
I highly recommend you start integrating ES6 with your projects right away, what’s great is that you can just add in more ES6 as you learn more of it.
Start by using let and const statements, then introduce arrow functions, before long it will feel natural to write in ES6.