ECMAScript is a language specification implemented primarily by JavaScript. ECMAScript6 (ES6) is the first significant update to the spec since June 2011 and brings many new features including classes, generators, module loaders, and iterators. The full list of new features can be found in this handy Github page.

Since the update is still a draft, and hasn't yet been standardised, support for ES6 in browsers is still low. This doesn't mean that you can't start using it today though.

Note: A comprehensive support guide can be found here.

Babel

Babel (formally known as 6to5), is a JavaScript compiler for the next generation of JavaScript. This means that you can write your code using ES6 (and even parts of ES7), and it will be compiled into ES5, compatible with today's browsers.

If you followed my post on automating optimisations with gulp, adding Babel to your Gulp workflow is as simple as:

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Don't forget to install the plugin with $ npm install gulp-babel --save-dev.

Classes

My favourite feature of ES6 so far has to be classes. In ES5, writing object orientated code had to be done using prototyping, the issue with this however, is that it can be difficult to remember all the syntax that is required.

Before

For example, here is the code as you mught write it today:

var Person = (function () {
  function Person(name, age) {
    this.name = name;
    this.age = age;
  }

  Person.prototype.getAge = function getAge() {
    return this.age;
  };

  return Person;
})();

var steve = new Person("Steve", 24);
steve.getAge();

After

This is the same code, written to the ES6 standard. As you can see, it is easier to read and clearer to see what is happening.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getAge() {
    return this.age;
  }
}

var steve = new Person("Steve", 24);
steve.getAge();

With classes and object oriented code being much more simple to create, it's easier to write better, cleaner code for larger projects.

Default parameters

Another feature that will be immediately useful, are default parameters in functions, something that JavaScript has previously not supported.

ES6 now let's you define default arguments just like you would in many other languages:

function myFunction(max = 100) {

}

which will be converted to the ES5 syntax:

function myFunction() {
  var max = arguments[0] === undefined ? 100 : arguments[0];
}

Default parameters can also be combined with classes:

class Vehicle {
  constructor(colour = 'blue') {
    this.colour = colour;
  }
}

Babel is very powerful, and currently supports more features of ES6 than any other browser or compiler.

If you would like to quickly try out ES6 without having to install anything, use the editor available on the Babel website.

Theoretically, one day hopefully in the not too distant future, you will be able to remove Babel and your code will work natively in all browsers, without needing to be transformed. Unless, you stick with Babel, and use it to start implementing ES7, ES8 and more in the future!