Meal Maker - cannot read property 'mains' of underfined

Hello everyone! I have been watching the tutorial for meal maker and searching the forums for what feels like hours and i really need a fresh pair of eyes. Completely new to programming, i have no idea what is wrong with this code if anyone could look through it i would be eternally grateful

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

  get desserts(){
    return this._courses.desserts;
  },
//why are these setter parameters red but in the tutorial they are blue?!?
  set appetizers(appetizers){
    this._courses.appetizers = appetizers;
  },

  set mains(mains){
    this._courses.mains = mains;
  },

  set deserts(desserts){
    this._courses.desserts = desserts;
  },

  get courses(){
    return this._courses;
  }, // courses getters and setters

  set _courses(menuIn){
    this._courses = menuIn
  },

  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 dish1 = this.getRandomDishFromCourse('appetizers')
  const dish2 = this.getRandomDishFromCourse('mains')
  const dish3 = this.getRandomDishFromCourse('desserts')
  const totalPrice = dish1.prize + dish2.price + dish3.price

  return `Your meal is going to be ${dish1.name}, ${dish2.name}, ${dish3.name}, the total will be ${totalPrice}. Enjoy your meal sir.`
}
};


menu.addDishToCourse('mains', 'Spaghetti', 24)

And this is the error message i am getting

/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:44
     return this._courses[courseName].push(dish);
                         ^

TypeError: Cannot read property 'mains' of undefined
    at Object.addDishToCourse (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:44:26)
    at Object.<anonymous> (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:64:6)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:427:7)
    at startup (bootstrap_node.js:151:9)

Also - why is the tutorial video (Javascript Project Meal Maker - YouTube)'s
setter parameters turn blue but my parameters are turning red? Is there a difference? Something tells me that is the problem but my code seems identical to the tutorial up to that point

Hi,
this error tells you a lot already:

Let’s see what ‘mains’ is supposed to be a property of:
return this._courses[courseName].push(dish);
You pass ‘mains’ as an argument to ‘courseName’. That is (or should be) a property of ‘this._courses’.
You have defined it and referenced it correctly here:

But you have a duplicate key:

That setter is defined after the _courses object declaration and overwriting it. And it doesn’t return anything. Rewrite the setter and the issue should be gone.

I cannot judge the syntax highlighting issue. Depending on the code editor and the extension you’re using it might use different colors for syntax highlighting.

PS: You don’t need the return keyword if you’re just pushing an item to an array.

This gives me an entirely deeper perspective on setters and getters, thank you for the reply! :slight_smile: That explained a lot

1 Like