JavaScript Object Lessons: Meal Maker error

Hello,
I’ve been scratching my noggin at why this code isn’t working on the Meal Maker exercise. It returns this error:

/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:26
    return {
    ^

RangeError: Maximum call stack size exceeded
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:26:5)
    at Object.get appetizers [as appetizers] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:8:16)
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:23)
    at Object.get appetizers [as appetizers] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:8:16)
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:23)
    at Object.get appetizers [as appetizers] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:8:16)
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:23)
    at Object.get appetizers [as appetizers] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:8:16)
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:23)
    at Object.get appetizers [as appetizers] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:8:16)

The code I wrote looks like this:

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(newAppetizer) {
    this._courses.appetizers = NewAppetizer;
  },
  set mains(newMain) {
    this._courses.mains = newMain;
  },
  set desserts(newDessert) {
    this._courses.desserts = newDessert;
  },
  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 mains = this.getRandomDishFromCourse('mains');
    const desserts = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
  },
};
menu.addDishToCourse('appetizers', 'Garlic Bread', 3);
menu.addDishToCourse('appetizers', 'Chicken Tendies', 5);
menu.addDishToCourse('appetizers', 'Cheese Tray', 9.5);
menu.addDishToCourse('mains', 'Pizza Margheritta', 9);
menu.addDishToCourse('mains', 'Francesinha', 10);
menu.addDishToCourse('mains', 'Chicken Parmesan', 7.5);
menu.addDishToCourse('desserts', 'Chocolate Cake', 3.5);
menu.addDishToCourse('desserts', 'Red Velver Cake', 3.5);
menu.addDishToCourse('desserts', 'Baba de Camelo', 4);
let meal = menu.generateRandomMeal();
console.log(meal);

Hi,
this error tells you that you’re running an infinite loop.
If you look at the error details you see the order of execution:
get _courses then get appetizers then get _courses then get appetizers and so on.
You have a duplicate key and the getter calls another getter that calls the getter…

1 Like

Ahhh so I shouldn’t call getters by the same name as the thing they’re getting, thus the _ to change it. Thank you!
Now however, I’ve encountered another issue, it’s just returning “undefined”. Made a few changes to the code:

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._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.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;
  },
};
menu.addDishToCourse('appetizers', 'Garlic Bread', 3);
menu.addDishToCourse('appetizers', 'Chicken Tendies', 5);
menu.addDishToCourse('appetizers', 'Cheese Tray', 9.5);
menu.addDishToCourse('mains', 'Pizza Margheritta', 9);
menu.addDishToCourse('mains', 'Francesinha', 10);
menu.addDishToCourse('mains', 'Chicken Parmesan', 7.5);
menu.addDishToCourse('desserts', 'Chocolate Cake', 3.5);
menu.addDishToCourse('desserts', 'Red Velver Cake', 3.5);
menu.addDishToCourse('desserts', 'Baba de Camelo', 4);
let meal = menu.generateRandomMeal();
console.log(meal);

What does the error say is undefined exactly? This error usually tells you the property it is reading like ‘Cannot read property of undefined reading xxxx’ Then you can look for that xxxx and see what it is chained to. Like myObject.xxxx. Then ‘myObject’ is undefined. That way you can trace the error back. Log all parameters in a function and see if they are all what you expect them to be.

generateRandomMeal method does not return anything? So trying to log the returned result:

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

will result in undefined