In this short segment of our guide to ES6, you’ll learn how to use the Arrow function syntax to create cleaner code.
We will be referencing the example we wrote in the previous guides. You can read the first and second parts of this blog series here:
Arrow functions
Our ES6 guide is all about making code simpler and more readable, so let’s talk about ES6’s new Arrow function syntax. Arrow functions let you write functions with straightforward syntax. Arrow functions look like parameters => expression. The result of expression is then returned. This skips writing both function and return. That may not seem like much, but it makes writing functions and callbacks so much clearer.
Let’s take a look at a few quick examples.
// ES5 way
var doubleES5 = function(x) {
return x * 2;
}
var addES5 = function(a, b) {
return a + b;
}
// ES6 way
var doubleES6 = x => x * 2;
var addES6 = (a, b) => a + b;
As you can see, writing arrow functions is a breeze. If you need to do more work in a function, then you can enclose the right side in curly braces to make a regular block expression. In this case, the return is no longer implicit and does need to be called.
var doWork = (x, y, z) => {
// ... do stuff ...
return someResult;
}
Caveat
One thing to note is that arrow functions do not create their own context, so this inside of an arrow function is the same as the enclosing scope. While on the whole, this makes function code more clear, this can lead to trouble if you’re not expecting it.
var scope = this;
var container = {
classicSyntax: function() {
console.log(this === scope); // False!
},
arrowSyntax: () => {
console.log(this === scope); // True!
}
}
container.classicSyntax();
container.arrowSyntax();
You can learn more about arrow functions at this great article on Mozilla Hacks.
Cleaning up our code
Now we’ll finish tidying up our code with the new arrow function syntax. Follow along at jsbin here.
Arrow functions are particularly useful for cleaning up Promises and then blocks, so we can shorten getJSONPromise even more.
function getJSONPromise(url) {
return fetch(url).then(response => response.json());
}
I’ve similarly updated the rest of the code to use arrow functions, which you can see in the finished code.
Browser support
Arrow functions are available in all modern browsers, with the exception of Internet Explorer and Opera Mini.
Conclusion
Arrow functions is just another way the evolving web platform is making coding simpler. When the constructs you use are streamlined, then your code itself will be clearer and understandable.
In the next episode of our series on ES6 we’ll cover a few more advanced features of the platform.