title: Why does an object log `[object Object]` when called with `console.log`?
body: <p>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.</p>
  
  <p>The code in question is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The specific part of the code that I returns the string to be logged to the console is </p>
  
  <pre><code>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}`;
    },
  </code></pre>
  
  <p>What I expected it to print to the console was <code>[ *key*: *value*, *key2*: *value2* ]</code> but instead it printed <code>[ object Object ]</code>. The reason I know the object is defined is that when I replace <code>console.log(appetizer)</code> with <code>console.log(appetizer.name)</code> it prints the correct name.</p>