Adding methods to prototype objects in JavaScript

Question

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.

Answer 1

The syntax is either

Invoice.prototype.getInvoiceTotal = function() {}

This is because prototype itself is an object.

• Adrian: Brilliant! Thank you for the quick assist on this. That's the first error I've found in the book after getting ~500 pages deep :) I'll accept when the timer goes off.
• Jorg: @Adrian subtotal should be this.subtotal too, I guess.

Answer 2

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.

• Adrian: Thank you for your help on this. Jorg beat you by a few mins.

Answer 3

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.

Answer 4

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);
};

Answer 5

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>