Hi,
I started learning React and right now I'm a bit confused about where to use Arrow-function to define a method and where not to use it.
First let's check object literals
This code works:
const person = {
points: 23,
score() {
return this.points++;
}
};
person.score(); // Works
But the bellow code doesn't work, because we defined the score() method as an arrow-function:
const person = {
points: 23,
score: () => { // Arrow function
return this.points++;
}
};
person.score(); // Doesn't work
Take away: Never define methods in an object literal via arrow-function.
Is the above statement correct?
What about JavaScript classes?
This code works:
class Dog {
constructor(name, bread) {
this.name = name;
this.bread = bread;
}
bark() {
return `Bark Bark! My name is ${this.name}`;
}
}
const mini = new Dog('Mini', 'Spitz');
mini.bark();
And the bellow code, which uses arrow-function syntax to define the bark() method works too:
class Dog {
constructor(name, bread) {
this.name = name;
this.bread = bread;
this.bark = () => { // Arrow function
return `Bark Bark! My name is ${this.name}`;
}
}
}
const mini = new Dog('Mini', 'Spitz');
mini.bark();
Take away: It's fine to define methods in a Class via arrow-function.
Is the above statement correct?
What about React classes (class components)?
It is even recommended to use arrow-functions for defining methods inside React classes as a way to create "auto-binding" methods, e.g. methods that could be used by event handlers but that stayed bound to the class.
Is the above statement correct?
Top comments (2)
Are the following statements correct?
Never define methods in an object literal via arrow-function.
It's fine to define methods in a Class via arrow-function.
In React it is even recommended to use arrow-functions for defining methods inside React classes as a way to create "auto-binding" methods, e.g. methods that could be used by event handlers but that stayed bound to the class.
I think it's more important to be consistent. If you are using arrow functions to define Class methods, then all class methods should be arrow functions. Similarly if you are using arrow functions for object literals then you should stick with them.
Though, for best practices I usually try to stick with the constraints you have defined. And then keep them consistent across the project.