Help - Meal Maker Project: generateRandomMeal() method - why does template literal output [object,object] in the console?

Projects
,
#1

Hope you’re all well during these times,

Link to Javascript Meal Maker Project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-ii/modules/fecp-learn-javascript-syntax-objects/projects/meal-maker

Experiencing a problem with my ${main} template literal below.

generateRandomMeal() {

    const appetizer = this.getRandomDishFromCourse('appetizers'); //Stores a random appetizer.

    const main = this.getRandomDishFromCourse('mains');

    const dessert = this.getRandomDishFromCourse('desserts');

    const totalPrice = appetizer.price + main.price + dessert.price; //Stores total price of randomly generated meal. 

    return `YOUR RANDOM MEAL  \n\nRandom Appetizer: ${appetizer.name} \nRandom Main: ${main} \nRandom Dessert: ${dessert.name} \n\nTotal Cost: £${totalPrice}`;

  },

In the console, why does ${main} output [object, object] rather than for example {name: ‘meal name’, price: 10} ?.

Thanks in advance :slight_smile: .

#2

For your other two you have done ${appetizer.name} and ${dessert.name}, so presuming that both of these are working correctly, what should ${main} be instead?

1 Like
#3

Yeah, the other two work fine :slight_smile:. ${main.name} works too. But I want to understand why [object, object] is output when ${main} is used.

#4

I think it’s because of the data types: you’re returning a string but main is an object. Correct me if I’m wrong, but I think the same would happen if you use an array or any other data type that cannot be implicitly converted into a string by the template literal (booleans, integers, etc. can, try inside the template literal something like ${125} or ${true}).

If you want to see the contents of the object, for example for debugging purposes, one way to do it is:

return `YOUR RANDOM MEAL  \n\nRandom Appetizer: ${appetizer.name} \nRandom Main: ${JSON.stringify(main)} \nRandom Dessert: ${dessert.name} \n\nTotal Cost: £${totalPrice}`;

MDN

#5

What @elnicomapero82885037 said it pretty much bang on. The reason it cannot be converted directly into a string is because of the way it is stored in memory. The way that objects are stored just so happens to give a string representation of [object Object], and so to actually get some useful information from inside of the object, you need to use certain methods to actually extract that information from memory, such as JSON.stringify like mentioned above, or referring directly to the property using main.name like you did above!

#6

@elnicomapero82885037 @adamgaffney96 Thanks guys, I’ve been reflecting over your messages + read MDN on template literals’. Tried an array e.g., ${array}; it worked - it output all the elements in the array…

@adamgaffney96 can you elaborate plz:

#7

All the data in your program has to be stored in memory somehow, and of course we want to know what is stored and where. So when you do console.log('Hello') and it prints Hello to the console, it’s telling you that the data stored in that location can be represented by the word Hello.
When an object is stored in memory, it’s not so simple to just print out the contents to the console due to the way it is stored, so instead a string [object Object] is printed to the console to let you know that an object is stored there. Then you can use the relevant methods to print out the contents of that object. In this case, you only want to know the name stored in your object, so you call ${main.name} and this gives you the string stored in that location in the memory.

#8

How are objects stored?

#9

Normal low level data types such as an integer or string can just be stored directly by converting it into binary. However objects have structure to them that can’t be converted directly into bytes and has to be stored with information that describes this structure (such as properties, methods etc). As such, it is stored with this information as well as the actual contents of the object, so that the object can be constructed when called. Then it is given a pointer which allowed the variable to which the new object has been assigned to fetch the object in memory.

This [object Object] string is a representation of the pointer, essentially letting you know that an object is stored here and you’ll need to be more specific to get the information from it.

#10 
`YOUR RANDOM MEAL  \n\nRandom Appetizer: ${appetizer.name} \nRandom Main: ${JSON.stringify(main)} \nRandom Dessert: ${dessert.name} \n\nTotal Cost: £${totalPrice};`

Is the use of \n a good way to create a new line, what do you think? Are there other ways that are better? :slight_smile:

@adamgaffney96 @elnicomapero82885037

#11

\n is totally fine, it’s very useful when you want to return a single string but format it correctly! You could also do multiple console.log()'s but this is of course very inefficient, and generally I would recommend using \n.