JavaScript : Arrow Functions
Tags: beginners, javascript, webdev, programming
Published: 2021-04-02 05:45:21

Functions are sets of statements that perform a specific task bundle together under a name. Functions are one of the fundamental building block of JavaScript. A function definition consists of function keyword followed by function name, list of parameters enclosed in parenthesis and function statements enclosed in curly brackets.

```javascript
// Example of a function declaration
function displayName(fname, lname) {
    console.log(`${fname} - ${lname}`)
}
```

Functions can also be created using function expression.
```javascript
//Example of function expression
let displayName = function(fname, lname){
    console.log(`${fname} - ${lname}`)
};
```

In ES6 another method was introduced to create function, called arrow function.

#### Arrow function syntax
1. parameter => expression
2. (parameter1, parameter2..) => expression
3. parameter1 => {
// statement1
// statement2 
// ....
}
4. 
(parameter1, parameter2..) => {
// statement1
// statement2 
// ....
}

```javascript
let arrFun = (argA, argB...) => expression; 
```
The equivalent of the above arrow function is 
```javascript
let arrFun = function(argA, argB...) {
  return expression;
};
```
### How a function can be made into an arrow function?

We will explain it with an example, first we declare a normal function to compare with the arrow function. The function take two arguments, multiply the arguments are return the result. The code is given below.
 
``` Javascript
// Normal function
function doSomething(varA, varB){
    let result = varA * varB;
    console.log(`${result}`);
    return result/2
}
```
Now let's create a arrow function which is equivalent to the above function. We will do it by editing the above code such a way that we get a arrow equivalent. We first remove the *function* keyword, then the arguments are enclosed in parenthesis. If there are no arguments then an empty parenthesis is used, if only one argument is passed we can omit the parenthesis. After that we use **T_DOUBLE_ARROW** *(=>)*, then the function code is enclosed in curly bracket. If there is only one statement we can omit the curly brackets also. *return* keyword can be omitted inside the arrow function as the arrow function has an implicit return, if function statements are not enclosed in curly brackets. The equivalent arrow function code is given below.

```javascript
// Arrow function
let doSomething = (varA, varB) => {
    let result = varA * varB;
    console.log(`${result}`);
    return result/2
```

Some more arrow function examples are provided below.
```javascript
// Normal Function
function square(x) {
    return x * x;
}
//Arrow function
let square x => x*x;

// Normal Function
function add(x,y){
    return x + y;
}
//Arrow function
let add = (x,y) => x+y

//Normal function
function() {
    return a *10;
}
//Arrow function
() => a * 10
```

Let's look at another example.
```javascript
let object1 = {
    fname : "kiran",
    lname : "raj",
    greet : function(){
        console.log(`${this.fname} ${this.lname}`)
    },
    arrow_greet : () => console.log(`${this.fname} ${this.lname}`, this)
}

object1.greet();       //kiran raj
object1.arrow_greet(); //undefined undefined window
```
In the above example concentrate on the `greet` and `arrow_greet` methods. *greet* is a normal method where as *arrow_greet* is arrow equivalent of *greet* function(just added an extra *this* to the console.log statement to see where *this* points at), greet methods works fine but in arrow_greet the output is printed as *undefined undefined*. *this* points to the window global object.  This example clearly shows that the *arrow function does not have a own binding to `this`*. Due to this it is better to avoid using arrow functions as methods. 

### Summary
1. Arrow function does not have a own binding to *this*. 
2. Arrow functions should not be used as methods.
3. Arrow function does not have a own binding to *super*. 
4. Arrow functions cannot be used as a constructor.