Meal maker returning undefined and NaN

I was wondering if anyone could help me understand why this is printing as “Your meal is undefined, undefined and undefined. The total price is $NaN.”

const menu = { _courses: { appetizers: [], mains: [], desserts: [] }, get appetziers() { return this._courses.appetizers }, get mains() { return this._courses.mains }, get desserts() { return this._courses.desserts }, set appetizers(appetizersIn) { this._courses.appetizers = appetizersIn }, set mains(mainsIn) { this._courses.mains = mainsIn }, set desserts(dessertsIn) { this._courses.desserts = dessertsIn }, get courses() { return { appetizers: this.appetizers, mains: this.mains, desserts: this.desserts, } }, addDishToCourse(courseName, dishName, dishPrice) { const dish = { price: this.dishPrice, name: this.dishName, }; 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 mains = this.getRandomDishFromCourse('mains') const desserts = this.getRandomDishFromCourse('desserts') const totalPrice = appetizer.price + mains.price + desserts.price return `Your meal is ${appetizer.name}, ${mains.name} and ${desserts.name}. The total price is $${totalPrice}.` } }; menu.addDishToCourse('appetizers', 'Salad', 4.00); menu.addDishToCourse('appetizers', 'Mozz sticks', 6.00); menu.addDishToCourse('appetizers', 'Garlic bread', 3.25); menu.addDishToCourse('mains', 'Chicken parm', 16.00); menu.addDishToCourse('mains', 'Pasta', 11.50); menu.addDishToCourse('mains', 'Eggplant parm', 14.75); menu.addDishToCourse('desserts', 'Gelato', 4.50); menu.addDishToCourse('desserts', 'Cannoli', 3.25); menu.addDishToCourse('desserts', 'Cheesecake', 5.00); let meal = menu.generateRandomMeal(); console.log(meal);

https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

I inserted a .log() method call in your code:

    generateRandomMeal(){

        const appetizer = this.getRandomDishFromCourse('appetizers')

        const mains = this.getRandomDishFromCourse('mains')

        const desserts = this.getRandomDishFromCourse('desserts')

        console.log(appetizer, mains, desserts);
        const totalPrice = appetizer.price + mains.price + desserts.price

        return `Your meal is ${appetizer.name}, ${mains.name} and ${desserts.name}. The total price is $${totalPrice}.`

    }

which gives us objects with properties which have undefined values

which tells me, something is very likely gone wrong when adding the dishes, so lets add another log:

     addDishToCourse(courseName, dishName, dishPrice) {

        const dish = {

            price: this.dishPrice,

            name: this.dishName,

        };

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

    },

seems creating your dish object does not go well, this.dishPrice and this.dishName are not defined.

It was as simple as just removing this. from dishPrice and dishName. I appreciate your help.

but do you also understand why that change is significant? what the impact/implications are?

I believe it’s because these are inputs rather than another method so they don’t require this. if I’m wrong or missing something please do let me know.

1 Like

indeed, they are parameters (inputs) of the method. They are not a property or method of the object