Need some clarity in following OR statement while one works fine and other doesn't [duplicate]

consider pronoun as a scoped variable within an Object(e.g. let person = {}) Method(e.g. this.bio = function(){}) and this.gender as an Object property.

This piece of code works just fine: And returns, appropriate pronoun "he/she/they" depending on gender it contains

if(this.gender === "m" || this.gender === "male" || this.gender === "M" || this.gender === "Male") {
pronoun = "he";
} else if(this.gender === "f" || this.gender === "female" || this.gender === "F" || this.gender === "Female") {
pronoun = "she"
} else {
pronoun = "they"
}

Where as this piece of code works only returns "he"

if(this.gender === "m" || "male" || "M" || "Male") {
pronoun = "he";
} else if(this.gender === "f" || "female" || "F" || "Female") {
pronoun = "she"
} else {
pronoun = "they"
}

Can anyone help me understand why?? Thanks.