Meal Maker Help

Get Help JavaScript
,
#1

I’m having trouble with my code and I am getting error: RangeError: Maximum call stack size exceeded.

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 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 randomIndex = Math.floor(Math.random() * dishes.length);
    return dishes[randomIndex];
  },
  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 price is ${totalPrice}`;
  }
};

menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
enu.addDishToCourse('appetizers', 'Bread', 3.00);
enu.addDishToCourse('appetizers', 'Octopus', 12.00);

menu.addDishToCourse('mains', 'Burger', 11.00);
menu.addDishToCourse('mains', 'Steak', 22.00);
menu.addDishToCourse('mains', 'Lobster', 40.00);

menu.addDishToCourse('desserts', 'Ice Cream', 8.00);
menu.addDishToCourse('desserts', 'Cake', 13.00);
menu.addDishToCourse('desserts', 'Cheese Board', 15.00);

const meal = menu.generateRandomMeal ();
console.log(meal);
#2

This means, you have functions endlessly calling itself:

// DO NOT RUN THIS CODE
const x = () = > {
   x();
}

x();

just a simplified demonstration of the problem. Except in your case the problems are caused by the getters, the moment we try to access one of the courses (mains for example). we have a problem:

  get mains() {
    return this._courses.mains
  },

this._courses within the mains getter will invoke the _courses getter:

  get _courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts,
    };
  },

where this.mains will invoke the mains getter, which will invoke the _courses getter and so forth.