Has anyone completed the Meal Maker project using the getter/setter methods?

#1

If I use:
this.courses[courseName] = dish;
rather than:
this._courses[courseName].push(dish);

I will get a ‘Maximum call stack size exceeded error’. I’ve done some Googling and it looks like numerous people have had this same issue in the past. Is it possible to actually use the getter/setter methods to complete the exercise as it suggests? It seems there is a circular-reference in the code itself that it asks you to write.

The lesson: https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

#2

a simple example of getters:

const myObj = {
  _abc: 'def',
  get abc()
  {
    return this._abc;
  }
}

console.log(myObj.abc);

the getter (abc) will read the property (_abc), to get the maximum call stack size exceeded error, we would need to do:

const myObj = {
  _abc: 'def',
  get abc()
  {
    return this.abc;
  }
}

now the getter will endlessly call itself.

even if you do:

const myObj = {
  abc: 'def',
  get abc()
  {
    return this.abc;
  }
}

you will get an error.

so i think something goes wrong with your code, but difficult to say without seeing your full code.

#3

Here’s my code:


let menu = 
    {
      _courses: 
      {
        _appetizers : [],
        _mains: [],
        _desserts: [],
        
        get appetizers()
        {
          return this._appetizers;
        },
        get mains()
        {
          return this._mains;
        },
        get desserts()
        {
          return this._deserts;
        },
        set appetizers(appetizer)
        {
          this._appetizers.push(appetizer);
        },
        set mains(main)
        {
          this._mains.push(main);
        },
        set desserts(dessert)
        {
          this._desserts.push(dessert);
        }
      },
      
      get courses()
      {
        return {
          appetizers: this.appetizers,
          mains: this.mains,
          desserts: this.desserts
        }
      },
      
      addDishToCourse: function(courseName, dishName, dishPrice)
      {
        const dish = 
              {
                name: dishName,
                price: dishPrice
              }
        
        this._courses[courseName] = dish;
      },
      
      getRandomDishFromCourse: function(courseName)
      {
        let dishes = this._courses[courseName];
        let random = Math.floor(Math.random() * dishes.length)
        return (dishes[random]);
      },
      
      generateRandomMeal: function()
      {
        let appetizer = this.getRandomDishFromCourse("appetizers");
        let main = this.getRandomDishFromCourse("mains");
        let dessert = this.getRandomDishFromCourse("desserts");
        
        let totalPrice = (appetizer.price + main.price + dessert.price);
        
        return (`Appetizer: ${appetizer.name} \nMain: ${main.name} \nDessert: ${dessert.name} \nTotal Cost: $${totalPrice}
               `);
      },
    }

menu.addDishToCourse('_appetizers', 'bread', 5);
menu.addDishToCourse('_appetizers', 'eggrolls', 3);
menu.addDishToCourse('_appetizers', 'soup', 2);
menu.addDishToCourse('_mains', 'steak', 15);
menu.addDishToCourse('_mains', 'pasta', 10);
menu.addDishToCourse('_mains', 'sandwhich', 10);
menu.addDishToCourse('_desserts', 'cake', 5);
menu.addDishToCourse('_desserts', 'ice cream', 5);
menu.addDishToCourse('_desserts', 'cookies', 5);

console.log(menu.generateRandomMeal())

Do you have any idea what could be wrong?

#4

In your example, would the getter be called when you do:

let myVar = myObj._abc;

?

#5

simple enough to find out:

const myObj = {
  _abc: 'def',
  get abc()
  {
    console.log('getter being called');
    return this._abc;
  }
}

let myVar = myObj._abc;

When you don’t know something in programming, try figuring out a way to understand it :slight_smile:

#6

i get a very different problem with your code, which starts here:

let dessert = this.getRandomDishFromCourse("desserts");

then within getRandomDishFromCourse function, here:

let dishes = this._courses[courseName];

`courseName is desserts, which will trigger the getter:

get desserts()
        {
          return this._deserts;
        },

which has a typo in, the property should be _desserts

also your courses getter method:

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

won’t work, menu doesn’t have an appetizers property or getter.

what you could do is the following:

let menu = 
    {
      _courses: 
      {
        _appetizers : [],
      },
     get appetizers()
     {
          return this._courses._appetizers;
     },

now menu has appetizers, so now you can do:

get courses()
      {
        return {
          appetizers: this.appetizers,
       }
   }

now this.appetizers is the getter.