How to check if a property exists in an object in JavaScript

How to check if a property exists in an object in JavaScript

JavaScript provides several ways to check if a property exists in an object. You can choose one of the following methods to check the presence of a property:

1. hasOwnProperty() method
2. in operator
3. Comparison with undefined

hasOwnProperty() Method

The hasOwnProperty() method is part of the object's prototype and returns a boolean value (true or false) indicating whether the object has the specified property as its own property.

Let us say you have the following food object:

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

The following example uses the hasOwnProperty() method to check if the fries property exists in the food object:

const exists = food.hasOwnProperty('fries');

console.log(exists); // true

If the property doesn't exist in the object, the hasOwnProperty() method returns false as shown below:

const exists = food.hasOwnProperty('snacks');

console.log(exists); // false

Note that the hasOwnProperty() method only checks the presence of the specified property in the object's own properties. The own properties are those defined directly on the object.

If the property is a part of the object's prototype, it is not considered as an object's own property. For example, the hasOwnProperty() method doesn't detect the toString property because it is inherited from the object's prototype:

const exists = food.hasOwnProperty('toString');

console.log(exists); // false

in Operator

The in operator is another way to check the presence of a property in an object in JavaScript. It returns true if the property exists in an object. Otherwise, it returns false.

Let us use the in operator to look for the cake property in the food object:

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

'cake' in food;     // true
'drink' in food;    // false

Unlike the hasOwnProperty() method, the in operator looks for the existence of a property within the own properties and also in the inherited properties of an object.

For example, contrary to hasOwnProperty(), the in operator detects that the inherited toString property exists in the food object:

food.toString;    // function() {...}
'toString' in food;     // true

Comparison with undefined

If you try to access a non-existing property from an object, the returned value is undefined:

food.pizza;     // 🍕
food.rice;      // undefined

The food.rice evaluates to undefined because the food object doesn't contain the rice property.

By using this logic, you can compare the property with the undefined to check if the property exists in an object:

food.pizza !== undefined;     // true
food.rice === undefined;      // false

However, if the object contains a property that has undefined value, comparing it with undefined will incorrectly evaluate to false:

const user = {
    name: 'John Doe',
    job: undefined
};

user.job !== undefined;     // false

As you can see above, even though the job property exists (but has undefined value), user.job !== undefined evaluates to false conveying a false impression that the property doesn't exist.

Summary

We learned about 3 different ways to check if an object contains a specific property.

1. The hasOwnProperty() method checks the existence of a property within the own properties of the object.
2. The in operator looks for the property in both own properties and inherited properties of an object.
3. Finally, you can compare the property value with the undefined to check if it exists. You should use this method only when you're sure that the property value is not undefined.

If you are not concerned about the object inherited properties, the in operator is the most suitable method to check the existence of a property. It has a short and concise syntax.

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

const exists = food.hasOwnProperty('fries');

console.log(exists); // true

const exists = food.hasOwnProperty('snacks');

console.log(exists); // false

const exists = food.hasOwnProperty('toString');

console.log(exists); // false

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

'cake' in food;     // true
'drink' in food;    // false

food.toString;    // function() {...}
'toString' in food;     // true

food.pizza;     // 🍕
food.rice;      // undefined

food.pizza !== undefined;     // true
food.rice === undefined;      // false

const user = {
    name: 'John Doe',
    job: undefined
};

user.job !== undefined;     // false

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript