Enough JavaScript to get you Started : #15 Arrow Functions
Tags: webdev, javascript, beginners, 100daysofcode
Published: 2021-01-21 11:53:20

### Arrow Functions?
👉 Since we've covered Basics of JavaScript , it's now time to move towards slightly advance things 🎉
<br>
👉Arrow Functions are compact alternatives to regular JavaScript functions
<br>
👉Arrow Functions will help you jump into modern JS concepts , and extremely helpful before learning any JS frameworks like React or Angular

### Have you seen something like this?
👉 Sometimes when our code doesn't work as expected so we go to stack overflow or GitHub for finding solutions.

👉 Let's say you were getting error in Adding 2 numbers (i know you won't😂, but still)...
 
👉 You go to stack overflow and see something like this...
```
var sum = (a,b) => {
      return a+b;  
}
```

### WTF was that? Language of gods? 🤔


👉 Let's break down this into simple function
<br>
👉 So what's written here basically, is this...
<br>
```
function sum(a,b)
{
       return a+b;
}
```
👉 Arrow function helps to reduce syntax (often known as syntactic sugar) over vanilla js by ES2016

<hr>

### Benefits of Array Functions
👉 Helps to reduce syntax <br>
👉 Arrow syntax automatically binds this to the surrounding code’s context (will be covered later in series 😁)<br>
👉 Implicit Return <br>

### What are Arrow Functions any way?
👉 Arrow function is modern way of writing normal JavaScript function which helps us in writing lesser and more meaningfulfunctions.
<br>
👉 Arrow Functions are also known as **Fat Arrow Functions** because of the `=>` expression in syntax
<br>
👉 **_Syntax_**
```
// normal function
var functionName = function (param1,param2) {
      // function body
      // ...
      // ...
}

// arrow function
var functionName = (param1,param2) => {
       // function body
       // ...
       // ...
}
```
👉 in simple terminology ,  we assign an anonymous function to a variable where the name of variable becomes the name of function and can be called by `functionName();` . <br>

👉 Parentheses in arrow function indicates number or params our function will take (in our case there are two , namely _param1_ and _param2_)
<br>
👉 After Arrow (`=>`) , the curly braces indicates the start of function body , where we can write whatever we want inside it.
<br>

### Examples 
👉 Writing  a Arrow Function which can return sum of 2 nums
```
// sum : name of arrow function
// n1,n2 : params of arrow function
// {...} : body of arrow function

var sum = (n1,n2) => {
      return n1+n2;
}

// can be called like : 
sum(1,2);
```
👉 Writing  a Arrow Function which can return cube of given number

```

// arrow function with one param
var cube = num => {
       return num*num;
}

// can be called like : 
cube(2);
```
👉 Writing  a Arrow Function which can will ask for user age and checks if he/she is eligible for license
```
// arrow function with 0 params
var licenseValidator = () => {
    var age = +prompt("what's your age ? ");
    if(age > 18)
    {
          console.log("eligilbe")
    } else {
          console.log("not eligible"); 
    }
}
```

### Rules for Writing Arrow functions
👉 `=>` is compulsory before function body. <br>
👉 we've to pass empty parentheses`()` compulsory if function takes 0 params. (otherwise we'll end up getting error 😂). <br>
👉 If Arrow function takes single param , then the parentheses are optional.

### Bonus🎁 : Concise arrow functions
👉 Concise arrow functions are more optimized than normal arrow functions <br>
👉 Concise arrow functions can be used where we've only return expression in our function body (`no {} curly parentheses`) <br>
👉 No need to write `return` explicitly in concise arrow functions <br>
👉 Not every arrow function can be converted to Concise arrow function

👉 **Example : **
```
// making sum arrow function concise 
var sum = (num1,num2) => num1+num2;

sum(1,3); // returns 4

var cube = num1 => num1*num2;

cube(2); // returns 4

```

👉 Notice we haven't converted `licenseValidator` to concise arrow function because that function has some amount of calculations inside it's body. <br> 

👉 That's what i meant when i wrote **'not all arrow functions can be converted to concise arrow functions'**

<p>Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :) <br>
<br>
Keep Coding ❤
</p>

#### Hey , Let' Connect👋
 [Twitter](https://twitter.com/codarsh) / [Github](https://github.com/WhoAdarshPandya/)