Learning ES6 - Arrow Functions

3 min read.

One of the key features in JavaScript is the ability to pass around functions as variables. The use of this feature is quite common in most JavaScript Libraries and Frameworks, as well as in the language itself. If you have written something in for example jQuery or plain JavaScript, then you have most likely written a callback before. A callback is actually just a function you pass around and call when some task has completed.

// Callbacks using jQuery
$('button').click(function callbackFn(event) {
    return event.preventDefault();
}

//Callback function used when filtering an Array
var numbers = [0,1,2,3,4,5,6,7,8,9];
var evenNumbers = numbers.filter(function evenNumbers(num){
	return num % 2 === 0;
});
console.log(evenNumbers); // => 0 2 4 6 8

In the example above, the callbackFn function gets called whenever the click event gets triggered. We can also see in the second part of the example that a callback is being used for language specific objects as well. In this case we are supplying a function to the filter method on the array, in which we supply the filtering criteria.

We can see how cluttered it can become to write these kind of functions. Sometimes when it gets too messy I just define the callback function separately.

function evenNumbers(num) {
	return num % 2 === 0;
}

var numbers = [0,1,2,3,4,5,6,7,8,9];
var evenNumbers = numbers.filter(evenNumbers);
console.log(evenNumbers); // => 0 2 4 6 8

This makes the code a little easier to understand but it’s not optimal, it still takes up a lot of space. What if we still could use the inline style and still make it easier to read? That’s where the arrow functions comes into play. If you have done any work with CoffeeScript, the syntax should be familiar to you. The example above would be rewritten into something like this:

var numbers = [0,1,2,3,4,5,6,7,8,9];
var evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // => 0 2 4 6 8

Short and still easy to understand, right?

There are a few things that need to be taken into consideration when using arrow functions:

  • If the function takes no parameters or more than one parameter, then the parameters must be wrapped in parenthesis like the following () => ... or (a,b) => ....
  • In the example, the function body is limited to one line. In those cases you can omit the curly brackets and there is no need for a return statement. In any other cases you need to supply them, like so:
var numbers = [0,1,2,3,4,5,6,7,8,9];
var evenNumbers = numbers.filter(num => {
	var rest = num % 2;
    var isEven = rest === 0;
    return isEven;
});
console.log(evenNumbers); // => 0 2 4 6 8
  • The arrow function is always an anonymous function. However, it will inherit the this variables from its enclosing scope.
  • The arguments object is not available within the arrow functions. As a substitute, you can use the rest parameter syntax instead. Something we will go further into, later in this post series.
  • Because { conveys the starting of a block in the arrow function, we need to wrap any object we are returning with parenthesis for those one line arrow functions.
var newFruit = fruits.map(fruit => {});   // not working
var newFruit = fruits.map(fruit => ({})); // ok

I don’t know about you guys, but I really like this new syntax. It’s really useful for those small callback functions that should be easy to understand. For longer callback functions I might still do as before and define them separately. What do you guys think about the new arrow functions? Leave a comment below!

Previous Posts

If you liked this post checkout some of the previous posts in this series:

comments powered by Disqus