Why does an object log `[object Object]` when called with `console.log`?

Question

I'm honestly not very sure how to format this, as I'm putting a long piece of code in here, so I'll be checking this frequently to clear up any confusion.

The code in question is as follows:

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers() {
    this._courses.appetizers;
  },
  set appetizers(appetizerIn) {
    this._courses.appetizers = appetizerIn;
  },
  get mains() {
    this._courses.mains;
  },
  set mains(mainIn) {
    this._courses.mains = mainIn;
  },
  get desserts() {
    this._courses.desserts;
  },
  set desserts(dessertIn) {
    this._courses.desserts = dessertIn;
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice
    }
    this._courses[courseName].push(dish);
  },
  getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const dishNum = Math.floor(Math.random() * dishes.length);
    return dishes[dishNum];
  },
  generateRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
    console.log(appetizer)
    return `Appetizer: ${appetizer}
Main: ${main}
Dessert: ${dessert}
Total Price: ${totalPrice}`;
  },
}
menu.addDishToCourse('appetizers', 1, 1)
menu.addDishToCourse('appetizers', 2, 2)
menu.addDishToCourse('appetizers', 3, 3)
menu.addDishToCourse('mains', 1, 1)
menu.addDishToCourse('mains', 2, 2)
menu.addDishToCourse('mains', 3, 3)
menu.addDishToCourse('desserts', 1, 1)
menu.addDishToCourse('desserts', 2, 2)
menu.addDishToCourse('desserts', 3, 3)
const meal = menu.generateRandomMeal();
console.log(meal);

The specific part of the code that I returns the string to be logged to the console is

generateRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
    console.log(appetizer)
    return Appetizer: ${appetizer}
Main: ${main}
Dessert: ${dessert}
Total Price: ${totalPrice}`;
  },

What I expected it to print to the console was [ *key*: *value*, *key2*: *value2* ] but instead it printed [ object Object ]. The reason I know the object is defined is that when I replace console.log(appetizer) with console.log(appetizer.name) it prints the correct name.

Answer 1

In both browser and nodejs environment, running console.log(appetizer) produces:

{
  "name": 3,
  "price": 3
}

---

[object Object] is only produced by running console.log(meal)

Appetizer: [object Object]
Main: [object Object]
Dessert: [object Object]
Total Price: 6

And that's normal because the objects are implicitly cast to string. These are equivalent:

const obj = { a: 1 }
console.log('Hello: ' + obj)
console.log('Hello: ' + obj.toString())
console.log(`Hello: ${obj}`)

If you want your string to contain object's JSON reprenstation use JSON.stringify:

const obj = { a: 1 }
const s = 'Hello: ' + JSON.stringify(obj); /// or JSON.stringify(obj, null, 2); with 2 spacing
console.log(s)

Answer 2

Well, if appetizer is a JSON object, you can simply use JSON.stringify(object).

console.log(JSON.stringify(appetizer))

While console.log() will work for objects, there is a method specifically meant for displaying objects to the console called console.dir().

console.dir(appetizer)