Maximum Call Stack Exceeded

a4ther · March 15, 2020, 10:53pm

I am getting this error even though I have verified that I have no infinite loops. I have only called things when the project told me to, things like getters and setters. I don’t know why I am getting this and every time I comment something out it comes up with another one of these errors.

const menu = {
  _courses: { 
  appetizers: [],
  mains: [],
  desserts: []
},
  get appetizers() {
    return this._courses.appetizers;
  },
      get mains() {
    return this.course.mains;
  },
          get desserts() {
    return this.course.desserts;
  },

      set appetizers(appetizers) {
        this.courses.appetizers = appetizers;
      },
      set mains(mains) {
        this.courses.mains = mains;
      },
          set appetizers(desserts) {
        this.courses.desserts = desserts;
      },
            get _courses() {
      return {
        appetizers: this.appetizers,
        mains: this.mains,
        desserts: this.desserts
      };
    },
      addDishToCourse (courseName, dishName, dishPrice) { 
     const dish = {
     name: dishName,
     price: dishPrice,
   
   }; 
        console.log(this.addDishToCourse());
this._courses[courseName].push(this.addDishToCourse());
        
  },
     getRandomDishFromCourse: function(courseName) {
    var dishes = this._courses[courseName];
     if (dishes !== undefined) {
       var randomIndex = Math.floor(Math.random() * dishes.length);
      return randomIndex;
     }
  },
  
  generateRandomMeal: function() { //This is the problem.
   var appetizer = this.getRandomDishFromCourse('appetizers');
    var main = this.getRandomDishFromCourse('mains');
    var dessert = this.getRandomDishFromCourse('dessert');
    return 'Your meal is ' + this.appetizers[appetizer].name + ', ' + this.mains[main].name + ', and ' + this.desserts[dessert] + '. The total price is $' + this.totalPrice   + '.'; 
  }
};

menu.addDishToCourse('appetizers', 'Bread Loaf', 4.25);
menu.addDishToCourse('appetizers', 'Caesar Salad', 3.50);
menu.addDishToCourse('appetizers', 'Small Soup', 4.50);
menu.addDishToCourse('mains', 'Steak Dinner', 20.00);
menu.addDishToCourse('mains', 'Spaghetti', 16.00);
menu.addDishToCourse('mains', 'Turkey Dinner', 18.99);
menu.addDishToCourse('desserts', 'Icecream', 5.99);
menu.addDishToCourse('desserts', 'Cookies', 5.99);
menu.addDishToCourse('desserts', 'Jello', 5.99);


var meal = menu.generateRandomMeal();
console.log(meal);

Project

mtf · March 15, 2020, 10:57pm

Things like that create circular references. Be sure to access the backing variable from inside getters and setters.

a4ther · March 15, 2020, 10:57pm

I do not fully understand what you said.

mtf · March 15, 2020, 10:59pm

What is the declared name of the menu property? _courses. That is the backing variable. So,

this._courses. ...

a4ther · March 15, 2020, 11:33pm

I have been trying to fix this for a while and I can’t figure this out I have looked at the tutorial video, tried increasing the limit, rewriting the code in different ways but nothing has been working for me. I don’t know what to do.

mtf · March 16, 2020, 12:17am

Let’s review the code you have at present. Please paste into a reply (as a code sample </>), along with the URL of the lesson page so we can read the instructions and see our own solution, for insight.

a4ther · March 16, 2020, 12:14am

I know you told me to change the getters and setters but I couldn’t figure out what to replace their block code with.

const menu = {
  _courses: { 
  appetizers: [],
  mains: [],
  desserts: []
},
  get appetizers() {
    return this._courses.appetizers;
  },
      get mains() {
    return this._courses.mains;
  },
          get desserts() {
    return this._courses.desserts;
  },

      set appetizers(appetizers) {
        this._courses.appetizers = appetizers;
      },
      set mains(mains) {
        this._courses.mains = mains;
      },
          set appetizers(desserts) {
        this._courses.desserts = desserts;
      },
              get _courses() {
    return {
        appetizers: this.appetizers,
        mains: this.mains,
        desserts: this.desserts
      };
    },
      addDishToCourse (courseName, dishName, dishPrice) { 
     const dish = {
     name: dishName,
     price: dishPrice,
   
   }; 
           
this._courses[courseName].push(this.dish);
        },
    
        getRandomDishFromCourse: function(courseName) {
    var dishes = this._courses[courseName];
     if (dishes !== undefined) {
       var randomIndex = Math.floor(Math.random() * dishes.length);
        return randomIndex;
     }
  },
  
  generateRandomMeal: function() { 
   var appetizer = this.getRandomDishFromCourse('appetizers');
    var main = this.getRandomDishFromCourse('mains');
    var dessert = this.getRandomDishFromCourse('desserts');
    return 'Your meal is ' + this.appetizers[appetizer].name + ', ' + this.mains[main].name + ', and ' +this.desserts[dessert].name + '. The total price is $' + this.totalPrice   + '.'; 
  }
};


menu.addDishToCourse('appetizers', 'Bread Loaf', '4');
menu.addDishToCourse('appetizers', 'Caesar Salad', '3');
menu.addDishToCourse('appetizers', 'Small Soup', '4');
menu.addDishToCourse('mains', 'Steak Dinner', '20');
menu.addDishToCourse('mains', 'Spaghetti', '16');
menu.addDishToCourse('mains', 'Turkey Dinner', '18');
menu.addDishToCourse('desserts', 'Icecream', '5');
menu.addDishToCourse('desserts', 'Cookies', '5');
menu.addDishToCourse('desserts', 'Jello', '5');


var meal = menu.generateRandomMeal();
console.log(meal);

Lesson

mtf · March 16, 2020, 12:21am

That will create a circular reference, perhaps?

a4ther · March 16, 2020, 12:20am

Ah, I didn’t see that

mtf · March 16, 2020, 4:52am

menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetisers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  }
}

 > menu.courses
<- {appetisers: Array(0), mains: Array(0), desserts: Array(0)}
 > menu.courses.appetisers
<- []
 >

menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  },
  set appetizers (appetizer) {
    this.courses.appetizers.push(appetizer)
  }
}

 > menu.appetizers = 'potato peels'
<- "potato peels"
 > menu.courses.appetizers
<- ["potato peels"]

menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  },
  set appetizers (appetizer) {
    this.courses.appetizers.push(appetizer)
  },
  get appetizers () {
    return this.courses.appetizers
  }
}

 > menu.appetizers = 'potato peels'
<- "potato peels"
 > menu.appetizers
<- ["potato peels"]
 >

Now we have a prototype that will enable us to work with the data. We know that we can reach our properties with typical notation while the special methods handle the behind the scenes tasks.