const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};
console.log(shape.diameter());
console.log(shape.perimeter());I know the diameter is 20, but why perimeter shows NaN?
-
Does this answer your question? Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?Nick Parsons– Nick Parsons2019-12-12 01:04:48 +00:00Commented Dec 12, 2019 at 1:04
Add a comment
|
3 Answers
This is a scope issue - the radius variable is not available inside the perimeter method and so is undefined. Changing the function to a regular method resolves the issue.
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter() {
return 2 * Math.PI * this.radius
}
};
console.log(shape.diameter()); //gives 20
console.log(shape.perimeter()); // gives 62.83185307179586
2 Comments
Soc
When used in an arrow function (
() => ...), the scope of this is the same scope as where the function is defined. In this case, it is window.
gavgrif
Thanks @Soc - that means that in order to have access to the radius variable - it would need to be in the global scope and outside of the shape object.
Depending on how you plan to use it, you may be better served with a class. In the example below, this in the arrow function refers to the Circle instance.
class Circle {
constructor(radius) {
this.radius = radius;
}
diameter() {
return this.radius * 2;
}
perimeter = () => 2 * Math.PI * this.radius;
}
const shape = new Circle(10);
console.log(shape.diameter());
console.log(shape.perimeter());That said, if you are using a class, I prefer the way that diameter is defined over perimeter as an arrow function.
Comments
hello perimeter as function not used arrow function(() =>)
perimeter() { return 2 * Math.PI * this.radius }
