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.
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 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 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 allow for assigning default value to a not specified arguments and let us leave parameter = parameter || default syntax behind.
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 lets us pull out specified values from array or object and save it to variables.
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 operator is an inversion of rest parameters. It splits up array into function parameters. Spread can be combined with default parameters as well.
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 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.
(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.
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.
Numeric literals make working with binary and octal numbers a piece of cake.
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.