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!


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,

    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 ${}, ${}, + ${} 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()


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) {

myObj.myArr = 3;
myObj.myArr = 4;
myObj.myArr = 5;

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?

Yes. seems all values show number properly. just don’t show number when combined together!

tried again. seems my main.price is not a numeric value. but don’t know how to get it fixed!

oh god finally. lol. I need to open my eyes for details. the problem was main.Price. should not have been capitalised. this is the right way: main.price!

thanks a lot!!!