- Part 1: Using ES6 Today
- Part 2: Block Scoping
- Part 3: Destructuring
- Part 4: Parameters and Spread
- Part 5: Modules and Classes
- Part 6: Collections
- Part 7: Proxies
- Part 8: Iterators and Generators
- Part 9: Arrow Functions
- Part 10: Other useful bits
What is ES6?
The draft ES6 specification is updated regularly and is a great way to really get to grips with the details of the language. If you’re interested in the direction the spec is taking, the es-discuss mailing list and its associated summary Twitter feed are the places to go, along with the ES Wiki.
ES6 in the browser
For the best support you’ll probably want to be running the unstable release channel of your favourite browser e.g. Chrome Canary or Firefox Nightly. This means you’ll have access to the latest features as soon as they’re implemented, rather than having to wait for a public stable release.
ES6 in Node.js
This section would be better titled “ES6 in V8”, but since Node.js is by far the most popular platform running Google’s V8 engine, I’ll focus on that.
When you run Node.js you can specify numerous options inherited from V8. Use the
--v8-options flag to display the full list. You will notice that there’s a
group of V8 options prefixed with
--harmony_. These options can be set to opt-
in to various ES6 features:
I recommend using the
--harmony flag to opt-in to all available ES6 features
(you may have noticed from the above snippet that this option does not enable
typeof semantics. This is because the proposal has since been
rejected from the ES6 spec).
That doesn’t mean you can’t start preparing your codebase for the future though. Traceur is a project by Google designed to take ES6 code and give you back ES5 code that’s compatible with modern browsers in their default settings (the settings your users will have). Traceur doesn’t support all of the features specified by ES6, and some of the implementations differ slightly from the spec, but the project is very active and features are updated on a regular basis.
page to automatically transpile the contents of
tags. This usage is not recommended because the browser will be doing a whole
lot of unnecessary extra work. A better solution is to integrate the
transpilation process into your build. As Grunt has become the de facto
A Grunt plugin for Traceur is already available and is actively
developed. You can install it in the usual way (with
npm install --save-dev
grunt-traceur) and easily integrate it into your existing Gruntfile:
The above example will take all *.js files within the es6 directory, transpile them to ES5 and place the output files in the build directory.
Here’s a very basic example demonstrating just a few of the ES6 features you’ll learn about throughout this series. You can have a look at the transpiled code in action on JSBin.