ECMAScript 6 or ES6 is the latest standardized version of JavaScript. The exciting thing is it’s been approved today by the standards body and that means broader browser support is coming. ECMAScript 6 has been in the works for some time now – it was first announced in 2008. An ever increasing amount of JavaScript developers have been preparing for ECMAScript’s launch, and soon it’ll be unavoidable. It’s also worth noting not all versions of ECMAScript will take this long to release. They plan on doing smaller, yearly releases, so now’s a good time to get up to speed.
Many developers have switched to ECMAScript 6 in development and use a transpiler, a ES6 source to ES5 source compiler, to publish their code to browsers and environments that don’t support ES6 features yet.
Let’s see some of the main ES6 features you can use today using a transpiler and will be available in a browser near you soon!
Contents
Object Literals
Take this common JavaScript example:
When you call the createPerson function it creates an object literal with the keys of firstName and lastName.
In ES6 you can do the shorthand of:
Classes
JavaScript is a prototype-based object oriented language which means to describe something like a Song in a hypothetical playlist application we’d need to write something like this:
ES6 has introduced a class syntax which looks like other languages. However, it’s still prototypal underneath:
Default Values
In the previous example, I showed you how to write a class in ES6, where I set the isPlaying property to be false. While this guarantees isPlaying is false, how about when I want to create an instance that’s playing immediately?
ES6 introduces the concept of default values to any function or method call.
Here’s an updated example with the isPlaying set to false:
If isPlaying is given a value when the object is created it will be false, alternatively you can pass in true to override it.
Inheritance
Inheritance has been simplified too. There were a number of things you had to remember to do, for example calling the call method on the constructor you’re inheriting from, and you have to wire up the prototype chain. You’d have to write something like this:
Now you can use the extends keyword and super to wire everything up with the “superclass”.
Arrow Function
this can be tricky. Especially, in the context of functions within functions.
Let’s look at the following example:
I want to use a sendEmail function when a button is pressed and I pass in the this.email it should be the email from the instance of the contact, but this in that context is the button. Some people assign this to a variable outside the scope like this:
There is a new way to create functions, using an arrow, like this:
It’s also useful to create simple functions inline too.
You don’t need to include parentheses for single parameter functions either.
Note it also returns aren’t required.
The let Keyword
The let keyword declares a local variable in the block scope. Normally if statements don’t have scope, but now they do with let. This can be helpful when you want to do lots of work on a variable and don’t want to pollute another scope with more variables than they need.
This also works for loops too.
The const Keyword
A const or a constant declaration is where once, the variable is set you can’t change it. It’s read-only.
However, properties on object’s aren’t protected so you could do something like this:
Template Strings
Concatenating strings are a pain in JavaScript. As the length of your string increases, your pain increases too.
Whether you do it like this:
Or like this:
It’s really annoying, repetitive and (human) error prone.
With ECMAScript there’s a new way using template strings. A template string starts and ends with a backtick (`). Each variable that you’d like inserting into the string is wrapped in a ${}. Like so:
String templates can also be multiline too.
Destructuring
Destructuring is an awesome way to extract values from arrays and objects.
Let’s take a look at an example for an array being destructured.
var [first, second, third] = ["Andrew", "Craig", "Kenneth"];
So first is "Andrew", second is "Craig" and finally there is "Kenneth".
For objects, like this:
This is the equivalent of:
You don’t have to use the same name as the key, you can do something like this:
Where first is "Andrew" and last is "Chalkley".
This can be helpful when you know you’re getting an object as a parameter in a function call.
The getFirstName(person); line will return “Andrew".
Rest & Spread
Let’s say we have an array of runners and if you don’t place first, second or third, you don’t get any medals, you’re losers. You can use the rest prefix of ... to extract the rest of the arguments from a function call. On the other side, we can use the spread prefix of ... to spread out array into all the possible arguments the function call could have.
Mary won, Andrew came second and Craig was third. Unfortunately for ["Michael","Kenneth","Dave"] they were losers. Better luck next time guys!
Conclusion
We’ve just scratched the surface of the major syntactical changes and improvements in ES6. ES6 is backwardly compatible so you can still write how you would today. But there are maintenance and productivity advantages with the new syntax. There are new native object types in ECMAScript 6. I’ll write about those another time.
If you’re wanting to try these examples yourself or try it out in the browser you can visit Babel’s “Try it out” section. Babel is a transpiler you can use to convert ECMAScript 6 to ECMAScript 5. You can install it through NPM and start using ES6 in your projects today!