Arrow Functions
Tags: javascript, node, jstricks, firstblog
Published: 2020-10-05 11:34:59

### **WHAT WILL YOU LEARN IN THIS QUICK READ ABOUT JS FUNCTIONS**?
1. Regular and Arrow javascript functions
1. How to convert a regular function into an arrow one
1. An Introduction to ***this*** keyword
1. When and when Not to use ES6’s Arrow function(s)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f26f3cpr1lhx45zvgrev.png)
The image above depicts how a regular function in javascript looks like, you might know them as a collection of statements.
In javascript, a function can itself be a **value** or an expression, which can be assigned to a variable.<br />

**Let’s assign the previous example function to a variable**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yfbf0e3yqu6b9jx5g8v8.png)
The function name can be omitted in the syntax and the variable ***doSomething*** now hold’s this function as it’s **value**. Const is usually preferred for assigning functions. You can use let too.
Now moving towards arrow functions which were introduced in ES6. 
### **How can we convert regular function into an arrow one?** Well its fairly simple 
- Omit the function keyword
- Add the arrow notation (i.e. =>)

That’s it :) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ckymcglxmj9ejxrwf6nc.png)
We can simplify it further , if the function body contains a single statement, and if that single statement is a return statement we can completely omit the { curly braces } and return keyword.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ln5o0un4f02cgvs3j1d2.png)

**AN EXAMPLE**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6r27tqlsm1pne2elk0fu.png)

### **When and When not to use arrow functions**?
Arrow functions do not have it’s own ***this*** context, this will cause some confusions when arrow fucntions are used inside of methods, and when you try to use *this* to access the parent object. 
Well if you are wondering what’s ***this*** keyword, well don’t worry we got you covered,
***This*** keyword refers to the object it belongs to, depending where it is used.

### Let's grasp this with an example for both cases

**Here the function will log the global window object when it’s run**.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/eprag00rny4ycy6cj56s.jpg" width="300">

Because in a standalone function this refers to the global object. Which in case of a browser, will be the window object.
**OUTPUT:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b79ltfusqymnvgqjpqer.png)

**However in this case function will log the object which contains the method**.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/llzcjvw7vgt66kraun1b.jpg" width="300">

Because here, the parent object of that method is “obj”,
Using this keyword anywhere inside a method will be pointing out to the current object itself.

**OUTPUT:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iczzmimq98di7fsjshqv.jpg)

<br/>
### **Now back to the arrow functions and why using this keyword in them is tricky:**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7lcrqcruoi3j074ch2a9.jpg)

***What is happening here?*** In the regular **funGreet()**method, the ***this*** keyword is refering to the parent object, which is the **greet object** in this case
However In the **arrow** function **funArrowGreet()** ***this*** does not point to the parent object, but it is pointing to the global object which is **window** for browsers. That's why we are getting ***undefined*** as the output.

### **So Now question arises where and when to use these tricky arrow functions?**

They are best used as **callback functions**, and can be used as callbacks for *Array map*, *reduce*, *filter*, *forEach* etc. Basically anywhere where this isn’t an issue. They come handy when you just have one statement function as they return that single line expression, however when your function has a block body it has to be accompanied by an return statement. In my opinion Arrow functions looks **neater** and  you have to code less, so that’s fancy :)