JavaScript Class vs Function as Definition

Question

JavaScript Class vs Function as Definition

Having trouble locating documentation for this issue. I devised a JavaScript class in the following manner:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area = function() { 
    return this.height * this.width; 
  }
}

However, it failed to function properly on JSFiddle and I was advised to use this format:

var Polygon = function(height, width) {
  this.height = height;
  this.width = width;
  this.area =  function() { return this.height * this.width; }
}

I'm aware that there are multiple ways to achieve the same result. I am curious if this approach is similar to C++ where you can create a pointer like... Polygon *myPoly = new Polygon(3, 4); rather than Polygon myPoly(3, 4); or if it's purely stylistic. Additionally, any reasons as to why one method works on JSFiddle while the other does not would be appreciated.

javascript jsfiddle

Answer 1

Answer №1

The example you provided is not valid syntax. Here's the correct way to write it:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
}

If you're using a browser that supports classes, this should work in JSFiddle. However, there are still some browsers that do not support classes.

There are multiple ways to achieve the same result in JavaScript due to its flexibility. The class syntax is relatively new and may not be fully supported in all widely-used browsers, such as Internet Explorer. Essentially, a class is just a more concise way of creating constructable objects compared to the traditional syntax shown in your second example.

In response to the C++ analogy, the two C++ code examples perform different tasks, while the JavaScript examples produce nearly identical results. To make the first example match the second example more closely, you could implement it like this:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    this.area = function () { return this.height * this.width; };
  }
}

Alternatively, you could modify the second example to look like this:

var Polygon = function(height, width) {
  this.height = height;
  this.width = width;
};

Polygon.prototype.area = function() { return this.height * this.width; };

Answer 2

The example you provided is not valid syntax. Here's the correct way to write it:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  area() {
    return this.height * this.width;
  }
}

If you're using a browser that supports classes, this should work in JSFiddle. However, there are still some browsers that do not support classes.

There are multiple ways to achieve the same result in JavaScript due to its flexibility. The class syntax is relatively new and may not be fully supported in all widely-used browsers, such as Internet Explorer. Essentially, a class is just a more concise way of creating constructable objects compared to the traditional syntax shown in your second example.

In response to the C++ analogy, the two C++ code examples perform different tasks, while the JavaScript examples produce nearly identical results. To make the first example match the second example more closely, you could implement it like this:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    this.area = function () { return this.height * this.width; };
  }
}

Alternatively, you could modify the second example to look like this:

var Polygon = function(height, width) {
  this.height = height;
  this.width = width;
};

Polygon.prototype.area = function() { return this.height * this.width; };

Answer 3

Answer №2

To enhance your code, make the switch from using var area = ... to

get area() { return this.height * this.width; }

Visit this link for more information on JavaScript classes.

Check out this JSFiddle demo for a practical example.

Answer 4

To enhance your code, make the switch from using var area = ... to

get area() { return this.height * this.width; }

Visit this link for more information on JavaScript classes.

Check out this JSFiddle demo for a practical example.

JavaScript Class vs Function as Definition

Answer №1

Answer №2

Similar questions

Is there a way to access the active request being processed in a node.js environment?

The jQuery AJAX function appears to be unresponsive and failing to execute

Performing a MongoDB query in a controller using the MEAN stack with Node.js

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How can I asynchronously parse JSON data from a URL on a Windows phone and display it in a

Issue with the scope causing global variable not to update when button is pressed

Choose the option for overseeing safaris

Is there a way to completely remove an element from the dom once the ajax call has returned

What is the best way to select an element based on its relationship to another Element object using a selector?

The Ajax response fails to update my viewmodel

Transform a Javascript string variable into plain text within a pre-existing text document

Challenge with the submission event listener

Need two clicks for React setState() to update the user interface

best method for embedding javascript code within html (within a script tag)

Suspend features for moving between pages in history

Node.js dynamically updates exports for efficient code execution

Identifying periods of inactivity using an embedded iframe

The presence of ng-show dynamically adjusts the minimum height of a div element

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?