Introduction to JavaScript Project: Meal Maker

At the bottom of the code block, I don’t understand why we use this._courses[courseName].push(dish) and not this._courses.courseName.push(dish). I thought bracket notation is used when we have special characters but here we used brackets.

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(appetizers) {this.courses.appetizers = appetizers},
  set mains(mains) {this._courses.mains = mains},
	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,
    };
    this._courses[courseName].push(dish);
	},

in JS, objects are associative arrays and vice versa. This result in two syntax, first object syntax:

obj.prop = 'some value';

and associative array notation:

arr['key'] = 'some value'

when you have a string (courseName has a string value), you can only use the associative array notation.

Here’s the entire code:

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(appetizers) {this.courses.appetizers = appetizers},
  set mains(mains) {this._courses.mains = mains},
	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,
    };
    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} and ${dessert.name} and the total cost is ${totalPrice}.`;
  }
}

menu.addDishToCourse('appetizers','French Fries',2);
menu.addDishToCourse('appetizers','Onion Rings',3);
menu.addDishToCourse('appetizers','Cheese Balls',2.5);
menu.addDishToCourse('mains','Chicken Burrito',5);
menu.addDishToCourse('mains','Chicken Pizza',10);
menu.addDishToCourse('mains','Chicken Mole',6);
menu.addDishToCourse('desserts','Tres Leches',4);
menu.addDishToCourse('desserts','Ice Cream',1.5);
menu.addDishToCourse('desserts','Cookies',1);

console.log(menu.appetizers);
console.log(menu.mains);
console.log(menu.desserts);

let meal = menu.generateRandomMeal();
console.log(meal);

So, because in generateRandomMeal(), we use an input of ‘appetizers’, ‘mains’, and ‘desserts’, we are required to use brackets?

yes, given 'appetizers' (and the others) are strings, the object/dot notation only works when you use the name of the proprety.