What are arrow functions?
How to write an arrow function?
Mozilla Developer Network has provided many ways/syntax of writing arrow functions. You can check them out here.
Here is the same code snippet written 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.
But that doesn’t mean you can remove the parentheses even there are no parameters and write something like this. That would be insane!
You need to include empty parentheses if there are no arguments.
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.
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.
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?
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?