Meal maker - Cannot read property 'length' of undefined


Currently having an issue with the meal maker project, and the following error is popping up.

" const randomIndex = Math.floor(Math.random() * dishes.length);

TypeError: Cannot read property ‘length’ of undefined"

I have done a search of the forums and seen people have had similar issues, I’m still yet to fully understand however the issue and a way to solve it.

help would be greatly appreciated.

below is my code


const menu = {
_courses: {
appetizers: ,
mains: ,
desserts: ,
get appetizers() {
return this._appetizers;
get mains() {
return this._mains;
get desserts() {
return this._desserts;

set appetizers(newAppetizers){
this._courses.appetizers = newAppetizers;

set mains(newMains){
this._courses.mains = newMains;

set desserts(newDesserts){
this._courses.desserts = newDesserts;

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 ${}, ${}, and ${}, and the total price is ${totalPrice};
menu.addDishToCourse(‘appetizers’, ‘salad’, 4.00);
menu.addDishToCourse(‘appetizers’, ‘wings’, 4.50);
menu.addDishToCourse(‘appetizers’, ‘fries’, 5.00);

menu.addDishToCourse(‘mains’, ‘steak’, 14.00);
menu.addDishToCourse(‘mains’, ‘salmon’, 8.50);
menu.addDishToCourse(‘mains’, ‘tofu’, 5.00);

menu.addDishToCourse(‘desserts’, ‘cake’, 3.00);
menu.addDishToCourse(‘desserts’, ‘ice cream’, 6.50);
menu.addDishToCourse(‘desserts’, ‘coffe’, 2.00);

const meal = menu.generateRandomMeal();

Hi @data7412699309
the error is a bit difficult to find, because the error shows up where it isn’t caused. The randomIndex is fine.
You could try the following: Comment out the function calls where you add dishes to mains and desserts and comment out the const main, const dessert and totalPrice from the generateRandomMeal function and add consoles to the functions to see if all variables have the correct output.
Also please format your code: That makes debugging much easier.
(Bare in mind that Javascript is case sensitive)

Courses isn’t an array which means that it doesn’t have the push prototype property. Because of that, addDishToCourse doesn’t work for me.

Also, this means that dishes is undefined. Try console.logging in your getRandomDishFromCourse this._courses[courseName] (before const randomIndex = Math.floor(Math.random() * dishes.length);).

Then you can see the courses available. Most likely you are accessing a property from course that doesn’t exist.

Actually, it is an array. [courseName] receives either ‘appetizers’, ‘mains’ or ‘desserts’.

See here:

So that works fine. It doesn’t need the return statement though.
It’s a typo.

I receive a square box for appetizers, mains and deserts.

Courses an object, not an array. Arrays are objects but not all objects are an array.

console.log(Array.isArray({})); //--> "false"
console.log(Array.isArray([])); //--> "true"
console.log(typeof {}); // --> "object"
console.log(typeof []); // --> "object"

If you are referring to this:

_courses: {
appetizers: ,
mains: ,
desserts: ,

(see IDK why but I have a square box in place of the value for the object).

Courses is an object. If it was an array it would be like this:

_courses: [

Now, if you are referring to the appetizers/mains/desserts being arrays, that’s different. I can’t see that because for some reason, like I said, it shows a square box:

Like you said though, JavaScript is case sensitive (why wouldn’t it be lol).

It probably is that they are accessing an undefined property (a property that doesn’t exist).

The problem with JavaScript is that it allows “undefined” as a property. Other languages (probably) would alert if you are accessing an undefined property.

You see the square box because the code isn’t formatted correctly.
That’s what’s pushed to:

Here’s the exercise:
Meal Maker

const menu = {
  _courses: {
  appetizers: [],
  mains: [],
  desserts: [],

I edited my post after you replied. Like I said, it’s probably that they are accessing an undefined property.

It always suffices to check if the property is existent:

function checkIfExistent(property){
  if("undefined" === typeof property){
    return false;
  return true;

It wouldn’t work with values deliberately assigned with “undefined”, but that’s a bad practice anyways.
Since the person is using arrays, a better way to do it is check if it is an array before they try to access the “length” property:

  //Continue on to get a random course
  //The user didn't pass in a correct course name! Do whatever (like warn them) here...