UNDERSTANDING ES6 ARROW FUNCTIONS
Tags: javascript
Published: 2020-01-27 06:37:23

## Arrow Function syntax and how to use it:

As you might know a normal function is written as below :

```javascript
let square = function(num){
	return num * num;
}
```

An arrow function is written as :

```javascript
let square = (num) => return (num * num);
```

It is as simple as it looks, we just didn't use the keyword function but instead used a fat Arrow ( => ) , it doesn't seem to be much of an improvement right now, but arrow functions are pretty useful and clean. let's see how and when to use it.


## Understanding the scope of the normal and arrow functions

```javascript
const result = {
name: 'place holder',

traditionalFunction: function(){
	return function(){
		console.log('name: ',this.name);
		console.log('Arguments: ' , arguments);
	}
},

fatArrowFunction: function() {
	return () => {
		console.log('name: ', this.name);
		console.log('Arguments: ' , arguments);
	}
}
};
```
Here, we just have a code block for an object `const result` with 3 properties:
 - name,
 - traditionalFunction [which is a function],
 - fatArrowFunction [a function as well]

Let's see the difference when we create instances of the above function with arguments.

```javascript
	
	const tradFunctionResult = result.traditionalFunction('hello','I am normal function');
	const arrowFunctionResult = result.fatArrowFunction('hello','I am Fat Arrow Function');
	
	tradFunctionResult();
	name:  
	Arguments:  Arguments[callee: , Symbol(Symbol.iterator): ]
	
	arrowFunctionResult();
	name:  place holder
	Arguments:  Arguments(2)["hello", "I am Fat Arrow Function", callee: , Symbol(Symbol.iterator): ]

```
	

As you can see, once you create the traditionalFunction which is anonymous, the context of neither `this.name` nor arguments passed while creating are not available to the function.
But whereas, the the ArrowFunction has same context as of the function while creation for both `this.name` and arguments.
[Well, we can achieve the same effect of arrow functions in normal functions using one of or combination of bind() , call() or apply()]

**note:** _Yes, Bind, call and apply can be ditched when using arrow functions as discussed above we have all the context we need to work with by default.But, these can still be used when the function needs to be called later in certain events when it's needed. But this case is very rare and there are some other workarounds which is out of scope for this post._
	
		
## Where do arrow functions make more sense and make your life easier?
	
Well, let's say an **array of objects need to be iterated through** in which case forEach can be used with arrow function:

``` javascript	
	this.arrayOfObjects.forEach( (element) => {
		console.log(element.name);
	});
```
	
nice , clean and simple right!
	
**with promises:**

```javascript
	 this.someAsyncFunction().then( 
	 result => {
		 console.log('SUCCESS: ', result);
		 ....
		 ....
	 },
	 error => {
		 console.log('FAILURE: ',error);
		 ....
		 ....
	 });
```
**Same way with Observables:**

```javascript

	 this.someObservable.subscribe(
		response => {
			console.log('success : ',response);
			....
			....
		},
		error => {
			console.log('failure : ',error);
			....
			....
		});
```	
As we know everything inside { } curly brackets is called a code block, but when we just need to invoke a single function or say do a simple computation, then we need not consider using code blocks instead, just do a oneliner as below:

```javascript	
this.arrayOfNumbers.map(n => n*n)
```

### Wrapping up
Now, we know what arrow functions are, when and how to use them and hence can write some clean and easily readable code.

Thank you for reading this post, if found are any mistakes or improvements, do let me know.