Meal Maker task help needed - Cannot read property 'push' of undefined

I haven’t finished the task yet but when I get to step 12 where I have to start populating the arrays with dishes. Something’s wrong with my addDishToCourse object because once I added all the menu.addDishToCourse lines at the bottom of the code the console returns this error:

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

TypeError: Cannot read property ‘push’ of undefined
at Object.addDishToCourse

I can’t work out why this is happening! I’ve gone through the code and the hints and really can’t spot the cause of this problem. Can anyone help?

Code below:


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

  },
  set appetizers(appetizerIn){

  },

  get mains(){

  },
  set mains(mainsIn){

  },
  get desserts(){

  },
  set desserts(dessertsIn){

  },

  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} and ${dessert.name}. The price is ${totalPrice}.`
},


}



menu.addDishToCourse('appetizers', 'half a dozen oysters', 3.53);
menu.addDishToCourse('appetizers', 'pate du fois gras', 434.0);
menu.addDishToCourse('appetizers', 'prawn cocktail', 13.5);
menu.addDishToCourse('mains', 'braised lamb shank', 9.64);
menu.addDishToCourse('mains', 'potted pheasant', 10.66);
menu.addDishToCourse('mains', 'Yorkie, rare', 3.55);
menu.addDishToCourse('desserts', 'Curly Wurly', 2.44);
menu.addDishToCourse('desserts', 'Um Bongo', 1.49);
menu.addDishToCourse('desserts', 'Twix, buttered', 9.99);

This error is generally caused by the key/property not existing on the object, resulting in undefined.

So we can inspect the state of our program by inserting .log():

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

which shows:

{
  appetizers: undefined,
  desserts: undefined,
  mains: undefined
}

so that helps us further. What could this be?

I think the problem is with your getters:

  get appetizers(){

  },
  set appetizers(appetizerIn){

  },

  get mains(){

  },
  set mains(mainsIn){

  },
  get desserts(){

  },
  set desserts(dessertsIn){

  },

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

your courses getter uses the appetizers getter (this.appetizers), but this getter doesn’t return anything anything, resulting in undefined

How do you intent to implement your getters and setters?

1 Like