Meal Maker Step 7 - Unsure Why One Way Works & Another Doesn't

Get Help JavaScript
,
#1

Hi everyone,

I’m working on the Meal Maker project and I’m doing Step 7. At first my code wasn’t working and then I made a change (mostly a random change/educated guess) and then my code worked. Not quite sure what the difference is.

So, if you look below, in my setter “appetizers” I have it set with this._courses.appetizers.push(appIn). Then, further down in my method “addDishToCourse” I push to the “mains” array with this._courses[courseName].push(dish). Both of these ways achieve the desired result. However, at fist, I had “set appetizers” the way that “set desserts” looks now. Meaning I had it written like this._courses[appetizers].push(appIn) and was getting an error.

I’ve tried going back in lessons and reading some of the documentation, but I’m struggling to see why these two forms aren’t interchangeable. My instinct is telling me that it has something to do with scope, but I can’t seem to find solid footing here. Can anyone help me get pointed in the right direction?

I commented out the sections that will cause the code to throw an error.

As a secondary question, why does passing a string with this._courses[courseName].push(dish) work for the key mains? I had assumed that I was going to be wrong on that one, and that the string “mains” would not translate (idk if that’s the right term) to the key.

const menu = {
  _courses : {
    appetizers : [],
    mains : [],
    desserts : []
  },
  get appetizers(){

  },
  set appetizers(appIn){
    this._courses.appetizers.push(appIn);
  },
  get mains(){

  },
  set mains(mainIn){

  },
  get desserts(){

  },
  set desserts(dessertIn){
    this._courses[desserts].push(appIn);
  },
  get courses(){
    return {appetizers : this.appetizers, mains : this.mains, desserts : this.desserts}
  },
  addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      name : dishName,
      price : dishPrice
    };
    if(courseName === 'appetizers'){
      menu.appetizers = dish;
    }else if(courseName === 'mains'){
      this._courses[courseName].push(dish)
    }else if(courseName === 'desserts'){
      menu.desserts = dish;
    }
  }
};

menu.addDishToCourse('appetizers', 'Lo Mein', 12);
menu.addDishToCourse('mains', 'Kung Pao', 14);
//menu.addDishToCourse('desserts', 'Kung Pao', 14);


console.log(menu._courses.appetizers, menu._courses.mains)
//console.log(menu._courses.desserts)

Thank you!

#3

Hey, @ajax5289887092. Welcome to the forums!

Look at the first if statement and the last else if statement blocks, you’ve typed:

menu.appetizers = dish;
and
menu.desserts = dish;

Ask yourself. Even though these statements are similar, why is your code working for appetizers and breaking down for desserts? At first glance, you should see that there is nothing wrong with the code here. So, then think what does this code do?
menu.appetizers = dish; calls the setter method on it.

The setter does this work for you of pushing the dish to the appetizers array!

set appetizers(appIn){
    this._courses.appetizers.push(appIn);
  }

But the setter method for desserts has two syntax errors. Can you figure out what those are? Read the documentation on how to access the properties of an object here.

Hopefully that should clear your confusion of why
this._courses.[desserts].push(appIn) is wrong syntactically and also, you’re passing the wrong argument to the .push() method.
if you still need some hint, expand the following

hint

You can push to the desserts array using this:

set desserts(dessertIn){
    this._courses.desserts.push(dessertIn);
  }

or this:

set desserts(dessertIn){
    this._courses['desserts'].push(dessertIn);
  }

Notice how dessertIn is the argument for both the setter and the .push() method.

If you’re still not able to understand, do reach out on Codecademy Discord as well. Here’ s the link to join the discord server of Codecademy : https://discord.gg/ZAsrP9dW

This can get a bit confusing so my advice is to take it slow and understand what’s going wrong and how the code is breaking down first. Go back to the codecademy chapter about objects and review them time and over. You’ll be able to solve this!

Happy Coding!

1 Like
#4

Thank you both so much for your replies! Genuinely appreciate it.

@goku-kun, I read more of the object documentation you linked and this section in particular was very helpful.

image
image878×426 19.1 KB

It also really helped me answer my question about what was going on. I wasn’t aware that, “each property is associated with a string value that can be used to access it”. I could see that what I was doing was working, but I wasn’t entirely sure why, and this really helped me see why.

@armaan_barak I’m still a little bit lost by one of your explanations, but I think I see what you’re saying:

First of all, in the if else if code in the addDishToCourse() method, you need to ADD the dish to the ARRAY not change the array. You are assigning the appetizers or desserts to the dish. So the list changes to Object whereas you should be adding it to the array.

Are you saying that when I had it coded set desserts(dessertIn ){this._courses[desserts].push(dessertIn); I was trying to change the reference to the array property rather than adding to the array “desserts” ?

Really appreciate the help, you guys. I want to make sure I understand what I’m doing and not just getting the right answers.

1 Like
#5

Hey, @ajax5289887092!

Also, to clarify your following question:

Can you tell me what the line of code menu.appetizers = dish; would do if you decided to remove the setter for the appetizers? If there was no setter method available for appetizers, then the JavaScript will make a new property named appetizers and assign to it the dish object. But, since we have a setter available, the menu object shall call the setter for it and then the setter would push the dish object which it receives as argument in appIn parameter to the _courses.appetizers array which you can see here:

set appetizers(appIn){
    this._courses.appetizers.push(appIn);
  }

So, you’re not reassigning a new object to the properties of menu since the setters aren’t functioning in that way. The setters are taking the dish object and pushing it to your respective array.

I hope that clears out the remaining of your questions.

I’m glad that you followed up after reading the documentation and it helped you. But do come back to this topic and read about it like once a week to really solidify the topic. Play with it until you’re really comfortable using it.

2 Likes
#6

I’m not 100% sure I follow this yet. I see that I can use the dot syntax to create new key value pairs, which is why menu.appetizers = dish would create a key value pair of appetizers : dish if there was no setter, correct?

I guess I’m confused about the error I was getting when I had the code under my setter as this._courses[appetizers]push(appIn);. I would get a ReferenceError that said “desserts is not defined”. Where is it looking for this definition and why? I’m not certain, but I get the sense that, if I can understand why I’m getting that error I can be better equipped to fix it next time. Sorry. I’m not even entirely sure of how to ask my question, honestly.

Again, thank you so much for your help. I really appreciate it!

#7

Hey, @ajax5289887092.

You should definitely go through this lesson of Codecademy about Setters:

https://www.codecademy.com/courses/introduction-to-javascript/lessons/advanced-objects/exercises/setters

That would help in clearing your questions about setters.

Now, as to what you’ve asked above:

This is correct. If you didn’t have any setter with the name of appetizers, then a new property with the name of ‘appetizer’ will be made and assigned to it the value of dish and if the property existed before, then the value dish will be reassigned. This all happens when you don’t have a setter set up. But, if you do then instead of creating a new property or re-assigning a new value, the setter gets called when you write this line of code:

So, menu.appetizers = dish would call the setter defined as appetizers whose definition is as follows:

So, this setter will not create a new key-value pair, instead it will push the appIn which is our dish in menu.appetizers = dish to the array of appetizers.

Think of it this way, when I put both of these lines one of other, notice what’s going on in the code:

set appetizers(dish){
    this._courses.appetizers.push(dish);
    // you can even write this._courses["appetizers"].push(dish); 
    // both are valid
}
menu.appetizers = dish; // When this line gets executed, instead of making a new key-value object, it calls the setter 
//because there is a setter named appetizers defined in the menu object.

The reference error you were getting while pushing in desserts was because the syntax of your setter was wrong.
If you look at the setter you’ve declared here,

then, you can see that the syntax error is in accessing the property of _courses object.
Remember the way you can access object?

this._courses.desserts.push(appIn);
//or
this._courses["desserts"].push(appIn);

But what you’ve done while accessing the property is combined both the ways I’ve written above.

this._courses[desserts].push(appIn); // this is syntactically wrong

That should clear out everything. I know this is a bit confusing in the beginning but if you keep at it, you’ll get it in no time! Go through the lesson and try to explain the concept to yourself. Try to think about it and keep asking questions about what you do or don’t understand. xD

Let me know how this goes!

#8

Thanks so much for all of your help! I’m slowly getting it. I will absolutely go through this assignment again (maybe a few more times).

Cheers!

#9

Sure, @ajax5289887092 . If you still don’t understand something, reach out and I’d be glad to clear it out for you. :blush:

1 Like