Getting an error in this program but I cant find out why?

const menu = {
  _courses:{
    appetizers:[],
    mains: [],
    desserts: []
  },
  get appetizers(){
    return this._courses.appetizers;
  },
  set appetizers(appetizers){
    this._courses.appetizers = appetizers;
  },
  get mains(){
    return this._courses.mains;
  },
  set mains(mains){
    this._courses.mains = mains;
  },
  get desserts(){
    return this._courses.desserts;
  },
  set desserts(desserts){
    this._courses.desserts = desserts;
      },
  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 `I hope you enjoyed the ${appetizer}, ${main} and ${dessert}. The total today will be ${totalPrice}.`

  },
}

menu.addDishToCourse('appetizer', 'salad', 4.50);
menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);

An important first step is looking at what the error says. When I run locally I get this:

D:\Games and Hobbies\Programming\Javascript\Temporary Testing\test.js:37
        return this._courses[courseName].push(dish);
                                         ^

TypeError: Cannot read property 'push' of undefined
    at Object.addDishToCourse (D:\Games and Hobbies\Programming\Javascript\Temporary Testing\test.js:37:42)

We can see that the error is in the line return this._courses[courseName].push(dish); on line 37, and that it is stating TypeError: Cannot read property 'push' of undefined. This means it is trying to execute the push method on an object with type “undefined”. This tells us that for some reason, when this is being called this._courses[courseName] is returning undefined.

Therefore we next look at where this is called. The only places this happen are on line 54 and 55 (for me), namely:

menu.addDishToCourse('appetizer', 'salad', 4.50);
menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);

We can see here there’s a discrepancy. One gives the courseName as “appetizer” and the other as “appetizers” hence this is likely our issue. If we go look at the course list we see that the object is named “appetizers”. So by tracing this through, we see that the issue is simply a typo. Correcting this we get:

menu.addDishToCourse('appetizers', 'salad', 4.50);
menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);

And running again we see this runs correctly.


TL;DR

This is a lot of text for what amounts to a simple issue, but I wanted to be as clear as possible when going through how to debug this issue as it’s an invaluable skill. In most programming languages the error messages are very clear in what the issue was and where in the code it occurred. Learning to read this makes life a lot easier when trying to debug problems. Hopefully this helped in more ways than one!

This has been super helpful, I didnt know type errors meaning and it easily makes sense now that you said that.

1 Like