Need Help with Meal Maker

Hello, I was doing the meal maker project as a part of the back-end engineer career path and I ran into a syntax error that said that it couldn’t read the property of undefined: Uncaught TypeError: Cannot read property ‘appetizers’ of undefined
at Object.addDishToCourse (:33:25)
at :50:6


const menu = {
  _courses: {
    appetizers: [], 
    mains: [],
    desserts: [], 
  }, 
  get appetizers(){
    this.courses.appetizers; 
  }, 
  get mains(){
    this.courses.mains; 
  }, 
  get desserts(){
    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(){
    
  }, 
  addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      price: dishPrice, 
      name: dishName, 
    };
    return this._courses[courseName].push(dish);  
  },
  getRandomDishFromCourse(){
    const dishes = this.courses[courseName]; 
    let i = Math.floor(Math.random()*dishes.length); 
    return dishes[i]; 
  }, 
  generateRanodmMeal(){
    const appetizers = this.getRandomDishFromCourse('appetizers'); 
    const mains = this.getRandomDishFromCourse('mains'); 
    const desserts = this.getRandomDishFromCourse('desserts'); 
    const totalPrice = appetizer.price + mains.price + desserts.price; 
    return `Your appetizer is ${appetizers.name}, ${mains.name}, and ${desserts.name} Your total price is ${totalPrice}`; 
  }, 
}; 


menu.addDishToCourse('appetizers', 'wings', 4.58); 
menu.addDishToCourse('appetizers', 'fries', 3.54); 
menu.addDishToCourse('appetizers', 'chips', 2.65); 


menu.addDishToCourse('mains', 'pasta', 5.24); 
menu.addDishToCourse('mains', 'pizza', 6.14); 
menu.addDishToCourse('mains', 'spaghetti', 5.63); 


menu.addDishToCourse('desserts', 'cake', 3.91); 
menu.addDishToCourse('desserts', 'ice cream', 4.12); 
menu.addDishToCourse('desserts', 'brownie', 2.75); 

const meal = menu.generateRandomMeal();

console.log(meal); 

Thanks to the legends who respond

if we log this._courses:

  addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      price: dishPrice, 
      name: dishName, 
    };

    console.log(this._courses);
    return this._courses[courseName].push(dish);  
  },

we see undefined. So where does it come from? Looking at your getter:

  get _courses(){
    
  }, 

I don’t see anything returned. Which explains the undefined

1 Like

That will cause a circular reference. Remove the backing prefix (underscore) when naming a getter.

1 Like

Thanks, I completely forgot about that! I put return this.courses and I got the exact same syntax error :sweat:

const menu = {
  _courses: {
    appetizers: [], 
    mains: [],
    desserts: [], 
  }, 
  get appetizers(){
    this._courses.appetizers; 
  }, 
  get mains(){
    this.courses.mains; 
  }, 
  get desserts(){
    this.courses.desserts; 
  }, 
  set appetizers(appetizers){
    this.courses.appetizers = appetizers;
  }, 
  set mains(mains){
    this.couses.mains = mains; 
  }, 
  set desserts(desserts){
    this.couses.desserts = desserts; 
  }, 
  get _courses(){
    return this.courses; 
    },   
  addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      price: dishPrice, 
      name: dishName, 
    };
    return this._courses[courseName].push(dish);  
  },
  getRandomDishFromCourse(){
    const dishes = this.courses[courseName]; 
    let i = Math.floor(Math.random()*dishes.length); 
    return dishes[i]; 
  }, 
  generateRanodmMeal(){
    const appetizers = this.getRandomDishFromCourse('appetizers'); 
    const mains = this.getRandomDishFromCourse('mains'); 
    const desserts = this.getRandomDishFromCourse('desserts'); 
    const totalPrice = appetizer.price + mains.price + desserts.price; 
    return `Your appetizer is ${appetizers.name}, ${mains.name}, and ${desserts.name} Your total price is ${totalPrice}`; 
  }, 
}; 


menu.addDishToCourse('appetizers', 'wings', 4.58); 
menu.addDishToCourse('appetizers', 'fries', 3.54); 
menu.addDishToCourse('appetizers', 'chips', 2.65); 


menu.addDishToCourse('mains', 'pasta', 5.24); 
menu.addDishToCourse('mains', 'pizza', 6.14); 
menu.addDishToCourse('mains', 'spaghetti', 5.63); 


menu.addDishToCourse('desserts', 'cake', 3.91); 
menu.addDishToCourse('desserts', 'ice cream', 4.12); 
menu.addDishToCourse('desserts', 'brownie', 2.75); 

const meal = menu.generateRandomMeal();

console.log(meal); 

Thanks! removing the underscore fixed it!

Like mtf says, this will cause circular reference. And there is no courses property, so this will still result in undefined

Thanks for pointing that out :+1: