Approaching the conversion of CoffeeScript to ES6

ES6(ECMAScript 6 or a.k.a ES2015) is JavaScript's first update to the language since 2009 and makes compilers like CoffeeScript no longer needed.

Now that JavaScript is catching up with the rest of the world, taking advantage of its new tricks is not too hard coming from CoffeeScript.


Before jumping into the new syntax wins, it is important to note, at time this article was written, ES6 is not supported by all browsers. To take advantage of the newest features, the Babel plugin will help to transpile ES6 to today's ES5. Check out the Babel documentation for details on that.

The contributors have made it clear they would like to make all future iterations of JavaScript available today and have a popular portion of the community convinced this is the way to stay up to date with new features in JavaScript going forward.


CoffeeScript prides itself with the ability to leave off variable assignments, which makes this first feature hard to compare directly to CoffeeScript, but knowing the difference between let and var can be helpful when converting CoffeeScript to ES6.

The let keyword actually works the same as var except that it is bound by the lexical scope, which means you can only access the let within the bounds of the closure's it was written in. vars however can be hoisted in the global scope unintentionally.

lets are the new vars

*example inspired by this Stack Overflow post

Keeping the let's scope within the function prevents potential memory leaks and unintended variable assignments.

Fat arrows =>

The new => is very similar to the => in CoffeeScript and with the addition of some curly braces will work similarly.

One key difference with => is that this has lexical scope, which means the surrounding context of the function is inferred on the inside of the => function(more details on that here).


i.e. import/export

export replaces the old modules.export and comes with the key word default for function imports without destructuring (see below).


Destructuring is another similarity with CoffeeScript. ES6 does give you the ability to destructure modules. I use destructuring all the time now when pulling out methods from libraries.

Template Strings

Template strings are great if you are used to string interpolation in CoffeeScript.

Luckily the ECMAScript 6 team had this in mind.

That's the basics, but to find out more general tips on ES6, check out ponyfoo's article on the subject here.

Why Switch?

It's apparent that ES6 is not too far off from what you get with CoffeeScript and actually requires the addition of variable assignments, {}, () and ;s.

What you currently don't have with CoffeeScript is the weight of the JavaScript community working to improve the language as a whole.

If you are looking to implement the latest features in the language, ES6 is definitely the direction you want to migrate towards.