Meal Maker

Hi everyone,

Have two questions about this ‘Meal Maker’ Project in JavaScript.

  1. why do I get NaN for my price?
  2. I don’t understand why getter and setters are used? when I comment them out the code works the same!

project: https://www.codecademy.com/paths/web-development/tracks/web-dev-js-arrays-loops-objects/modules/learn-javascript-objects/projects/meal-maker

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) {
      return this._courses.appetizers = appetizers;
    },

    set mains (mains) {
    return this._courses.mains = mains;
    },

    set desserts(desserts) {
      return 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}, + ${dessert.name} The price is ${totalPrice}.`;
    },
  };

  menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
  menu.addDishToCourse('appetizers', 'Nachos', 6.00);

menu.addDishToCourse('appetizers', 'fries', 3.00);  
menu.addDishToCourse('mains', 'Chana Masala', 9.00);

menu.addDishToCourse('mains', 'Pizza', 12.00);
menu.addDishToCourse('mains', 'Falafel', 8.00);

menu.addDishToCourse('desserts', 'Nice Cream', 2.10);
menu.addDishToCourse('desserts', 'Chocolate cake', 3.20);
menu.addDishToCourse('desserts', 'Brownie', 1.00);

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


console.log(menu._courses.appetizers)

Lets inspect the values:

const totalPrice = appetizer.price + main.Price + dessert.price;
console.log(appetizer.price, main.Price, dessert.price);

that should narrow it down :wink:

I agree this project doesn’t do a good job of showing the advantages of using getters and setters.

here is a better example:

myObj = {
  _myArr: [],
  get myArr() {
      return this._myArr.join('-');
  },
  set myArr(valIn) {
    this._myArr.push(valIn);
  }
}

myObj.myArr = 3;
myObj.myArr = 4;
myObj.myArr = 5;
console.log(myObj.myArr);

now we changed the default behavior, under the hood, the _myArr property is an array, but we can easily output is a string to user (nice friendly representation)

furthermore, we could add validation to setter that only numbers would be allowed for example.

its a shame that JS doesn’t enforce the user of the setter, we can still manually update the property, and i think that is wrong. Then you build in a check (like only numbers allowed), and then the JS just allows you to bypass this. Rubbish.

Thanks for your help. I still get NaN for my price. I don’t know why! I am going crazy here lol

this you use the console.log like i showed you? To see which value doesn’t produce a number?