When working with Javascript objects, there is a big difference between using Arrow Functions compared to Regular Functions when it comes to this. For instance using a regular function here will properly bind this:
const person = {
name: "Karen",
age: 40,
hi: function() {
console.log("Hi " + this.name);
}
}
person.hi() // "Hi Karen"
compared to using an Arrow Function which will incorrectly bind this:
const person = {
name: "Karen",
age: 40,
hi: () => {
console.log("Hi " + this.name);
}
}
person.hi() // "Hi "
However, I am not sure if this difference applies when defining class methods. For instance, if I declare two methods - one as arrow function, one as regular function - they both seem to correctly bind this.
class Example {
constructor() {
this.values = [1, 2, 3, 4]
}
arrowMethod = (num) => {
console.log(this.values.map((item) => item * num));
}
method(num) {
console.log(this.values.map((item) => item * num));
}
}
const example = new Example();
example.arrowMethod(2); // [2, 4, 6, 8]
example.method(2); // [2, 4, 6, 8]
So is there any reason to use one or the other when it comes to class methods?