Dmitri Pavlutin
Thoughts on Frontend development

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

Updated August 7, 2020

Due to the dynamic nature of JavaScript, you might need to verify if a specific property exists in an object.

In this post, you’ll read about the 3 common ways to check whether a property exists in an object.

1. hasOwnProperty() method

The JavaScript object has a special method object.hasOwnProperty(propName) that returns a boolean that indicates whether object has a property propName.

In the following example hasOwnProperty() determines the presence of properties:

const hero = {
  name: 'Batman'
};

hero.hasOwnProperty('name');     // => true
hero.hasOwnProperty('realName'); // => false

The property name exists in the object hero: thus hero.hasOwnProperty('name') returns true.

On the other side, realName property doesn’t exist in the object hero. As expected, hero.hasOwnProperty('realName') returns false — denoting a missing property.

The method name hasOwnProperty() suggests that it looks for properties in the own properties of the object. The own properties are those defined directly upon the object.

Despite that every JavaScript object has an inherited property toString (which is a method inherited from the object’s prototype), hasOwnProperty() doesn’t detect it as a property:

const hero = {
  name: 'Batman'
};

hero.toString; // => function() {...}

hero.hasOwnProperty('toString'); // => false

2. in operator

The in operator propName in object also determines whether propName property exists in object.

Let’s use in operator to detect the existence of a property:

const hero = {
  name: 'Batman'
};

'name' in hero;     // => true
'realName' in hero; // => false

'name' in hero evaluates to true because hero has a property name.

On the other side, 'realName' in hero evaluates to false because hero doesn’t have a property named 'realName'.

in operator has a short syntax, and I prefer it over hasOwnProperty() method in most of the cases.

The main difference between hasOwnProperty() method and in operator is that the latter checks within the own properties and also in the list of inherited properties.

That’s why, in contrast to hasOwnProperty(), the in operator detects that the inherited property toString exists inside hero object:

const hero = {
  name: 'Batman'
};

hero.toString; // => function() {...}

'toString' in hero;              // => truehero.hasOwnProperty('toString'); // => false

3. Comparing with undefined

If you access a non-existing property from an object, the result is undefined. Let’s try an example:

const hero = {
  name: 'Batman'
};

hero.name;     // => 'Batman'
hero.realName; // => undefined

hero.realName evaluates to undefined because realName property is missing.

Now you can see the idea: let’s compare against undefined to determine the existence of the property.

const hero = {
  name: 'Batman'
};

hero.name !== undefined;     // => true
hero.realName !== undefined; // => false

hero.name !== undefined evaluates to true, which shows the existence of property.

On the other side, hero.realName !== undefined is false, which indicates the realName is missing.

Comparing with undefined to detect the existence of property is a cheap and dirty approach.

Note that this approach can generate a false-negative. If the property exists, but has undefined value (case, however, rarely happening), comparing against undefined evaluates incorrectly to false:

const hero = {
  name: undefined
};

hero.name !== undefined; // => false

Even if the property name exists (but has undefined value), hero.name !== undefined evaluates to false: which incorrectly indicates a missing property.

4. Summary

There are mainly 3 ways to check if the property exists.

The first way is to invoke object.hasOwnProperty(propName). The method returns true if the propName exists inside object, and false otherwise.

hasOwnProperty() searches only within the own properties of the object.

The second approach makes use of propName in object operator. As well, the operator evaluates to true for an existing property, and false otherwise.

in operator looks for properties existence in both own and inherited object properties.

Finally, you can simply use object.propName !== undefined and compare against undefined directly.

What’s your preferred way to check for properties existence?

Like the post? Please share!

Quality posts into your inbox

I regularly publish posts containing:

  • Important JavaScript concepts explained in simple words
  • Overview of new JavaScript features
  • How to use TypeScript and typing
  • Software design and good coding practices

Subscribe to my newsletter to get them right into your inbox.

Join 1356 other subscribers.

About Dmitri Pavlutin

I'm a passionate software developer, tech writer and coach. My daily routine consists of (but not limited to) drinking coffee, coding, writing, coaching, overcoming boredom 😉.