Understanding JavaScript ES6 Arrow Functions

Anonymous functions or arrow functions are a new ES6 syntax for writing JavaScript functions. Various surveys show that the arrow functions is the most popular feature that was introduced in ECMAScript 2015, among developers. There are few benefits which arrow functions bring to the table. Let me explain what exactly arrow functions are, how can they be used and what are the advantages they offer to developers over conventional JavaScript functions.

What are arrow functions?

“Fat arrow” functions, another name for arrow functions offer a more concise syntax for writing functions in JavaScript. They are written using the => token. These are very similar to lambdas in Python and C#. They don’t need the function keyword to be written and can also omit the return keyword.

How to write an arrow function?

Mozilla Developer Network has provided many ways/syntax of writing arrow functions. You can check them out here.

Now, let us see the differences between the functions we all have been writing in JavaScript and the newly introduced arrow functions.

Here is a small code snippet written using conventional JavaScript function.

traditional JavaScript function

Here is the same code snippet written using arrow function.

using arrow function

Notice how the code has reduced into half! But this code doesn’t have a return statement. If your function body consists of only a return statement with a single expression, then you can completely omit the return statement and directly write the expression without even writing the curly braces. By default, the only expression written after => will be evaluated and will be returned implicitly. Here is an example of how this works.

You can notice three immediate differences here. First, we have removed the function keyword in the arrow function. Second, because there is a single expression, the curly braces are also removed. Third, we even removed the return keyword! Isn’t this neat? ;)

This isn’t complete. What if there is only a single parameter to the function? You now have a choice of completely removing the parentheses. Here’s how.

this is awesome!

But that doesn’t mean you can remove the parentheses even there are no parameters and write something like this. That would be insane!

this is wrong!

You need to include empty parentheses if there are no arguments.

this is perfect.

There are few practices where the developers use an underscore instead of empty parentheses. It’s still a variable, but the one we aren’t using. Hence, it is called a throw away variable. Because, we are actually throwing it away without using it.

use of throw away variable

You can return an object using these functions. But, you need to put the function body inside parentheses to distinguish between syntax for curly braces of object and that of function.

Arrow functions are always anonymous

One important thing to note before using these functions is that they are anonymous; which means they are not named functions. Oh, what are named functions you ask? The ones we all have been writing all day long.

this function is named ‘add’

The function written above is named function. It’s named as ‘add’. Hence, the name named function.

If you are following closely, all the arrow functions I have shown you as examples doesn’t really have any name. Hence, they are anonymous.

Okay, here’s the thing with anonymous functions. It’s hard to debug them. To all the lovers of stack trace, whenever there is an error, in order to have a stack trace and know the exact line number of where the error has occurred, the called function has to actually have a name, which, an anonymous function doesn’t have. That means debugging will take a hit if you use anonymous functions. Don’t get me wrong, you can still have a stack trace when an error occurs, just that it doesn’t show any name of the function because it doesn’t have a name in the first place!

Even if you cleverly assign the function to any variable, it’s still not going to work. At least not as good as named functions do. So it’s very important to understand this trade off while writing your function either as a normal or an arrow function.

Where are arrow functions used?

The main advantage of using arrow functions is that it reduces the confusion surrounding the this keyword. In node.js, we write a lot of nested functions inside a function and there might be many cases where we need to bind the scope of the outer function with the function callback. In a code where there are multiple function callbacks or callbacks inside callbacks, it becomes extremely difficult for a developer to keep track of the right context of this. In JavaScript, every function will define it’s own this context. The common error we all do is using a this to access the variables inside a callback function, that are declared in the outer function. Unfortunately, the this inside the callback belongs to the callback itself and it doesn’t work as expected. The common way to get around this is to declare a that or self variable to store the required context and then use it inside the callbacks. Here’s how we do that.

Another popular way of doing this is by using the bind function and binding the scopes of two functions so that the variables in the outer scope are also accessible in the current scope of the callback.

But, the use of bind function drops the performance, in the sense that it is very slow when compared to using a that or self variable.

Arrow functions reduce this problem because they are able to retain the scope of the caller function in the called function so that you don’t need to use self or bind to begin with.

Then there comes readability. Arrow functions help to make code a lot more readable in cases such as chaining promises.

The functions such as bind(), apply() etc cannot be used on arrow functions. Even if they are used, they cannot change the this context of the arrow function; it will always remain the same value as when it was called. You can use a function expression to bind it to a different value though.

Also, unlike other functions, arrow functions cannot be used as constructors. If you use arrow function along with a new keyword it will throw an error as the arrow functions don’t have a prototype property.

If you want to get into even more fine details, then arrow functions cannot be used as generators (an error will be thrown, if you try using yield on them) as they are light-weight. It’s also worth noting that the implicit local variable arguments which is present in all the other functions and will enable the developer to write a function that can accept dynamic number of parameters (like printf in C language), is NOT present in arrow functions. So, no unlimited parameters folks!

Every feature of a language has it’s own advantages and disadvantages. And then there is the fact that we developers are human beings too and our tastes might differ. To each, their own.

Personally, I became a huge fan of arrow functions when they were announced in ES6 and I am as excited as I can get to use them everywhere where it’s possible and more importantly feasible. What about you?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.