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.
You can also be interested in my presentation about ES6 features.
- Arrow functions
- Default Parameters
- Destructuring Assignment
- Rest Parameters
- Enhanced Object Literals
- Numeric Literals
- Template literals
- Map, Set, WeakMap and WeakSet
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
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.
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.
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.
If you are looking for more examples check out promices.js from the repository.
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.
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.
If you are interested check out also my presentation about ES6 which I gave on Bydgoszcz Web Development Meetup.