How to Detect an Undefined Object Property in JavaScript ?

Detecting an undefined object property is the process of determining whether an object contains a certain property, and if it does, whether the value of that property is undefined. This is an important concept in JavaScript programming, as it helps to prevent errors that can occur when attempting to access non-existent or undefined object properties. There are various methods for detecting undefined object properties, such as using the typeof operator, the in operator, or the hasOwnProperty method.

Syntax:

if (typeof objectName.propertyName === "undefined") {
    // Do something if the property is undefined
}

Approaches 1: Using the typeof operator: The typeof operator returns a string indicating the type of the operand. If the property is undefined, typeof will return the string "undefined". 

Syntax:

const obj = { prop1: 'value1' };
if (typeof obj.prop2 === 'undefined') {
    console.log('prop2 is undefined');
};

Example: Here is an example using typeof operator:

const car = {
    make: "Toyota",
    model: "Camry",
    year: 2018
};

if (typeof car.color === "undefined") {
    console.log("The color property is undefined in the car object.");
}
else {
    console.log("The color property is defined in the car object.");
}

Output:

The color property is undefined in the car object.

Approaches 2: Using the in operator: The in operator returns true if the specified property is in the specified object or its prototype chain. If the property is undefined, it will return false. 

Syntax:

const obj = { prop1: 'value1' };
if (!('prop2' in obj)) {
    console.log('prop2 is undefined');
};

Example: Using the in operator to check if a property exists in an object, Let's say you have an object named "book" that contains information about a book, such as its title, author, and number of pages. You want to check if the "publisher" property exists in the object:

const book = {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    pages: 218
};

if ("publisher" in book) {
    console.log("The publisher property exists in the book object.");
}
else {
    console.log("The publisher property does not exist in the book object.");
}

Output:

The publisher property does not exist in the book object.

Approaches 3: Using the hasOwnProperty() method: The hasOwnProperty method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it from its prototype chain). If the property is undefined, hasOwnProperty will return false. 

Syntax:

const obj = { prop1: 'value1' };
if (!obj.hasOwnProperty('prop2')) {
    console.log('prop2 is undefined');
}

Example: Here is an example using  hasOwnProperty() method:

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

console.log(person.hasOwnProperty("firstName")); // true
console.log(person.hasOwnProperty("middleName")); // false

Output:

true
false

Approaches 4: Using the undefined keyword: JavaScript has a special value called undefined that represents an undefined value. You can check if a property is undefined by comparing it to the undefined keyword.

Syntax:

const obj = { prop1: 'value1' };
if (obj.prop2 === undefined) {
    console.log('prop2 is undefined');
}
 

Example: Here is an example using an undefined keyword:

const superHero = {
    name: 'Batman'
};
console.log(superHero.name !== undefined);
console.log(superHero.realName !== undefined);

Output:

true
false