When You Should Not Use Arrow Functions

First of all we should know Fat arrow functions don't have certian things,they are

  1. THIS keyword
  2. 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:

  1. 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
  1. 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