Meal Maker total price adding weirdly?

So I finally sorted out my issues with the Meal Maker exercise in the JS lesson, and it’s not flagging any errors – but the output total price is wrong in a way that I don’t totally understand, and am hoping someone can help clarify?

Here’s the code I run:

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

  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
    return this._courses[courseName].push(dish); 
  },
  getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    return dishes[randomIndex]; 
  },
  generateRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
    return `Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name} and its cost is ${totalPrice}.`;
  }
}

menu.addDishToCourse('appetizers', 'Manapua', 3.9);
menu.addDishToCourse('mains', 'fried rice', 12);
menu.addDishToCourse('desserts', 'ice cream', 6);

menu.addDishToCourse('appetizers', 'ladyfingers', 7.99);
menu.addDishToCourse('mains', 'Rice cake', 7.3);
menu.addDishToCourse('desserts', 'rice crispy treat', 2.99);

menu.addDishToCourse('appetizers', 'Fries', 7.99);
menu.addDishToCourse('mains', 'broccoli head', 7.3);
menu.addDishToCourse('desserts', 'Volcano cake', 2.99);

const meal = menu.generateRandomMeal();

console.log(meal)

//console.log(Object.values(menu._courses))

and here’s the output I get:

Your meal is ladyfingers, fried rice, and rice crispy treat and its cost is 22.980000000000004.

the price should be a nice, even 22.98 – so does anyone know why it tacks on an extra 12 zeroes and a 4, when the math operation for total price is just addition? I saw another post where someone else had a similar issue, but they just wanted to know how to clear that out (simple enough to do with a .toFixed() ). I’m more curious about why.

thanks kindly!

Its a caused by rounding errors in Floating-Point Arithmetic.

Its not language specific, its generated at a low level by the hardware FPU and affects all languages pretty much.

( FPU math coprocessor) is a part of a computer system specially designed to carry out operations on floating-point numbers.

https://0.30000000000000004.com/

https://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html

2 Likes

That’s amazing, and super interesting. Thanks for the links!