3 Ways to Check if an Object Has a Property in JavaScript

There are various ways to check if an object has a property in JavaScript. Before we start forward, let’s look at what it exactly means. An object is a compilation of unordered properties. Every Javascript object has some properties associated with it. A property of an object is a variable that binds to it. It can be modified or added or deleted, depending on the scenario.

How to check if an object has a property in JavaScript?

In this article, we will work on ways to check whether or not a property exists for an object in JavaScript with examples.

Method 1: Using hasOwnProperty() method

Let us have a look at the syntax of the method.

hasOwnProperty() :The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property.

Syntax:

Object.hasOwnProperty('prop');

Parameter:

prop: Property name that we want to check.

For Example:

const JavaScript = {
  type: 'Language'
};
console.log(JavaScript.hasOwnProperty('name'));     
console.log(JavaScript.hasOwnProperty('type'));

Output

false
true

The above code creates an object called ‘JavaScript‘. The values mentioned in the curly braces are the respective properties and their values. So when we invoke the hasOwnProperty method on the object, it checks for the matching values. If present, hasOwnProperty() method returns true otherwise it returns false.

*Fact check: There are inherited properties with all objects. This method does not detect them. For example – toString , toLocaleString  property

const JavaScript = {
  type: 'Language'
};
console.log(JavaScript.hasOwnProperty('type'));// True
console.log(JavaScript.hasOwnProperty('toLocaleString')); // => false

Method 2: Using the in operator

The in operator works similar to the above-discussed solution. The only difference is that the ‘in‘ operator can access the object’s inherited properties also. It is a syntactically better approach and also a short syntax compared to hasOwnProperty().

Let us take an example to demonstrate in operator

const JavaScript = {
  type: 'Language'
};
console.log('name' in JavaScript);     
console.log('type' in JavaScript );
console.log('toLocaleString' in JavaScript );

Output

false
true
true

Method 3: Checking undefined value

This method requires no operator or function for evaluation. It uses the natural code syntax to perform the task.

The idea behind this approach is that we can compare with undefined to determine the existence of the property.

Let us see how it works.

const JavaScript = {
  type: 'Language'
};
JavaScript.type; // exist
JavaScript.name;// does not exists

let testVal = JavaScript.type !== undefined; 
console.log(testVal); // true

let testVal = JavaScript.name !== undefined; 
console.log(testVal); // false

Comparing with undefined to match the value of a property is not a good approach. You may encounter a lot of false negatives. If the property is present having an undefined value, comparing it with the same gives a false negative.

const JavaScript = {
  type: undefined
};
let testVal = JavaScript.name !== undefined; 
console.log(testVal); // false

But actually, the value exists!!!!!

Conclusion

To summarize, we have gone through 3 ways to check if an object has a property in JavaScript. The hasOwnProperty() is good and can evaluate an object but only in its scope. It does not consider the inherited or default properties. The in operator is a much better approach. It can detect all types of properties including inherited properties. It is much easier to apply in terms of syntax. The third method is not recommendable. We should compare the property with undefined to see if a property exists only when we are sure of the value.