ECMAScript 6 (also known as ECMAScript 2015) is the new, but not the newest (ECMAScript 7), version of ECMAScript standard and it’s based on ECMAScript 5.1. Since August 2014, ES6 is feature frozen. After publication process which will start in March 2015, ES6 will be finished in June 2015. Despite that ES6 is not finished yet there aren’t any good reasons to not use it today thanks to great tools like Traceur from Google or Babel. ES6 is solving many real-life problems which, as programmers, we are facing on a daily basis not only in browsers but also on the server side.

I’m going to give you an overview of some ECMAScript 6 features. This article will be updated accordingly and in parallel with the repository on GitHub. As the best way to learn new things is testing, the code in repository is shipped with Karma and Jasmine. It is possible to write ES6 and transpile it to ES5 thanks to Traceur Babel in this very case. Even though Babel is awesome tool it lacks of couple features e.g. Proxies (due to ES5 limitations). For better understanding which environment supports which features look at ECMAScript compatibility table.

Previously I was using Traceur, but after all I decided to migrate to Babel. Babel has better ES6 support in addition to that I encounter some minor configuration problems with Traceur. After Chrome update module unit tests have stopped passing. I consider Babel as a better and more reliable tool.

Take into consideration that the “final support” of your environment is the sum of compiler/polyfill and your browser or server. So, Traceur doesn’t support WeakMap but Chrome supports it well and thats mean you can use WeakMap in your code. Chrome is used by default with the configuration from repository, if you are using it too don’t forget about enabling experimental JavaScript flag.

You can also be interested in my presentation about ES6 features.

##Let

The let keyword is similar to the good, old var. The var scope is enclosing function or global while let scope is the block, statement or expression. The new behavior prevents variables from leaking out of the scope which is common bug for developers who came from statically typed languages like Java.

##Constants

Constants as you might expect cannot be overridden but also don’t protect object properties. When it comes to scope, constants variables acts like let.

##Arrow functions

Arrow functions are functions shorthand.

If you are familiar with CoffeeScript the arrow functions works the same as functions created with fat arrow (=>). Except minimalistic syntax arrow functions unlike functions share the same this with enclosing them code (don’t create a new scope).

##Default Parameters

Default parameters allow for assigning default value to a not specified arguments and let us leave parameter = parameter || default syntax behind.

##Classes

If you like it or not (like me), the ES6 class is only syntactic sugar over prototypes. In ES6 classes are very minimal and I don’t see any special benefits of using them instead of constructor functions, but still, extends looks cleaner than Child.prototype = new Parent().

##Destructuring Assignment

Destructuring Assignment lets us pull out specified values from array or object and save it to variables.

##Rest Parameters

Vardic functions is a common pattern for many languages e.g. Ruby, PHP (5.6+). It allows functions to have multiple parameters as array. It results in giving up using arguments object.

##Spread

Spread operator is an inversion of rest parameters. It splits up array into function parameters. Spread can be combined with default parameters as well.

##Symbols

Symbols are new immutable and unique data type. Symbols are neither primitives nor objects, they have their own type. It can be used as identifier for object properties including WeakMap. Optional name can be used for debugging and by Symbol.for method. Symbol cannot be used as a constructor.

It may seems that symbols are excellent for simulating private properties. Although symbols are unique they can by accessed.

There is also something called well-known symbols which can by used for awesome things e.g. iterators. We will talk about iterators in a moment.

##Enhanced Object Literals

Enhanced Object Literals bring more flexibility when defining object properties. Object properties now can be computed, shorthand, methods or gives access to __proto__. Also making super calls should be possible but it isn’t available using Traceur or Babel.

##Iterators

Iterators are traversable by for...of loop objects. Iterators are decelerated with Symbol.iterator and should return the object with the next method. Iterators are similar to generators but instead of yielding a value they explicitly return object which contains two properties. The done indicates whether iteration is finished and value is just the return.

##Generators

(Not)Objectively generators are outstanding! They deserve for their own article(s) (just like Promises) but I promised you it will be just an overview. Generators are decelerated like normal functions but there must be a * after function word and generators are yielding values.

Do you see similarities to iterators? There is also a yield* which tells us I’m yielding another generator!. I like it very much, but I’m not sure how to use it in real-life example. Let me now if you figure out something more practical than this one.

The method next actually accepts an argument which will be returned by yield.

How awesome is that!

If you would like to now more about generators check out Kyle Simpson’s series about ES6 generators.

##Proxies

Proxy can teach an old object new tricks. Proxies changes the fundamentals of how the object works as a result of which it’s almost impossible to write a polyfill to simulate proxy mechanism. Check the native Proxy support. Proxies make the code a lot more cleaner. Just simple assignments instead of custom setters.

Set and get aren’t the only traps. Check out the repo for more examples and Proxy at MDN for full list of available traps.

##Numeric Literals

Numeric literals make working with binary and octal numbers a piece of cake.

##Template literals

Template literals allow for using variables in stings avoiding awful var1 + “ ” + var2 for something so simple like putting space between them. It’s available for a long time in different languages like Ruby or PHP. It’s called string interpolation.

What is more, template strings can be tagged. This more advanced form of templates let us modifying an output through tag function.

##Promises

Promises are a huge step forward in JavaScript. Promises seams natural when it comes to asynchronous tasks especially when the one task depends on the result of another. We known how to react to some specified even, but we don’t now when this event will be fired. There is a lot of implementations of this pattern like $q in AngularJS which is based on Kris Kowal’s Q or rsvp.js.

If you are looking for more examples check out promices.js from the repository.

##Modules

Modules allow for convenient using dependencies thanks to asynchronous loading and explicit exports. We can then load whole module or import specific values.

Modules loading works both on the server side and in the browser.

If you are interested in modules Webpack, RequireJS, Browserify and jspm.io are worth looking.

##Map, Set, WeakMap and WeakSet

Map, Set, WeakMap and WeakSet are new data structure. Well known from e.g. Java and quite similar to each other but, as usual, the devil is in the detail.

Map is a simple key/value map. Objects, symbols and primitives (any value) can be used as keys.

Set stores unique values of any type.

WeakMap is a collection of key/value pairs. Keys are objects and values are arbitrary type. Is like Map at first glance. The difference is WeakMap keys must be an object and aren’t enumerable.

WeakSet is the the simplest data structure of all. It stores store weakly held objects.

Presentation

If you are interested check out also my presentation about ES6 which I gave on Bydgoszcz Web Development Meetup.