It's now the year 2015 and at this point javascript has been out there on the web for quite some time, running in site visitors computers. For the moment we're in on the version 5.1 of the language, which added a couple new array methods. It was a couple years ago the ECMA people came out with that version 6 was under development, and since then we've been waiting (at least I have) and now the time seems to have come. ECMAScript 6 (ES6) (Update – the name got changed to ECMAScript 2015) has been announced that it will be released during the middle of 2015, meaning probably at any moment now!

It seems like it's closing in, but the question is what this new update really will mean for us working with javascript. Will things change, get updated or will new functions be added? What about older websites that were made years ago, will they suddenly stop working?

Whats new in ECMAScript 6

According to the spec nothing in javascript will change with ES6, so if you're not really fond of news and updates it's perfectly safe to just ignore everything that has to do with ECMAScript 6 and keep coding as you've always done. It would be impossible to change anything in the language, because that would mean probably thousands of websites could stop working and crash. So that's the thing with javascript, things can never really change.

Instead the update means something much more interesting. New functions! And lots of them! It doesn't seem to be some small update, but on the contrary a very big one. Some examples are that classes are getting introduced, with inheritance, constructor functions and all what that means. It has always been possible to have "classes" in javascript since it's a prototype based language. But now we get a much more pleasant syntax for it all.

Some other news are block scope, which will be an optional feature that can be used by declaring variables with "let" or "const" instead of "var". Arrow functions are another, and we'll get new string methods, tail calls, a new loop and much more. Below we'll go through a few of these.

Block scope with let and const

let weapon = "sword";

if (true) {
let offhand = "shield";
}

console.log(weapon); // sword
console.log(offhand); // undefined

Javascript has something called function scope. It differs from block scope which is more common in other programming languages, and means that variables are fully visible inside the function they've been declared in. In languages that use block scope variables that's for example been declared inside a loop, or in an if statement can't be used outside those "blocks". In javascript on the contrary it's perfectly ok because of something called "hoisting", which means that all variables that's been declared inside a function gets lifted to the top of it and becomes visible throughout the whole function.

Some people finds this very different and even "weird", so now block scope will be introduced for those who prefer it. By declaring your variables with either let or const they'll apply to block scope instead of function scope.

The difference between let and const is that const makes the variable a constant. Meaning when it's been assigned a value it can never be changed.

Classes in javascript

// The old way
var Archer = function (x, y, speed) {
Warrior.call(this, x, y, speed);

this.shoot = function() {
console.log("shoot arrow!");
};
};

Archer.prototype = Object.create(Warrior.prototype);

var robinHood = new Archer();

// The new way
class Archer extends Warrior {

constructor(x, y, speed) {
super(x, y, speed);
}

shoot() {
console.log("shoot arrow!");
}
}

var robinHood = new Archer();

Classes have always been possible to achieve in javascript by creating functions and instantiating them with new. Object.create and call() have then been the keys to inheritance to "copy" the super classes attributes and methods to the sub classes.

In ECMAScript 6 we now get a whole new syntax for this purpose. It becomes a cleaner and more standardized way of creating classes with new keywords like class, extends, constructor, super etc. The new way includes a lot of features, but it seems like some things like abstract classes, interfaces, access modifiers like public, private and protected were left out. Well anyway it's a step in the right direction.

Arrow functions

var fruits = ['banana', 'apple', 'pear'];

fruits.forEach(function (f) { // The old way
console.log(f); // banana, apple, pear
});

fruits.forEach(f => { // The new way
console.log(f); // banana, apple, pear
});

var numbers = [24, 11, 7, 13, 8];

numbers.sort((a, b) => a - b);

console.log(numbers); // 7, 8, 11, 13, 24

Functions are as known used pretty often in javascript. Also very often as anonymous functions to complete smaller things, and as callbacks to other functions or methods. Instead of having to type the word function over and over again now arrow functions gets introduced. They're not so different from normal functions, just that an arrow is typed instead of the word "function". But they also bind "this" to the object they're executed in, instead of to the window object. So there's no more need of the old hack "var that = this" anymore. Under the hood that's probably exactly what it does, but we now don't have to worry about it!

Arrow functions however seems to have some restrictions. They can't (as of now) be assigned to variables, and instead seems to just be available for replacing anonymous functions.

Rest parameters

var shoppingCart = [];

function addFruits (...fruits) {
fruits.forEach(fruit => {
shoppingCart.push(fruit);
});
}

addFruits('orange', 'apple', 'peach');

Rest parameters gets added. What it does is it lets you add as many parameters as you want to a function call, and then it turns them all into an array. Before this we've always had to use the "arguments" parameter for this, which unfortunately just is an array-like object so no array methods have worked for it. But now with rest parameters they will.

Default parameter values

function shoot (x = 0, y = 0) {
console.log('shoot at x:' + x + ' y:' + y);
}

shoot();

Another feature are default parameter values which is a nice addition. By assigning values to functions parameters that becomes their default values, which they'll use if the parameters are not passed through the function call. Before this we needed to use if statements and check if the parameters were undefined. Now that's finally come to an end and a much nicer syntax awaits us.

Optimized tail calls

function loop (num) {
if (num < 20) {
console.log(num);
loop(num + 1);
}
}

loop(0);

A tail call is the last thing a function does when it returns the result from another function, something used by among other things recursive functions. Previously always an "invocation return" has had to be done, but now functions instead will be able to make a "jump" and at the same time use the activation method of the previous function. Might sound complicated but what it means is that recursion gets a lot more effective to use. Even to the limit that in performance there will be almost no difference between using recursive functions, or loops.

For of

var fruits = ['apple', 'banana', 'orange'];

// for in
for (var fruit in fruits) {
console.log(fruit); // 0, 1, 2
}

// for of
for (var fruit of fruits) {
console.log(fruit); // apple, banana, orange
}

A new loop gets added! Before this one you've always had to use the for in loop to iterate through objects, which is alright but not really perfect. What for in does is it loops through objects properties instead of their values, which most often is not what you want. Same thing when used on arrays, and there's been some other issues that it doesn't always iterate in the correct order.

For of on the contrary is a new and fresh loop that does it as it should've been done from the start, that is, it iterates over the values instead. Making it more useful for arrays, and eliminating the need to do the extra value lookup for objects. If this however is what you want the for in loop will still remain in the language, which gives javascript programmers a very strong toolbox for creating good applications.

Finally

There are of course many more features in ECMAScript 6, when its finally been released there will probably be lots of more articles on the topic. For now this site has a good reference of many of the new features: es6-features.org.