Build a Library Project/ isCheckedOut issue

Hi!
First of all, thank you very much for taking your time and looking into my questions :blush:

Sooo, my issue is next: I have a setter in parent class that worked for the first instance for the subclass (showed “true” when I logged it) but didn’t really work for the second instance (showed undefined). What I did/didn’t do wrong?

class Media {constructor(title){ this._title = title; this._ratings = []; this._isCheckedOut = false; } get title(){ return this._title; } get ratings(){ return this._ratings; } get isCheckedOut(){ return this._isChechedOut; } set isCheckedOut(value) { this._isCheckedOut = value; } toggleCheckOutStatus(){ this.isCheckedOut = !this.isCheckedOut; } getAverageRating(){ let ratingsSum = this.ratings.reduce((currentSum, rating) => currentSum + rating); return ratingsSum / this.ratings.length; } addRating(value) { this.ratings.push(value) }}; class Book extends Media { constructor(author, title, pages) { super(title); this._author = author; this._pages = pages; } get author() { return this._author; } get pages() { return this._pages; } }; class Movie extends Media { constructor(director, title, runTime){ super(title); this._director = director; this._runTime = runTime; } get director() { return this._director; } get runTime() { return this._runTime; } }; const historyOfEverything = new Book('Bill Bryson', 'A Short History of Nearly Everything', 544); historyOfEverything.toggleCheckOutStatus(); console.log(historyOfEverything._isCheckedOut); historyOfEverything.addRating(4); historyOfEverything.addRating(5); historyOfEverything.addRating(5); historyOfEverything.getAverageRating(); console.log(historyOfEverything.getAverageRating()); let speed = new Movie('Jan de Bont','Speed', 116); speed.toggleCheckOutStatus(); console.log(speed.isCheckedOut); speed.addRating(1); speed.addRating(1); speed.addRating(5); speed.getAverageRating(); console.log(speed.getAverageRating());

You made a typo.

// You wrote:
get isCheckedOut(){
  return this._isChechedOut;
}

// It should be:
get isCheckedOut(){
  return this._isCheckedOut;
}

With the typo, the following happens:

historyOfEverything

  • historyOfEverything.toggleCheckOutStatus();
    Within toggleCheckOutStatus(), the statement this.isCheckedOut = !this.isCheckedOut; is executed as: the expression to the right of the assignment operator !this.isCheckedOut; results in the getter being called. The getter returns undefined because of the typo in the getter. The ! flips the undefined to true. Then the expression to the left of the assignment operator this.isCheckedOut causes the setter to be called which ends up assigning true to this._isCheckedOut

  • console.log(historyOfEverything._isCheckedOut); bypasses the getter and gets the value assigned to this._isCheckedOut directly. true is printed to the console.

speed

  • speed.toggleCheckOutStatus();
    Within toggleCheckOutStatus(), the statement this.isCheckedOut = !this.isCheckedOut; is executed as: the expression to the right of the assignment operator !this.isCheckedOut; results in the getter being called. The getter returns undefined because of the typo in the getter. The ! flips the undefined to true. Then the expression to the left of the assignment operator this.isCheckedOut causes the setter to be called which ends up assigning true to this._isCheckedOut

  • console.log(speed.isCheckedOut); calls the getter. The getter returns the value of this._isChechedOut which is undefined. The console therefore shows undefined as the output.

2 Likes