Meal Maker: Why am I getting this TypeError

Good day everyone I have been struggling 2 days with this error

js:41
    return this._course[courseName].push(dish)

TypeError: Cannot read property 'appetizers' of undefined
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(appetizer) {
      this._courses.appetizers = appetizer
    },
    set mains(main) {
      this._courses.mains = main
    },
    set desserts(dessert) {
      this._courses.desserts = dessert
    }
  },

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

  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
    return this._course[courseName].push(dish)
  },

  getRandomDishFromCourse(courseName){
    const dishes = this._courses[courseName]
    const randomDish = Math.floor(Math.random() * dishes.length)
    return dishes[randomDish]
  },

  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}, ${desserts.name} and total price is ${totalPrice}`
  }
};

menu.addDishToCourse('appetizers', 'salad', 4.25)
menu.addDishToCourse('appetizers', 'wings', 5.25)
menu.addDishToCourse('appetizers', 'fries', 6.67)

menu.addDishToCourse('mains', 'steak', 12.15)
menu.addDishToCourse('mains', 'chicken', 7.47)
menu.addDishToCourse('mains', 'fish', 14.05)

menu.addDishToCourse('desserts', 'coffee', 2.25)
menu.addDishToCourse('desserts', 'milkshake', 3.12)
menu.addDishToCourse('desserts', 'ice-cream', 1.05)

It’s pointing to the .push() method that Im using and I dont understand why it’s giving me this error

._course is not an existing property on the menu object? As such, JavaScript gives undefined

I think its just a small typo, look at what the property is called you actually want to use

Hi @stetim94 , I found the typo on this one but a new error occured. do you mind explaining this to me please.

pp.js:8
      return this._courses.appetizers
                          ^

TypeError: Cannot read property 'appetizers' of undefined
    at Object.get appetizers

I am going to talk about this code:

const menu = {
  _courses : {
    appetizers: [],
    mains: [],
    desserts: [],

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

within your appetizers getter, this is the courses object, which has 3 properties: appetizers, mains and desserts. No _courses properties. so this._courses will give undefined

I’m terribly sorry but I dont understand. :frowning: what exactly do I return in the getter method because taking out the this keyword gives me an error. taking out the ._courses gives me an error aswell.

That depends, how did you intent your getters and setters two work? You can either make them implement default behavior of the properties

or you could move the getters and setters to the menu object (outside the courses object) so you can access these properties through there getters even though the properties are nested another layer deep

1 Like

Thank you so much, I realized the getters and setters were inside the courses object. I appreciate the help! :smile: