A friendly reminder to start thinking about ECMAScript 6

I must admit I have quite a love-hate relationship with JavaScript. Some days I’m enjoying its ridiculous flexibility while other days I am annoyed by its tolerance for any silly mistake I may make. Although JavaScript has some serious design warts, the ECMAScript 6 standard is here to improve upon the language. I welcome the new features and I am glad to hear that the standard will be finalized sometime this summer of 2015.

As you may know, it will be sometime before everyone will able to write straight up ES6 but luckily we have transpilers like Babel and Traceur to compile ES6 code into ES5.1 (the current standard JavaScript derives from). This is really exciting as you can write code using almost all of the new ES6 features today and it will still work on all browsers. These transpilers are pretty great and I think we’ll be using them for a while until ES6 gets spread around. Therefore, I encourage anyone hoping to improve their JS code base to consider giving ES6 a try. I use Babel personally, along with Gulp as my build system. It’s seriously sweet and it allows me to write more expressive code than I could in ES5.1.

Okay, so if I haven’t convinced you to check out ES6 yet then I’ll overview some of my favorite new features. I won’t go over every single one, just my personal favorites. A better overview of the many new features in ES6 can be found here.

Classes (Syntax Sugar)

This probably many people’s favorite addition to the standard and it is mine as well. ES6 introduces a new syntax for creating classes, basically a blueprint for object instances. Now don’t worry, this is just syntax sugar. You still have the flexibility and efficiency of prototypes, this new syntax just comes in handy when you just want to make a dang class!

Here’s an example:

ECMAScript 5.1

ECMAScript 6

 

I think the standard did a great job with the class syntax sugar. It’s very simple and the syntax is thankfully not too verbose. This should make many code bases more expressive.

Fat arrow functions

Another great feature is the new arrow function. JavaScript these days is always dealing with callbacks and anonymous functions everywhere. The fat arrow is here to save some key strokes and keep the code looking pretty. Now this isn’t just syntax sugar though, an arrow function has a lexical this. In other words, it captures the this of the context of which the arrow function was created in. This should hopefully save a few headaches of dealing with this and we should see less var self = this; in code bases.

Example:

 

let and const (Block scoping and Constants)

This is also a great addition to the language. Traditionally you would create a new variable in JavaScript with the var keyword. The variable will then be scoped to the function. let, however, creates a variable in block scope. This is neat because now we can bust out variables in if statements or loops without worrying about them being modified by something outside of the code block. I also find let allows for much more readable code than var. It’s worth noting that let is NOT hoisted to the top of the function, unlike variables created by the var keyword.

Additionally, we have the const keyword. This will make a constant value that cannot be changed. That’s pretty sweet and should give us programmers less headaches.

 

Conclusion

ECMAScript 6 turned out to be a great revision for JavaScript and we can all start developing in it today using transpilers. Many large websites have already started using it, so it sounds to me it’s ready for prime time. At the very least, get some time in the weekend and try it out for yourself!