As you may know ECMAScript 6 is almost done. In fact it has a mid-2015 release date. It's the first update to the language since ES5.1 which was standardized in 2011. ES5 was standardized in 2009 so it's been a while since a major release.

For those who aren't familiar ECMAScript is the scripting language standardized by Ecma International using the ECMA-262 specification, according to Wikipedia. Netscape delivered JavaScript to Ecma International in 1996. JavaScript is a dialect of ECMAScript so it shares many of the features.

Here are six features of ES6 that are great.

Template Strings

String interpolation makes it much easier to add variables to your strings. To use this feature you'll need to use back ticks and place holders ${ }.

var x = 1;
var y = 2;
`${ x + 1} + ${ y } = { x + y + 1}` // 1 + 1 + 2 = 4

We can also use string values as well.

message = `Hello ${name} how are you doing`

Destructuring Assignment

We can now do array matching. The syntax mirrors the construction of an array and object literals.

[a, b] =[3, 4]
var foo = ["one", "two", "three"];
var [one, two, three] = foo;

You can even swap variables.

var a = 1;
var b = 2;

[a, b] = [b, a]

Arrow Functions

Arrow function expression is a shorter syntax compared to function expressions. They are also anonymous

odds = evens.map(v => v + 1)

//equivelent ES5
odds = evens.map(function (v) { return v + 1});

Modules

With modules you can now export/import symbols from/to modules without causing any global namespace pollution.

A module can export multiple things, you just need to declare it with the keyword export. Anyone that uses Ember will be quite familiar with this.

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

//  someApp.js
import * as math from "lib/math"
alert("2π = " + math.sum(math.pi, math.pi))

//  otherApp.js
import { sum, pi } from "lib/math";
alert("2π = " + sum(pi, pi))

These are named exports. You can also import the whole module and refer to it via its property notation.

 //------ main.js ------
    import * as lib from 'lib';
    console.log(lib.square(11)); // 121
    console.log(lib.diag(4, 3)); // 5

I lifted this example on modules from 2ality so check them out for more information.

Class Definition

You can now create more intuitive, OOP-style and boilerplate free classes. They are just simpler and clearer then the objects and prototypes that we are used to working with.

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

Promises

The last thing I want to cover is promises. The promise object is used for deferred and asynchronous computations. A promise can be pending, fulfilled, rejected, and settled.

Here is an example of creating a promise.

   var promise = new Promise(
        function (resolve, reject) { // (A)
            ...
            if (...) {
                resolve(value); // success
            } else {
                reject(reason); // failure
            }
        });

And this is how you might fulfill or reject.

   promise.then(
        function (value) { /* fulfillment */ }, function(reason) { /* reject */}
    );

You can also .catch rejections.

Future Reading

These are just a few new features you should expect in ES6. If you want you can already use a lot of them via an es6-transpiler like Babel. Frameworks like Ember and Aurelia already have this built in.

Want to learn more? Check out the links below.

Of course sign up for my mailing list and I'll keep you up to date on the latest in JavaScript, front-end frameworks and more!

The Best Online Courses on Learning JavaScript

Looking to take your learning a step further with online courses? Are you wanting to jump into ES6? I recommend the following courses from Udemy. This is an affiliate link, which means you get help support this blog at the same time! User code SUMMER757 to get 75% off!

Beginning ES6, The Next Generation of JavaScript

JavaScript for Beginners - Start to Finish, Quick and Easy

Comprehensive JavaScript Programming

Image Credit HTML5hub

6 New Features Of ES6