When You Should Not Use Arrow Functions
First of all we should know Fat arrow functions don't have certian things,they are
- THIS keyword
- argument object
so in the situations where we feel that, usage of ThIS keyword or argument object makes more sense and where these two things helps us to get solutions, in those places we should aviod using of fat arrow functions
let take some examples:
arraow function as event handler:
let's consider we have input element and it have arrow function as an event handler, now we need to render input element value in the UI
to get value we can do THIS.value in the handler function but as we know arrow function dont have THIS keyword it will give us undefined becuase it will picks up lexical scope THIS Keyowrd
So here we can use Regular function then it will give us the proper result
const greeting = document.querySelector('#greeting');
const username = document.querySelector('#username');
username.addEventListener('keyup', () => {
greeting.textContent = 'Hello ' + this.value;
});
//o/p ==> Hello Undefined
Object Methods:
```const counter = { count: 0, currentCounter: () => console.log(this.count+1) }; counter.currentCounter()
// o/p NaN
* output will be NaN because reason is same as mentioned above so it will picks up the
lexical scope THIS keyword
* here that is global scope so there THIS points to the Window Object so it dont have
count so it will returns the undefined so undefined+1 equals to NaN
## Functions that use the arguments object:
```const giveMeArgs=(a,b,c)=> console.log(arguments.length)
say for example if we want to know how many parameters particular function is getting so in those cases we can use argument object we can find simply count but arrow function don't have argument object so it throws the error for this problem ES6 introduced the REST parameter so we can use that instead of argument object otherwise we should replace regular function instead of arrow function