Problem with Meal Maker project

Hello, I would like some help please. I am getting the error “Maximum call stack size exceeded” Can someone please look at my code and tell me what’s wrong? I double checked with the video and it’s pretty much the same as I can see.
Thank you for your help!
My code:

const menu = {

  _courses: {

    appetizers: [],

    mains: [],

    desserts: [],

    get appetizers() {},

    set appetizers (appetizersIn) {},

    get mains() {},

    set mains (mainIn) {},

    get desserts()  {},

    set desserts (dessertIn)  {},

  },

  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 desserts(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

    }

    return this._courses[courseName].push(dish);

  }, 

   

   getRandomDishFromCourse(courseName) {

     const dishes = this._courses[courseName];

     const randomNumber = Math.floor(Math.random() * dishes.length);

     return dishes[randomNumber];

   },

    generateRandomMeal() {

      const appetizer = this.getRandomDishFromCourse('appetizers');

      const main = this.getRandomDishFromCourse('mains');

      const dessert = this.getRandomDishFromCourse('desserts');

      const totalPrice = appetizer.price + main.price + dessert.price

      return `Your meal is ${appetizer.name}, ${main.name}, ${dessert.name} and the total cost is ${totalPrice}.`;

    }

}

menu.addDishToCourse('appetizers', 'salad', 5.00);

menu.addDishToCourse('appetizers', 'fries', 2.50);

menu.addDishToCourse('appetizers', 'wings', 10.00);

menu.addDishToCourse('mains', 'steak', 20.00);

menu.addDishToCourse('mains', 'greek salad', 12.00);

menu.addDishToCourse('mains', 'bbq', 15.00);

menu.addDishToCourse('desserts', 'icecream', 9.00);

menu.addDishToCourse('desserts', 'cake', 12.00);

menu.addDishToCourse('desserts', 'fruits', 4.50);

const meal = menu.generateRandomMeal();

console.log(meal);

I have never been a fan of this approach. Do you have any what the error actually means? Have you tried to search the error on google? Because if you have no idea what might cause the error, you are just blindly following a video without knowing what you are looking for

according to this:

javascript - Maximum call stack size exceeded error - Stack Overflow

stackoverflow question, one possible cause is a function endlessly calling itself.

from MDN:

The get syntax binds an object property to a function that will be called when that property is looked up.

so in this case, you have getters, which lookup the property they are bound to, resulting in endless function calls

2 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.