ES6 is Cool

By nathanharper

Monday, Mar 9, 2015

I’m a bit ashamed to admit that I’ve never paid much attention to the changes coming with ES6 because I generally don’t like to add extra unecessary compilation steps to my applications (ES6 isn’t widely supported yet), and yeah, it might be the future of JavaScript but that’s something I can just think about in the future, right?

The examples used so far in React Week have made heavy use of ES6, and it’s really been tempting me to start giving it a look for our own technology stack.

Destructuring

We do not use JSX in our application. I don’t have anything against it personally, as I said earlier I just don’t like extra compilation steps, and it complicates working with Jest and JSHint. Of course, getting rid of JSX led to some other issues in our app, mostly concerning readability and verbosity. Whereas in JSX you are able to use components as though they are XML elements, the pure JavaScript DOM builder version looks more like this:

{% highlight js %} React.DOM.div(null, React.DOM.h1(null, ‘Header’), React.DOM.p(null, ‘Hello World!’) ) {% endhighlight %}

Not beautiful. We tried to redefine React.DOM to something like RD, which is better but still kind of unpleasant compared to the XML version. Alternatively, you can define all the element types you need at the top of the file, but then things start to get messy fast.

{% highlight js %} var React = require(‘react’);

var div = React.DOM.div; var h1 = React.DOM.h1; var p = React.DOM.p;

module.exports = React.createClass({displayName: ‘MyApp’, render: function() { return ( div(null, h1(null, ‘Header’), p(null, ‘Hello World!’) ) ); } }); {% endhighlight %}

ES6 has a concept called destructuring, which allows you to easily pick out just the pieces you need from a JavaScript object. So instead of the above, your component files can just start off with a nice, simple one-liner.

{% highlight js %} var React = require(‘react’);

var { div, h1, p } = React.DOM;

module.exports = React.createClass({displayName: ‘MyApp’, render: function() { // … } }); {% endhighlight %}

“Fat Arrow” Functions

ES6 introduces much more concise “fat arrow” functions to JavaScript. In ES6, this…

{% highlight js %} var add = function(x,y) { return x + y; } {% endhighlight %}

becomes this.

{% highlight js %} var add = (x, y) => x + y; {% endhighlight %}

The coolest thing about arrow functions, in my humble opinion, is that it lexically binds the this value. Our React application is littered with messy code like this:

{% highlight js %} this.state.users.map(function (user) { return }.bind(this)); {% endhighlight %}

Yeah, you can also technically pass this as the second argument to map, but it’s still verbose, easy to forget, and not explicitly obvious what’s going on. Also, personally, I’m sick and tired of typing the word “function” a thousand times per day. Arrow functions automatically bind this for you, so you can write:

{% highlight js %} this.state.users.map((user) => { return }); {% endhighlight %}

Javascript is Like Ruby Now

OMG STRING INTERPOLATION

{% highlight js %} console.log(${user.firstName} ${someFunction(user.lastName)}); {% endhighlight %}

MULTILINE STRINGS

{% highlight js %} console.log( ${user.firstName} ${someFunction(user.lastName)} ); {% endhighlight %}

NO RETURN STATEMENT!!! (when you write arrow functions with enclosing parentheses rather than curly braces)

{% highlight js %} this.state.users.map((user) => ( )); {% endhighlight %}