Intro to ES6

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.

For those that aren’t aware ECMAScript is the offical name for JavaScript.

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## In JavaScript we have the var keyword as to declare variables. A point of confusion with developers new to JavaScript is how var is scoped. Unlike other C family languages JavaScript has function scope, not block scope. That is until now. The 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 var

var foo = "bar";
if (true) {
    var foo = "baz";
    var bam = "foo";
console.log(foo); // "baz"
console.log(bam); // "foo"

Then using let

let foo = "bar";
if (true) {
    let foo = "baz";
    let bam = "foo";
console.log(foo); // "bar"
console.log(bam); // Reference error: "bam" not defined.

As we can see using let or 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 const.

##Rest parameters## 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: [] 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

let foo = function(paramOne, ...params) {
  console.log(paramOne); // 1
  console.log(params); // [2,3,4,5]
  console.log(arguments); // {"0":1,"1":2,"2":3,"3":4,"4":5}


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## Arrow functions, which are found in 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.

let squareAll = (arr) => => val * val);
console.log(squareAll([1,2,3,4,5])); // [1,4,9,16,25]


var squareAll = function squareAll(arr) {
  return (val) {
    return val * val;
console.log(squareAll([1, 2, 3, 4, 5]));

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

let doSomething = () => {
  let x = 2,
      y = 4;
  return x + y;

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 .call() and .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 .call() or .apply().
This behaviour is useful because now we won’t have to close over variables that point to this values.

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## I like recursion, a lot. But JavaScript has a problem, in that tail calls are held in memory, so if we were to recurse really deep, our call stack would be huge and could potentially overflow causing an Error or worse, making recursion a poor choice in JavaScript.
In an ES6 tail call (Follows the exact same syntax as ES3/5) the stack will be garbage collected so there’s no limit to how deep we can recurse. Meaning recursion will be possible and reliable in JavaScript.

##Final words## 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, 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.