If you’ve been around the JavaScript block for any length of time, you’ll know that the speed of associated change can be dizzying. New frameworks, libraries, and tooling sets pop in and out of existence constantly, and it can often get downright tiring trying to keep up with the latest month’s hotness when starting a new project. However, on the specifications side, change tends to come at a more stately pace. Over the 18 months since it was finalized, the sixth edition of ECMAScript (ES6 to its friends) is now firmly in play as a standard, and it’s very much time for developers to get familiar with its use.
In this piece, we'll step through the basics of the latest iteration of the language, cover what's new and why it's important, and give you some useful resources to get you up and running quickly with ES6.
A brief introduction to ES6
As its name suggests, ES6 is the sixth iteration of ECMAScript – the standards specification behind JavaScript (and a number of other languages).
There’s a little potential naming confusion to get out of the way before we go any further, however. This version was originally known as ECMAScript 6 (hence the ES6 part), and subsequently renamed to the somewhat clunky-sounding ECMAScript 2015 (ES2015). ES6 is the shorthand name that’s stuck around.
Launched in mid-2015, ES6 arrived at a time when JavaScript had expanded far beyond its initial roots, and was well on its way to becoming the lingua franca of the web that it is today.
As with previous versions of the spec, the changes introduced in ES6 are, in many ways, an attempt to get the underpinnings of the language up to speed with standards already set by other languages such as Python and Ruby.
Why now is the perfect time to get on board the ES6 train
Scarred by many years of dealing with multiple devices and browsers, front-end developers are naturally cautious about piling into new versions of languages when they arrive hot off the presses.
There are two particularly good pieces of news that can help you ease into ES6 gently:
- It’s a superset of ECMAScript 5. This means that backward compatibility with your existing code should be pretty much bulletproof. You’ll be taking advantage of new features rather than having to worry about ripping apart your existing projects.
- We’re nearly there with browser support. As a detailed compatibility breakdown shows, this is a moving target, but vendors are definitely going in the right direction. There are also smart options available for mapping ES6 to ES5 in production using ‘transpiling’ and ‘polyfilling’.
Long story short, with browser support inching towards more or less 100 percent, now is the perfect time to dive into ES6 as a developer if you’ve been putting it off so far.
The key features of ES6 at a glance
ES6 brings substantially more goodies to the table than we have space to cover in depth here, but the following highlights should be enough to encourage you to explore the full feature set at your own pace:
- Constants: The introduction of immutable variables brings a welcome dose of certainty to the language.
- Default parameters: Developers can finally clearly indicate defaults for function parameters in a standardized manner.
- Classes: JavaScript’s prototype-based origins are being brought much more in line with the type of OOP developers are familiar with from other languages.
- Modules: While workarounds for this have long existed, ES6 arrives with proper native support to help keep your code cleaner.
You’ll also find a generous heap of syntactic sugar spread throughout the specification to make your day-to-day dealings with the language a bit more pleasant. Check out the ES6 breakdown from Webapplog for more in-depth details on all of the above.
Hitting the ground running with ES6
Naturally enough, there are many ways to skin this particular cat, but we’d suggest the following sequence for those who are at the beginning of the road:
- Start by sitting down and studying a detailed breakdown of all the major ES6 features. Luke Hoban’s overview on Github is an excellent starting point.
- Bookmark Ralf Engelschall’s handy list of ES6 features, which includes ES5 comparison points throughout.
- Get on board with Babel for transpiling so you can start authoring ES6 today and outputting automatically to ES5. There’s a nice breakdown of both Babel and Prepros (a GUI alternative) over at neoelemento to walk you through the basics.
- Finally, commit to some actual formal training. ES6 will be helping you pay the bills for many a year to come, so it’s well worth the investment. ES6 for Everyone is eminently affordable and will have you quickly and confidently using all major features.
By approaching things in a structured sequence as above, and throwing an appropriate mix of hello-world and greenfield projects into the mix, you should be off to the races with ES6 in no time at all.
Conclusion
As we’ve stressed throughout the piece, now is an excellent time to start tackling ES6 seriously as a developer. Full browser support is very nearly there, smart solutions exist to help you output to ES5 with a minimum of fuss, and the new features available will make your code both cleaner and more pleasant to write.
Let’s recap the main sequence you’ll want to follow:
- Get familiar with the background to ECMAScript specifications.
- Briefly review some standout new features in ES6 to get a flavor for what’s in store.
- Follow our simple four-step guide above to hit the ground running.
