Meal Maker - undefined?

Hi guys, I have been working on objects project, Meal Maker and it gives me undefined / NaN as a result.
I checked video as well and I don’t see what is different… could you help me please

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: this.dishName, price: this.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}, ${dessert.name}. The price is ${totalPrice}.`; } } menu.addDishToCourse('appetizers', 'Halloumi salad', 3); menu.addDishToCourse('appetizers', 'chicken salad', 4); menu.addDishToCourse('appetizers', 'prociutto salad', 4); menu.addDishToCourse('mains', 'salmon risotto', 7); menu.addDishToCourse('mains', 'butternut squash roast', 7); menu.addDishToCourse('mains', 'beef stew', 8); menu.addDishToCourse('desserts', 'lemon cheesecake', 4); menu.addDishToCourse('desserts', 'matcha', 3); menu.addDishToCourse('desserts', 'coffee', 3); let meal = menu.generateRandomMeal(); console.log(meal);

Hi and welcome to the forums!

It looks like your problem is this section here:

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

If you look at it in your codebyte, you’ll see that dishName and dishPrice are greyed out. In most code editors this means that this parameter is never actually used within the function. We can see why here:

const dish = {
   name: this.dishName,
   price: this.dishPrice
}

When you’re referencing dishName and dishPrice you are using the this keyword, however this doesn’t work. this is used when you need to refer to something that is a property of an object from within that object. For example this._courses refers to the _courses property on the current object. However dishName and dishPrice are parameters for the addDishToCourse() method and not properties on the current object, therefore this.dishName and this.dishPrice don’t exist and return undefined. This can easily be fixed by removing the this keyword to reference the parameters instead. See below.

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._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}, ${dessert.name}. The price is ${totalPrice}.`; } } menu.addDishToCourse('appetizers', 'Halloumi salad', 3); menu.addDishToCourse('appetizers', 'chicken salad', 4); menu.addDishToCourse('appetizers', 'prociutto salad', 4); menu.addDishToCourse('mains', 'salmon risotto', 7); menu.addDishToCourse('mains', 'butternut squash roast', 7); menu.addDishToCourse('mains', 'beef stew', 8); menu.addDishToCourse('desserts', 'lemon cheesecake', 4); menu.addDishToCourse('desserts', 'matcha', 3); menu.addDishToCourse('desserts', 'coffee', 3); let meal = menu.generateRandomMeal(); console.log(meal);
1 Like

Thank you so much!! It is working perfectly and I understood what the problem was!