Fat arrow or function() with this keyword

Question

Before I ask my question I'll set some context.

I'm still learning and did an exercise today and I had to use a traditional function with the 'this' keyword.

Using the example below with a console.log I am able to retrieve the value I want eg input.value.

let inputs = document.querySelectorAll(".controls input")
let input = document.querySelector("input")

const handleUpdate(){
 
 console.log(this.value) \\ the output is the value of input.value eg 25
  
}

  inputs.forEach(item=>item.addEventListener("mousemove", handleUpdate))
  inputs.forEach(item=>item.addEventListener("change", handleUpdate))

However, if I use an ES6 function with a fat arrow then it doesn't work and get 'undefined'.

After furiously reading articles, I understand 'this' would always point to the parent object eg. global object(window)(please correct me if I'm wrong. So an ES6 function would always return 'undefined' in this instance. If I change 'this.value' to 'input.value' it works ok, see below.

let inputs = document.querySelectorAll(".controls input")
let input = document.querySelector("input")

const handleUpdate=()=>{
 
 console.log(this.value) \\ undefined
console.log(input.value) \\ the output is the value of input.value eg 25
  
}

  inputs.forEach(item=>item.addEventListener("mousemove", handleUpdate))
  inputs.forEach(item=>item.addEventListener("change", handleUpdate))

My question is should I be using the first approach which is a traditional function with the 'this' keyword or the approach with ES6 syntax(which just means I can't use 'this' keyword). Does it matter which I use?

Thanks for any help with this.

Thanks, they both solve the problem :-) but I just wondered the benefit of using one over the other. Thanks — epixme, Jan 12 '21 at 16:06
There is nothing necessarily "more modern" about an arrow function. They're for different things — Liam, Jan 12 '21 at 16:07
`Does it matter which I use`, yes, because `this` is treated differently as you've discovered — Liam, Jan 12 '21 at 16:07
I suppose what I'm saying is should I use this with a traditional function or use es6 and not use this keyword .. but I guess what everyone is saying it depends on context. — epixme, Jan 12 '21 at 16:09
@epixme There's nothing "traditional" about function declaration. They're still normal ES6. — Bergi, Jan 12 '21 at 16:24

Yash Tibrewal · Answer 1 · 2021-01-12T16:22:09.993

0

Correct me if I am wrong.

As far as approach goes when we compare the function and the fat arrow function, it is a personal choice as long as we understand the difference between them, and as MDN doc says

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

mdn doc for arrow function

However, after reading your approaches, I would suggest you go with the first approach.

One reason is if any new developer joins the team, and is unaware of the syntax, he might have some difficulties approaching the solution as you did. But again, one should try and use the latest code techniques wherever possible.

edited Jan 12 '21 at 16:22

answered Jan 12 '21 at 16:13

Yash Tibrewal

19
2

Arrow functions are not "new syntax". They've been around for years, are part of the JS standard, and if a new developer doesn't know about them then they need to learn them. We can't forbid ourselves from writing modern code just because a new developer might not have learned anything about JS that is new this century. – Quentin Jan 12 '21 at 16:19
@QuentinI have updated and removed the "new syntax", I am a novice as well, I just tried to answer him. Also, I agree with your point where we should not restrict ourselves to learning new ways of writing code, I just kept my point. – Yash Tibrewal Jan 12 '21 at 16:23
Re edit: What if the new developer who joins the team isn't aware of function expression syntax? The same point applies. Selecting arbitrary bits of JavaScript as "things people might have to learn" is silly. – Quentin Jan 12 '21 at 16:28
I see, Should I delete this answer, if it is very wrong? @Quentin – Yash Tibrewal Jan 12 '21 at 16:31

score 0 · Accepted Answer · answered Jan 12 '21 at 16:16

Use the traditional function declaration, because it will decouple your handleUpdate() function from the UI, so:

you can implement it in a totally different file and reuse it wherever you need its functionality
the function does not need to have an input variable defined in the context where it's used

If you're still doubting that's the way to go, VueJS also uses traditional functions in several places, having stuff that's actually not working if fat arrow functions were used:

From Vue's official docs:

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) [...]. Since arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined.

So yeah, don't worry about using traditional functions, especially if you can explain the why's behind your choice.

I definitely see the benefit of reusability . Thanks for taking the time to answer, thats helped me see things a bit clearer. — epixme, Jan 12 '21 at 16:35

Fat arrow or function() with this keyword

2 Answers2