Bryan
Bryan

Reputation: 91

JavaScript method of object not working

I'm trying to create a simple object with a method that changes the value of one of the keys. I want to initialize the isFoodWarm key to false, output the value, change it to true, then output it again. My expected output is false and then true, as the method should change it to true, but I am getting an error. I tried removing the parentheses from myBreakfast.heat();, which got rid of the error, but then it didn't successfully change the value. What am I doing wrong? Here is my code.

function Breakfast(food, drink, isFoodWarm) {
    this.food = food,
    this.drink = drink,
    this.isFoodWarm = isFoodWarm,
    heat = function() {
        if (isFoodWarm === false){
            isFoodWarm = true;
            console.log("your food is now warm");
        }
    }

}

var myBreakfast = new Breakfast("english muffin", "OJ", "false");

console.log(myBreakfast.isFoodWarm);
myBreakfast.heat();
console.log(myBreakfast.isFoodWarm);

I get the following console output:
false
Uncaught TypeError: myBreakfast.heat is not a function

Upvotes: -1

Views: 55

Answers (2)

Epsil0neR
Epsil0neR

Reputation: 1704

Your heat function is not bound to object of instance of Breakfast class. You can easily fix it by adding heat as property to this inside Breakfast class constructor:

function Breakfast(food, drink, isFoodWarm) {
    this.food = food,
    this.drink = drink,
    this.isFoodWarm = isFoodWarm,
    this.heat = function() {
        if (this.isFoodWarm === false){
            this.isFoodWarm = true;
            console.log("your food is now warm");
        }
    }

}

UPDATE: Also change isFoodWarm in function heat to this.isFoodWarm.

Upvotes: 0

bugwheels94
bugwheels94

Reputation: 31910

You need to attach heat method to constructor BreakFast too. And also isFoodWarm is a property so it must be accessed using this.isFoodWarm inside the heat method.

this.heat=function() {
    if (this.isFoodWarm === false){
        this.isFoodWarm = true;
        console.log("your food is now warm");
    }
}

Explanation : Without this operator heat method gets attached to global object, so when you call myBreakfast.heat it gives an Uncaught TypeError because it is defined under window.heat.

Note : when you need to pass a boolean then don't wrap it inside quotes as it will change your boolean to string which will behave like true.

so change your constructor call to

new Breakfast("english muffin", "OJ", false);  \\remove double quotes around false

Demo

function Breakfast(food, drink, isFoodWarm) {
    this.food = food,
    this.drink = drink,
    this.isFoodWarm = isFoodWarm,
    this.heat = function() {
        if (this.isFoodWarm === false){
            this.isFoodWarm = true;
            console.log("your food is now warm");
        }
    }

}

var myBreakfast = new Breakfast("english muffin", "OJ", false);

console.log(myBreakfast.isFoodWarm);
myBreakfast.heat();
console.log(myBreakfast.isFoodWarm);

Upvotes: 1

Related Questions