ES6 Fat Arrow Functions in JavaScript | JavaScript Tutorial Series by SFDC Stop

 Hello Trailblazers,

Welcome to the third tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about ES6 Fat Arrow Functions in JavaScript. We're going to start from the beginning and see how we can define a function in JavaScript and finally we'll reduce that function to a single line of code using Fat Arrow sytnax. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

Q. Write a function to calculate the perimeter of a circle in JavaScript?

The basic syntax to define a function in JavaScript is given below where we're defining a function to calculate the perimeter of a circle.

As you can see in the above code, we have defined a function which is taking radius of a circle as a perimeter. Inside this function, we've a constant named as PI with value 3.14 and finally we're returning the perimeter of a circle which is nothing but 2 * PI * radius. Upon running the above code snippet which is calling the function with the value of radius as 10, the output we're getting is shown below:

As you can see above, we're getting the perimeter of the circle with radius 10 as 62.8. This is how you can Define a Simple Function in JavaScript. Now, let's update this code and this time we're going to assign a function to a variable and call a function afterwards. This is nothing but Another way of defining a function in JavaScript, as given below:

Here we're defining a function using the function keyword but instead of providing a name for the function after the function keyword, we're assigning that function to a variable with name perimeterOfACircle2 and using that variable to call this function in console.log statement. The output we're getting is shown below:

As you can see, we're getting the same output here as well i.e. the perimeter of a circle with radius 10 as 62.8. This is just another way of defining and using a function where we're assigning a function to a variable and using it.

Why do we need to use the function keyword again and again? Is there any alternative?

The answer is YES!. You can use the Fat Arrow => symbol instead of the function keyword to define a function. Have a look at the below code snippet:

Here we've replaced function(radius) with (radius) => i.e. we're using the fat arrow symbol to point to the function body after the parameters are defined within paranthesis. According to this syntax, we keep the parameters before the fat arrow => and the body of the function after the fat arrow. The output we're getting when the above code is executed is given below:

As you can see above, the output is still the same. We've reduced the characters in our function code a little using the fat arrow syntax. Now, the question is:

CAN WE REDUCE THIS FUNCTION TO A SINGLE LINE WITH FAT ARROW SYNTAX?

The answer to this question is, YES! You can. Let's have a look at the updated code snippet below, where we've reduced this function code to a single line:

When you try to execute this code snippet, you'll get the output as shown below:

As you can see above, our output is still the same but we've reduced our JavaScript function to a single line using ES6 fat arrow syntax. Here are few things to notice in this code snippet:

1. Following the ES6 syntax we have to keep the parameters to the left hand side and the function body to the right hand side of the fat arrow =>
   
   
2. While reducing the function to a single line, you need to have the return value of the function to the right hand side of the fat arrow. Notice that here we've removed the constant PI but instead used the value 3.14 directly in the calculation followed by the fat arrow which will be returned. Also, we don't need to specify the return keyword here.
   
   
3. If you only have a single parameter passed inside your function, you don't need to cover it by paranthesis () you can simply keep it as is. You can see we've removed the paranthesis from the radius here.
   
   
4. Basically, we're reducing the function body to a single line which is being returned and specifying that line after the fat arrow.

Isn't it amazing..!! You can reduce your JS function to a single line using ES6 fat arrow syntax. Let's see an example function with multiple parameters as well. Have a look at the code below. This time we're going to calculate the perimeter of a rectangle by passing in two parameters length and breadth:

As you can see above, we've directly defined this function using ES6 syntax. this function is taking two parameters length, breadth and is returning the parameter of a rectangle which is nothing but 2 * (length + breadth).

The output of the function is given below:

As you can see above, after passing the length as 10 and breadth as 20 we're getting the parameter as 60 which is correct 2*(10+20). Here, we have multiple parameters therefore, covering them by paranthesis () is important to keep your code syntactically correct.

To summarize, the learnings are given below:-

• We can initialize a function by using the function keyword or by using the fat arrow =>
• While using a fat arrow, we need to keep the parameters to the left side of the fat arrow symbol => and the function body to the right side of the fat arrow symbol.
• If we can reduce the function body to one line, we can define it in a single line using fat arrow syntax by just keeping the return value after the fat arrow. In this case the return keyword is not mentioned.
  
• If we have a single parameter, we can remove the paranthesis () as well but we do need to specify the paranthesis otherwise.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!