Arrow Function in Javascript
Tags: javascript, es6, productivity, webdev
Published: 2022-01-24 14:25:17

Hello guys today i am discussing about Arrow functions in javascript or we can say in ES6.

## Arrow function -
* Arrow functions are introduced in ES6, which provides you a more accurate way to write the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions make your code more readable and structured.
* Arrow functions are anonymous functions (the functions without a name and not bound with an identifier). 
* They can be declare without the function keyword. 
* Arrow functions cannot be used as the constructors. 
* They are also called as Lambda Functions in different languages.

###syntax - 
```javascript
const functionName = (arg1, arg2, ?..) => {  
    //body of the function  
}  
```

### Example 1 - Normal function
```javascript
//Normal function
function display(){
console.log("This is a normal function");
}
display();

//Arrow function
const display = () => {
console.log("This is an Arrow function");
}

display();
```

###Output - 
```
This is a norml function
This is an Arrow function
```
* "=>" , it is called fat-arrow notation or lambda notation.
* "()" , inside this braces we can pass parameters
* Then we got the body of the function inside curly braces "{}".
* Then we called it like a normal function using its variable name.


###Example 2 - Parameterised Function

```javascript
//With parameters
const Factorial = (num) =>{
    let fact = 1;
    for(let i=1;i<=num;i++){
        fact *= i;
    }
    console.log(fact);
}
Factorial(5);
```

###Output -
```
120
```

* We have created an arrow function named Factorial and inside the braces "(num)", we have passed the "num" parameter , which is the number used to calculate the factorial, then inside the function body we have wrote the factorial logic and in the end we called the Factorial function which produces the output.

###Example 3 - Single line functions
```javascript
//single line statement functions dont need curly braces
//it is optional to put curly braces for it

const single = (a,b) => return a + b;
single(10,15);
```

###Output- 
```
25
```

### Example 4 - Rest parameters
```javascript
//With rest parameters
const restPararmeter = (...args) => {
    let sum = 0;
    for(let i of args){
        sum += i;
    }
    console.log(sum);
}

restPararmeter(1,2,3,4,5,6,7,8,9,10);
```
###Output -
```
55
```
* Rest parameters "..." denoted by three dots, do not restrict you to pass the number of values in a function, but all the passed values must be of the same type.  
* Here we have passed 10 numbers in the arguments while calling our function and then summed up all the numbers and output the result.
* You can see we have used the rest operator in the function parameter and didn't create 10 different parameter for 10 numbers to pass.

### As we have seen, the arrow function makes the writing of function less complicated, and it also reduces the number of lines.

### Thats it for this post.

### THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.


## ^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

###Also check these posts as well
1. https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

2. https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

3. https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj