Meal Maker project question regarding getter/setter implementation

Hey I just finished the Meal Maker project found on:

I ran into an issue while I was implementing the getter and setter functions. Please check addDishesToCourse() for my comments on the issue.

this.courseName = dish;
This is my line to call my setter. courseName is a parameter which is supposed to pass ‘appetizers’, ‘mains’, or ‘desserts’. However, this line actually creates a new object within menu called courseName with the dishes inside. Any one know why this is happening?

const menu= {
_courses: {
_appetizers:,
_mains:,
_desserts:
},

get appetizers (){
return this._courses._appetizers;
},
set appetizers (setApp){
this._courses._appetizers.push(setApp);
},

get mains (){
return this._courses._mains;
},
set mains (setMain){
this._courses._mains.push(setMain);
},

get desserts (){
return this._courses._desserts;
},
set desserts (setDesserts){
this._courses._desserts.push(setDesserts);
},

get courses(){
return {
_appetizers: this.appetizers,
_mains: this.mains,
_desserts: this.desserts
}
},

addDishesToCourse(courseName, dishName, dishPrice){
const dish = {
name: dishName,
price: dishPrice
};
if (courseName === ‘appetizers’) {
this.appetizers = dish;
} else if (courseName === ‘mains’) {
this.mains = dish;
} else if (courseName === ‘desserts’){
this.desserts = dish;
}
//this.courseName = dish; //why doesnt this work?
//above line creates a new object named courseName within ${menu}
//console.log(courseName); //logs correct parameter passed
//this._courses[courseName].push(dish); // without getter/setter
},

getRandomDishFromCourse(courseName){
const dishes = this._courses[courseName];
const randomIndex = Math.floor(Math.random() * dishes.length);
return dishes[randomIndex]
},

generateRandomMeal(){
let appetizer = this.getRandomDishFromCourse(’_appetizers’);
let main = this.getRandomDishFromCourse(’_mains’);
let dessert = this.getRandomDishFromCourse(’_desserts’);
let mealCost = appetizer.price + main.price + dessert.price;
return You ordered ${appetizer.name}, ${main.name}, ${dessert.name}. Total is ${mealCost}.;
}
};

menu.addDishesToCourse(‘appetizers’, ‘Salad’, 5);
menu.addDishesToCourse(‘appetizers’, ‘Calamari’, 6);
menu.addDishesToCourse(‘appetizers’, ‘Snails’, 7);
menu.addDishesToCourse(‘mains’, ‘Meatballs’, 8);
menu.addDishesToCourse(‘mains’, ‘Steak’, 10);
menu.addDishesToCourse(‘mains’, ‘Potatoes’, 9);
menu.addDishesToCourse(‘desserts’, ‘Ice Cream’, 1);
menu.addDishesToCourse(‘desserts’, ‘Puffs’, 2);
menu.addDishesToCourse(‘desserts’, ‘Cake’, 3);

const meal = menu.generateRandomMeal();

console.log(menu.courses);
console.log(meal);

In javascript, objects are associative arrays and vice versa.

this means we end up with two ways to access properties/keys:

obj.prop // dot notation
obj['key'] /// associative array notation? 

When you have a string (courseName variable holds a string), you have to use associative array notation. You can’t use the dot nation. The dot notation only works with the name of the property.