Arrow Functions

Javascript is a very function-heavy language. Functions are one concept that you must understand in order to be a Javascript developer. If you aren’t already familiar with functions in Javascript, they are similar to a set of instructions for the program to follow. In this blog post, I will assume you already understand how to define functions in the "vanilla way.”

Arrow functions are incredibly useful. They can make your code concise. Additionally, there are many variations as to how you can write them. Arrow functions work well with higher order functions, such as “map”, “filter” and “reduce.”

The main benefit of arrow functions is a short syntax which most of the times increases code readability.

Using arrow function for "fetch"
As a developer, when working on the front-end you may need to "fetch" data from the back end and bring to front. For these cases of changing data from both the back end and front end, arrow functions are key for keeping our code concise.

Before I provide examples of arrow functions, it's important to illustrate the main differences between regular functions and arrow functions.

1. Syntax - A developer can get the same result as regular functions by writing a few lines of code using arrow functions.
2. Arguments binding - Arrow functions do not have arguments binding.
3. Use of this keyword - Unlike regular functions, arrow functions do not have their own "this" keyword.
4. Using a new keyword - Regular functions created using function declarations or expressions are constructible and callable. They can be called using the new keyword. However, arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.
5. No duplicate named parameters
Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode. However, we can use duplicate-named parameters for regular function in non-strict mode.

See below for an example of a normal function versus an arrow function.

normal Function 
var multiply = function (x,y) {
return x*y;

 arrow function 
var multiply =(x,y) => {return x * y};

 or 
var multiply = (x,y) => x*y;

Here are a few examples of how you can write an arrow function.

In the first example below, regardless of whether you put “return” or don’t put “return,” it will still return an expression as long as there are no curly braces.

#  syntax
(param1,param2) => expression
(param1,param2) => {return expression;}

In the second example below, parentheses are optional when there is only one parameter.

(singleParam) => {statements}
 singleParam =>  {statements}

However, for functions with no parameters, parentheses are required.

() => {statements}
() => expression 
() => {return expression}

Whenever you want to return an object, you must always put the object in parentheses.

var func =() => ({foo:1});

I'm sure the question comes to mind: When should we not use the arrow function?
An arrow function doesn't have its own "this" value and the arguments object. Therefore, you should not use it as an event handler, a method of an object literal, a prototype method, or when you have a function that uses the arguments object.

Conclusion
To summarize, arrow functions are a pretty handy tool to have as they can make coding more efficient by truncating several lines of code.