Project Meal Maker confusion

Hello,
meal-maker project = https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-ii/modules/fecp-learn-javascript-syntax-objects/projects/meal-maker

I am having a ■■■■ of a time trying to understand getters and setters, mostly setters. I am trying to figure out how to put it in the code for meal maker. The thing is I am having a hard time on where and how to put it in. I just don’t have the understanding on how to work with getters and setters. So I am trying to figure it out step by step then I got stuck
here is the 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,
      };
      //console.log(typeof courseName);
   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} and ${dessert.name}. The price is ${totalPrice}.`;
  },
};

menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
menu.addDishToCourse('appetizers', 'wings', 6.50);
menu.addDishToCourse('appetizers', 'porogees', 8.00);

menu.addDishToCourse('mains', 'stake', 15.25);
menu.addDishToCourse('mains', 'ribs', 12.50);
menu.addDishToCourse('mains', 'somthing', 10.00);

menu.addDishToCourse('desserts', 'ice cream', 4.50);
menu.addDishToCourse('desserts', 'pie', 8.25);
menu.addDishToCourse('desserts', 'cake', 6.75);

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

//console.log(menu.courses);

I tried to brake it down. I first looked at the input of meals and looked at where they went.
I figured they went to addDishToCourse. When I looked at it courseName would take a string like “appetizers” then dishName took in a name like wings, then dishPrice took the price of it. after that you return dish. I got stuck here because your are returning something like this.

return this.courses['appetizers'].push(dish);

" menu.addDishToCourse(‘appetizers’, ‘wings’, 6.50); " is what you input in to addDishToCourse.
so my main questions are:

  1. How does it know where it is pushing the dish if appetizers is a string and not the appetizers object array.
  2. What is the purpose the setter for question 8’s hint. I am lost on how to apply setter.

I am not asking for full on answer for question 2. I just need more of a hint or a better direction on understanding it. I have gone over the setter and getter in the object lesson but I am having a hard understanding them and how to implement them.

If my format for this question is too confusing, let me know so that I can try to improve on that.

ps I tried to put it in project with the tag meal maker but I couldn’t do it sorry.

Hi,

The method uses backet notation.
This

courses['appetizers']

is the same as if you wrote it with dot notation

courses.appetizers

this.courses from your addDishToCourse method get the _courses object from the getter.
To illustrate that a little further, you could add another method to your menu object:

addDishToStarters(courseName, dishName, dishPrice){
     const dish = {
        name: dishName,
        price: dishPrice,
      };
      //console.log(typeof courseName);
   this.courses.appetizers.push(dish);
  }

Then let’s call that method to add a dessert:

menu.addDishToStarters('desserts', 'Mousse au chocolat', 4.50);

Let’s use the getter to see what happened:

[{
  name: "ice cream",
  price: 4.5
}, {
  name: "pie",
  price: 8.25
}, {
  name: "cake",
  price: 6.75
}]

No Mousse au chocolat. It’s here:

console.log(menu.appetizers);
[{
  name: "Caesar Salad",
  price: 4.25
}, {
  name: "wings",
  price: 6.5
}, {
  name: "porogees",
  price: 8
}, {
  name: "Mousse au chocolat",
  price: 4.5
}]

That’s the difference between dot notation and bracket notation. With bracket notation you can use variables.

That’s a good question in ragard to this particular project. The way the setter is (and according to the instructions should be) written is a little useless for this project. We have the addDishToCourse method for this purpose.
With the setters, you could just replace a courses list entirely:

menu.mains = [{
  name: "Quiche",
  price: 15.25
}, {
  name: "some veggiestuff",
  price: 10
}]

I kept the dishes you added with the addToCourse method before. Yet this:

console.log(menu.mains.length); // 2

In brief getters and setters become important when collaborating with others. You can define which object values can and should be altered and which shouldn’t. In combination with the underscores they simulate the principle of private and public variables – principles known in other languages.

1 Like