if someone could explain why the getter method in this code is returning undefined, that would be appreciated. I figured it might be something to do with the 'this' context. Is the this.appetizers returning undefined because of the this context? When I call a method on the object and then that method calls the get method it fails, is this because the this context changes to the function object? I thought this could be the case but I have another code example that does this and it works fine.
let menu = {
_courses: {
_appetizers: [],
_mains: [],
_desserts: [],
get appetizers() {
return this._appetizers;
},
get mains() {
return this._mains;
},
get desserts() {
return this._desserts;
},
set appetizers(appetizerIn) {
},
set mains(mainIn) {
},
set desserts(dessetIn) {
}
},
get courses() {
return {
appetizers: this.appetizers,
mains: this.mains,
desserts: this.desserts };
},
addDishToCourse(courseName, name, price) {
const dish = {
name,
price
};
this.courses[courseName].push(dish) // fails here
},
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 starts with a ${appetizer.name}, followed by the main dish ${main.name}, ending with a dessert of ${dessert.name}. The total price of your dish is £${totalPrice}`;
}
};
menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
menu.addDishToCourse('appetizers', 'Potato Cakes with Smoked Salmon & Cream Cheese', 5.50);
menu.addDishToCourse('appetizers', 'Smoked Salmon, Dill & Lemon Paté', 4.25);
menu.addDishToCourse('appetizers', 'Mini Avocado Toasts', 3.50);
menu.addDishToCourse('mains', 'Spinach & Ricotta Rotolo', 6.75);
menu.addDishToCourse('mains', 'Baked Sea Bass with Lemon Caper Dressing', 8.75);
menu.addDishToCourse('mains', 'Butternut Chilli', 7.50);
menu.addDishToCourse('mains', 'Grilled Miso Salmon with Rice Noodles', 8.50);
menu.addDishToCourse('mains', 'Spinach & Ricotta Rotolo', 6.75);
menu.addDishToCourse('desserts', 'Salted Chocolate & Hazelnut Brownies', 5.00);
menu.addDishToCourse('desserts', 'Cherry & Almond Frangipane Galette', 5.75);
menu.addDishToCourse('desserts', 'Chocolate & Malt Loaf Torte', 5.50);
menu.addDishToCourse('desserts', 'Chocolate Hazelnut Ice cream Cheesecake', 5.00);
menu.addDishToCourse('desserts', 'Peanut Butter Berry Crisp', 5.00);
let meal = menu.generateRandomMeal();
console.log(meal);
As mentioned in the comments, it's undefined. This is because even though you have a getter, it still sits under the _courses object:
let menu = {
_courses: {
_appetizers: [],
get appetizers() {
return this._appetizers;
},
...
}
}
So, you'll want to use this._courses.appetizers, which is a getter for this._courses._appetizers