Predict the output of the following javascript code

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter());
console.log(shape.perimeter());

 

 

 

 

Download Explanation Next

Quiz Explanation

In this code, an object named shape is defined, which contains properties for radius, diameter, and perimeter. Let's analyze the code and its output:

  1. radius: 10,: This sets the property radius of the shape object to 10.

  2. diameter() { return this.radius * 2; },: This defines a method diameter on the shape object, which returns the diameter of the shape. Inside the method, this.radius refers to the radius property of the shape object.

  3. perimeter: () => 2 * Math.PI * this.radius,: This defines a method perimeter using an arrow function. Arrow functions do not have their own this context, so this inside an arrow function refers to the enclosing scope's this. However, in this case, since the arrow function is defined in the global scope, this refers to the global object (window in a browser or global in Node.js). As a result, this.radius inside the arrow function will not refer to the radius property of the shape object but will be undefined or NaN.

  4. console.log(shape.diameter());: This logs the result of calling the diameter method of the shape object. It correctly calculates the diameter as 2 * radius, which is 20.

  5. console.log(shape.perimeter());: This logs the result of calling the perimeter method of the shape object. However, since this.radius inside the arrow function of perimeter is not referring to the radius property of the shape object, but rather undefined or NaN, the result will be NaN.

So, the output of the code will be:

20
NaN

The diameter is correctly calculated using the diameter method, but the perimeter calculation using the arrow function results in NaN due to incorrect usage of this.