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.

Jorg · Accepted Answer · 2018-02-08 04:26:44Z

2

The syntax is either

Invoice.prototype.getInvoiceTotal = function() {}

This is because prototype itself is an object.

edited Feb 8, 2018 at 4:26

answered Feb 8, 2018 at 4:18

Jorg

7,2704 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Over a year ago

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 Over a year ago

@Adrian subtotal should be this.subtotal too, I guess.

31piy · Accepted Answer · 2018-02-08 04:21:43Z

1

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.

answered Feb 8, 2018 at 4:21

31piy

23.9k6 gold badges51 silver badges69 bronze badges

1 Comment

Adrian Over a year ago

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

Frish · Accepted Answer · 2018-02-08 04:19:20Z

0

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.

answered Feb 8, 2018 at 4:19

Frish

1,40111 silver badges20 bronze badges

Comments

TheLiquor · Accepted Answer · 2018-02-08 04:21:36Z

0

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

answered Feb 8, 2018 at 4:21

TheLiquor

717 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 8, 2018 at 4:25

Saurin Vala

1,9381 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Adding methods to prototype objects in JavaScript

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related