CODEWITHSUNDEEP
javascript
Adrian
Adrian

Reputation: 16715

Adding methods to prototype objects in JavaScript

I'm making my way through Murach’s JavaScript and jQuery (3rd Edition) and I've encountered a compiler error with code from the book. I've triple checked my syntax against the book's syntax and I think I can rule it out. I also looked at the errata page and I don't find a reference to the page I'm on.

I also looked at this question, but I didn't find anything applicable to my issue.

Here is my object constructor:

var Invoice = function(subtotal, taxRate) {
    this.subtotal = subtotal;
    this.taxRate = taxRate;
};

I run into trouble when attempting to add methods to the prototype object:

// The getTaxAmount method is added to the Invoice prototype
Invoice.prototype.getTaxAmount: function() {
// Compiler whines right here ^ and     ^
    return (subtotal * this.taxRate);
};

// The getInvoiceTotal method is added to the Invoice prototype
Invoice.prototype.getInvoiceTotal: function() {
// Compiler whines right here ^ and     ^
    return subtotal + this.getTaxAmount(this.subtotal);
};

I'm using Visual Studio Code with Debugger for Chrome. The prompt in VS Code says it wants a ; at the first spot it complains and [js] identifier expected at the second spot it complains.

Thank you for reading. I welcome your suggestions.

Upvotes: 0

Views: 59

Answers (5)

Jorg
Jorg

Reputation: 7250

The syntax is either

Invoice.prototype.getInvoiceTotal = function() {}

This is because prototype itself is an object.

Upvotes: 2

Saurin Vala
Saurin Vala

Reputation: 1928

All JavaScript objects inherit properties and methods from a prototype.

The JavaScript prototype property also allows you to add new methods objects constructors:

ie : Date objects inherit from Date.prototype. Array objects inherit from Array.prototype. Person objects inherit from Person.prototype.

<script>
  var Invoice = function(subtotal, taxRate) {
  this.subtotal = subtotal;
  this.taxRate = taxRate;
};

Invoice.prototype.getTaxAmount = function() {
    return (subtotal * this.taxRate);
};

var myTax= new Invoice(10,5);
document.getElementById("demo").innerHTML =
"My tax amount is " + myTax.getTaxAmount (); 
</script>

Upvotes: 0

31piy
31piy

Reputation: 23859

Yes, that's a syntax error. You rather use an assignment operator, =, for such work:

// The getTaxAmount method is added to the Invoice prototype
Invoice.prototype.getTaxAmount = function() {
    return (subtotal * this.taxRate);
};

// The getInvoiceTotal method is added to the Invoice prototype
Invoice.prototype.getInvoiceTotal = function() {
    return subtotal + this.getTaxAmount(this.subtotal);
};

In addition to that, you could use Object.assign to assign properties to an object, like this:

Object.assign(Invoice.prototype, {
    getTaxAmount: function() {
        return (subtotal * this.taxRate);
    },
    getInvoiceTotal: function() {
        return subtotal + this.getTaxAmount(this.subtotal);
    }
});

Notice that you don't use a semicolon at the end of the function when using the latter.

Upvotes: 1

TheLiquor
TheLiquor

Reputation: 71

Try using an equal sign. Colon is for variable values for JSON.

Invoice.prototype.getInvoiceTotal = function() {
// Compiler whines right here ^ and     ^
    return subtotal + this.getTaxAmount(this.subtotal);
};

Upvotes: 0

Frish
Frish

Reputation: 1421

According to w3Schools, the correct way to add a function to a prototype would be as follows:

Invoice.prototype.getInvoiceTotal = function(){ **your fx here** };

From the look of things, you are using a : instead of a =, this may be what is causing you grief.

Upvotes: 0

Related Questions