JavaScript TypeError, Cannot read property of undefined, but the function is defined. What am I doing wrong?

Question

I keep getting the error: "TypeError: Cannot read property 'push' of undefined"

The error is in this line: "this.courseName.push(dish);"

Here is the code:

let menu = {
    _courses: {
      _appetizers:[] ,
      _mains:[],
      _desserts: []
    },

    addDishToCourse(courseName, dishName, dishPrice){
        const dish = { name: this.dishName, price: this.dishPrice };

        // ERROR HERE: **this._courses[courseName].push(dish);**
    },
};

I have been stuck with this error for hours. Is there something I'm not seeing?

Sorry if there is a simple solution to this. I'm relatively new to JavaScript.

Edit:

I was indeed calling the key incorrectly. I am now calling the function as:

  menu.addDishToCourse("_appetizers", "random", 10);
  console.log(menu._courses._appetizers);

When I log this in compiler it returns:

    [ { name: undefined, price: undefined } ]

It seems like the function isn't getting called. Am I approaching this fundamentally incorrectly?

this._courses[courseName] is undefined. What is the value of courseName? — user47589
– user47589, Commented Mar 15, 2018 at 20:36
jsfiddle.net/Lxg99me0/3 works for me, it alerts undefined because you are setting dish wrong but there is no errors in console. Post how you call that function, you are most likely passing the wrong courseName — Huangism
– Huangism, Commented Mar 15, 2018 at 20:42
courseName does not seem to be present in _courses. Thats why it is undefined. — null
– null, Commented Mar 15, 2018 at 20:43
how are you calling it? I think you are passing a wrong key name in courseName. — cнŝdk
– cнŝdk, Commented Mar 15, 2018 at 20:43
I am running this on Code Academy. I want this to return an array and display that array. Currently, it's just returning undefined. I was indeed calling the key incorrectly. I am now calling the function as: menu.addDishToCourse("_appetizers", "random", 10); console.log(menu._courses._appetizers); When I log this in compiler it returns: [ { name: undefined, price: undefined } ] It seems like the function isn't getting called. Am I approaching this fundamentally incorrectly? — Cookie Doe
– Cookie Doe, Commented Mar 15, 2018 at 21:26

cнŝdk · Accepted Answer · 2018-03-15 22:09:19Z

1

Your first problem is that you were passing a wrong courseName to the function, that's why you get the error.

And your second problem is that you are assigning wrong values, to object to push in your courses array when you used { name: this.dishName, price: this.dishPrice }.

In fact when you use this.dishName you were trying to get dishName from your menu object that's why it's undefined, you just need to use the parameters dishName and dishPrice you are passing arguments to the function.

    const dish = {
      name: dishName,
      price: dishPrice
    };

    this._courses[courseName].push(dish);

This is a working Demo:

let menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: []
  },

  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice
    };

    this._courses[courseName].push(dish);
  },
};


menu.addDishToCourse("_appetizers", "random", 10);
console.log(menu._courses._appetizers);

answered Mar 15, 2018 at 22:09

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Padmore Over a year ago

I thought I'd just said that earlier :)

cнŝdk Over a year ago

@StevePadmore In fact it was not a scope problem, it was wrong values problem, instead of passing the arguments of the function. :)

Steve Padmore Over a year ago

I agree, that the wrong values were passed, but that was because 'this' was used, and the variables used are not in the scope of 'this', but in the function itself. I think it's just semantics, but the answer is still the same :)

Steve Padmore · Accepted Answer · 2018-03-15 21:44:45Z

1

It is the scope that is the issue.

this is the object itself (the menu in this case) and has _courses and addDishToCourse as its properties.

Inside the addDishToCourse this is looking at the object for the dishName and dishPrice, but they are scoped to the function itself (from the parameters).

So the correct code would be like so:

let menu = {
        _courses: {
            _appetizers: [],
            _mains: [],
            _desserts:[]
        },

        addDishToCourse(courseName, dishName, dishPrice) {
            const dish = { name: dishName, price: dishPrice };

            this._courses[courseName].push(dish);
        }
    }    

menu.addDish("_mains", "Pizza", "10");

answered Mar 15, 2018 at 21:44

Steve Padmore

1,7401 gold badge12 silver badges18 bronze badges

4 Comments

cнŝdk Over a year ago

Actually this is not a scope problem, it was wrong values problem, instead of passing the arguments of the function.

Steve Padmore Over a year ago

Scope as in dishName and dishPrice are not in the scope of the object (so this.dishName is undefined), but in the scope of the function (just dishName is correct).

cнŝdk Over a year ago

Maybe, you are right as well, as they are part of the object scope ;) You are still right:)

Steve Padmore Over a year ago

And you as well ;)

Collectives™ on Stack Overflow

JavaScript TypeError, Cannot read property of undefined, but the function is defined. What am I doing wrong?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related