Meal Maker Project

Hey guys and gals,

Hope you can help me with a problem.
The code below creates a ‘maximum call stack error’.
Now I followed all the hints and the youtube video provided, i still can’t put my finger on where i am doing something wrong.

The error supposedly means two functions are calling each other or a function is calling itself. I tried changing some function names, but to no avail.

Any help would be greatly appreciated, thanks in advance!

P.S. Step 6 in the ’ Meal Maker’ project - https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

const menu = {
  _courses: {
    appetizers: [],
  },
get appetizers(){return this._courses.appetizers},
set appetizers(inputData){this._courses.appetizers = inputData},

  
  get _courses(){
    return {
      appetizer: this.appetizers, //the error occurs here
    }
  }  
};

Your getter should not be named _courses. By convention you should call it just courses without the underscore. You would then invoke the getter like so: menu.courses. If you wanted it logged to the console for example: console.log(menu.courses);. Happy coding!

1 Like

This doesn’t compare with the data structure given in the property definition. We don’t wish to replace a value, but rather add to a list of values. It will take a .push to the defined array if this setter is to be effective.


Addendum

Let’s look at the getter/setter mechanics when a property value is an array object.

foo = {
  _bar: [],
  get bar () {
    return this._bar
  },
  set bar (b) {
    this._bar.push(b)
  }
}

The call to the setter is an assignment…

foo.bar = 42

This effectively ties up the getter while the setter is at work.

Wrap your head around that one for a moment. It will make sense that we cannot use a getter in setter method. Look up circular references for the technical details. They can occur and we should know how to avoid them.

Another mindset is to not use a setter on a data structure. Instead, use an add method that acts upon the aliased property directly, so it would do the pushing. No setter would be employed.

As it turns out we can safely implement this process without giving up the identity of the aliased property

foo = {
  _bar: [],
  get bar () {
    return this._bar
  },
  addBar (b) {
    this.bar.push(b)
  }
}

We still use the getter to obscure the backing variable.

1 Like