Can someone tell me why using one if condition works and the other doesn't?

I'm a beginner and i need help understanding a method in javascript.

I want to know why using - if (mark.calcBMI > john.calcBMI) did not work, but using if (mark.bmi > john.bmi) did? i would think it should work because when i console.log both mark.calcBMI and john.calcBMI they both produce the correct BMI result so now its just a case of telling me which is higher.

So here is my first code, i created two objects and each object has a function that calculates the BMI of each person in the object. when i log it to the console it doesn't look at the if statement and just goes straight to the else statement. No matter if i change Marks BMI result to calculate higher than Johns it still just goes to the else statement and doesn't read the if condition. I have bolded the if condition which is basically saying to look at the results of each methods and work out which BMI calculation is greater. Attached is my console.log screen.

Here is my original code

const mark = {
    firstName: 'Mark',
    lastName: 'Miller',
    weight: 78,
    height: 1.69,
    calcBMI: function () {
        this.bmi = this.weight / (this.height * this.height);
        return this.bmi;
    },
}

console.log(mark.calcBMI());

const john = {
    firstName: 'John',
    lastName: 'Smith',
    weight: 92,
    height: 1.95,
    calcBMI: function () {
        this.bmi = this.weight / (this.height * this.height);
        return this.bmi;
    },
}


console.log(john.calcBMI());

if (**mark.calcBMI > john.calcBMI**) {
    console.log(`${mark.firstName} ${mark.lastName} (${mark.bmi}) is higher than John's`)
} else console.log(`${john.firstName} ${john.lastName} (${john.bmi}) is higher than Mark's`)type here

below code, I then changed it from mark.calcBMI to mark.bmi and it stated to look at my if statement and was giving the right result so i knew it works. below is the new code which is the exact same as above but the if condition changed, bolded.

const mark = {
    firstName: 'Mark',
    lastName: 'Miller',
    weight: 78,
    height: 1.69,
    calcBMI: function () {
        this.bmi = this.weight / (this.height * this.height);
        return this.bmi;
    },
}

console.log(mark.calcBMI());

const john = {
    firstName: 'John',
    lastName: 'Smith',
    weight: 92,
    height: 1.95,
    calcBMI: function () {
        this.bmi = this.weight / (this.height * this.height);
        return this.bmi;
    },
}


console.log(john.calcBMI());

if (**mark.bmi > john.bmi**) {
    console.log(`${mark.firstName} ${mark.lastName} (${mark.bmi}) is higher than John's`)
} else console.log(`${john.firstName} ${john.lastName} (${john.bmi}) is higher than Mark's`)type here

Help is hugely appreciated!

You forgot to call your calcBMI() methods to get actual values to compare... so:

 if (mark.calcBMI() > john.calcBMI() {
   ...

But for your example I would use classes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class Person {
    constructor(data){
      Object.assign(this, data);
    }
    get bmi() {
        return this.weight / (this.height * this.height);
    }

}

const mark = new Person({
    firstName: 'Mark',
    lastName: 'Miller',
    weight: 78,
    height: 1.69
});

const john = new Person({
    firstName: 'John',
    lastName: 'Smith',
    weight: 92,
    height: 1.95
});

console.log(mark.bmi, john.bmi, mark.bmi > john.bmi);

// sort to make it agnostic (and we don't logic when BMIs are equal)
const persons = [mark, john].sort((a, b) => b.bmi - a.bmi);

console.log(`${persons[0].firstName} ${persons[0].lastName} (${persons[0].bmi.toFixed(2)}) is higher than ${persons[1].firstName}'s`);

<!-- end snippet -->

If you want to go hardcore:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const mark = {
    firstName: 'Mark',
    lastName: 'Miller',
    weight: 78,
    height: 1.69
};

const john = {
    firstName: 'John',
    lastName: 'Smith',
    weight: 92,
    height: 1.95
};

const persons = [mark, john].map(person => Object.setPrototypeOf(person, {
    get bmi() {
        return this.weight / (this.height * this.height);
    }
}));

console.log(mark.bmi, john.bmi, mark.bmi > john.bmi);

// sort to make it agnostic (and we don't logic when BMIs are equal)
persons.sort((a, b) => b.bmi - a.bmi);

console.log(`${persons[0].firstName} ${persons[0].lastName} (${persons[0].bmi.toFixed(2)}) is higher than ${persons[1].firstName}'s`);

<!-- end snippet -->