ES6 - JavaScript Evolved

Chris is joined by Blake Williams for a discussion about ES6, the collection of proposed enhancements and updates to the JavaScript standard.

This is a big deal since the last update was in 2009, and the updates do a great job of cleaning up some of the rougher edges in JavaScript.

The babel site has a great overview of the features provided as part of 2015. There is also a great series of articles on the Mozilla Hacks blog about ES6 in Depth. Highly recommended if you want to dive deeper on any of the features discussed in this video.

A language by any other name

We're all programmers here, so let's discuss naming.

ES6 expands to ECMAScript 6.

ECMA expands to the European Computer Manufacturers Association. This organization maintains a specification known as ECMAScript. JavaScript as we know it is an implementation of this specification.

It might be helpful to think of ECMAScript as being a set of blueprints that JavaScript interprer creators then implement.

ES6 refers to the sixth major version of the specification. Currently, most JavaScript interpreters support ES5.

Recently, ECMA decided to move away from major version numbers like 5 and 6, and instead name its versions after the year of their release. Thus, the current version at publication time is ES2015, which was previously and commonly called ES6.

ES6 == ES2015 #=> true

For further reading, you might enjoy this ES-Discuss Discussion around name change to ES2015.

What about Coffeescript?

Until recently, it was a fairly standard thoughtbot practice to use CoffeeScript.

We felt this was a nice step forward over standard JavaScript. However, with the advent of ES6, we're finding that many of CoffeeScript's benefits and features have been added to the core language, and we thus pefer to write ES6 directly.

You can read the pull request where we changed our guideline for some good discussion of the topic.

How to use ES6

Since most browsers don't support ES6 directly yet, we use a compiler to convert the code into ES5.

Our preferred compiler for this task is Babel (formerly known as "6to5"). ES6 goes in, ES5 comes out, executable in virtually all browsers.

You can use babel in a Rails app by adding the sprockets-es6 gem.

Tour of features

For more detail on all these features, check out the great tutorial on Babel's Learn ES2015 page.

Scoping w/ let & const

const is a nice tool for preventing a variable from being rebound to a new value.

Big caveat: it might not do what you'd expect. Since JavaScript is still inherently mutable, the underlying object that your variable points to can still change.

Let & Const Example

Arrow functions

A nice shorthand for short, (often anonymous) functions.

Arrow Functions Example

Template Strings

Finally! Interpolation for strings in JavaScript.

Template String Example

Default, Rest & Spread

Defining functions with default arguments, rest parameters, and spread (much like Ruby's splat operator).

These features mean there's probably no need to touch the arguments object anymore.

Default, Rest, & Spread Example

Destructuring

Destructuring allows binding using pattern matching, with support for matching arrays and objects.

Destructuring Example

Module System

This is a fairly substantial change to how JavaScript works, and is a welcome change.

Gone are the days of one giant, global namespace. You can now specify exactly what data/functions you'd like to import or export for each module.

• Great intro to Modules in the Babel overview.
• Real world Module example from the Redux examples.

The Zen of Python

Other Enhancements

There are many more features in ES6 that we haven't covered here.

If any catch your eye, check them out in Babel's Learn ES2015 tutorial.

• Promises
• Classes
• Symbols
• Maps & Sets

Conclusion

ES6 is a big step forward for JavaScript, and brings many useful features and ideas to the language.

Check it out on your next project!