Bleedin’ edge JavaScript: ES6/ES2015, transpiling and an arrow function example
Of late, I’ve been updating my JavaScript knowledge and thought I’d share some tidbits and goody gumdrops. Here we go.
If you’re already knee-deep in ES6, this article is not for you. If you’re already proficient in JavaScript and are wondering what the ES6 fuss is about, this article is definitely for you :)
What frickin’ ES6??
ES6, ECMAScript 6, ES2015, ECMAScript 2015.. I’m sure you’ve already heard these terms being whipped around or seen them in job ads of companies that want to seem “disruptive”. Well, maybe not, but regardless, those terms are confusing at best.
So yeah, JavaScript is steadily evolving just like everything else. The confusing bit is that the naming conventions have changed of late. Read on.
Why do I care about ES6?
Well, you care because some guys are hard at work to make your Javascript development work more productive, your code more intuitive, manageable and readable, reducing headache and making you look cooler to your boss and your clients. Why not reap the benefits? Look at these features to get an idea.
New stuff is being added to JavaScript continuously by a group called ECMA using an approval process for each feature. That’s where the name ECMAScript comes from.
Guys from Google, Microsoft, Apple and the Mozilla foundation read the ECMA’s memos and debate about what cool things Chrome, IE, Firefox and Safari should support next. I’m suspecting that from their perspective, they‘re asking questions like “will consumers increase their preference for our browser over others, thus exposing them to our mind control techniques through an enhanced, personalised browsing experience if we support [cool functionality]?”. From my perspective, I don’t know about you but I just wanna work less and more effective :)
Weird naming conventions of ECMA and some history
As an example, ES6 is also called these things, and all of them mean the exact same thing:
- ECMAScript 6
- ECMAScript 2015
- ES2015
This will hopefully become more consistent in the future. Here’s a short history of the ECMA standards evolution so far. Not that anyone gives a hoot :) Anyway, on to the cool stuff: transpiling and the arrow function.
Transpiling with Babel
Now that you know browser support for bleeding edge JS stuff is inconsistent, but you’ve seen a cool ES6 feature you want to use, you might be frustrated because browsers haven’t kept up with the cool kids? Not to worry, Babel’s got your back.
Eventually all browsers end up supporting all the features introduced in new ECMAScript standards, but in the meantime you can get away with using these new functions by something called transpiling. Not to ne confused with compiling. Whereas compiling takes your code and creates something entirely different and unrecognizable (usually to binary from text), transpiling takes your code and translates it to a different dialect of that same language. Anyway, what you need to know is that
the current thingamajingy capable of transpiling bleeding edge to browser-supported Javascript is Babel.
Just go and test the playground and see for yourself what coolness you can get browsers to support with Babel. Then, read the setup section of the docs and discover that Babel is supported by a thousand build systems and frameworks such as Gulp, Grunt or Webpack.
Noteworthy about Babel is also that it translates something called JSX into Javascript as well. Outside the scope of this article, but read about JSX here.
ES6 by example: Arrow function and no prototype
Okay, so ES6 has way more features than this one below, but I’m hoping that as one example of many, you can get an idea of the difference ES6 makes.
There are two benefits to arrow functions.
First, they are less verbose than traditional function expressions.
Compare the two versions below:
Second, they pick up their “this” from their surroundings. Looking at this example from Exploring ES6 by Axel Rauschmayer. Not just using arrow function to simplify things, but you don’t even need to use prototype anymore.
See below:
Well, that’s it for me. Hopefully this post made ES6 less intimidating.
What cool new features have you discovered in ES6? Let me know in the comments.
