3 Ways to Check a if Property exists in a JS Object

In JavaScript, some day you may need to check if a property exists in an object.

Let’s learn how to do this with below example.

How to check if property exists in object? permalink

Let’s say, we have a JS object for users with an optional property for email.

If the email key has no value, we want to show a form for the user to then add the email.

const userOne = {
  name: 'Chris Bongers',
  email: '[email protected]',
};

const userTwo = {
  name: 'John Do',
};

There are several ways to check if a certain key has a value.

Let’s take a look at the three most common methods.

1. Use hasOwnProperty to see if an object has a property permalink

By using the hasOwnProperty method, we can evaluate if an object has a property.

Let’s see how it would work with our example data and console.log the result:

console.log(userOne.hasOwnProperty('email'));
// Returns: true

console.log(userTwo.hasOwnProperty('email'));
// Returns: false

That is perfect. But there is a catch to using this method: This only works for Own properties, not extended object properties.

As you may know, objects come with the toString method, and if we try to check if that exists, it will return false (though it does exist)

console.log(userOne.toString());
// Returns: [object Object]

console.log(userOne.hasOwnProperty('toString'));
// Returns false

So this brings us to the next method:

2. Using “in” operator to check for property existence permalink

Another more explicit way of checking if an object holds a property is using in.

This solution can check the owned and inherited properties.

console.log('email' in userOne);
// Returns: true

console.log('email' in userTwo);
// Returns: false

console.log('toString' in userOne);
// Returns: true

3. Using undefined to check for property in obj permalink

The last method is to use an undefined check.

This solution will work for omitted properties but can cause you headaches if the property exists but has an undefined value.

console.log(userOne.email !== undefined);
// Returns: true

console.log(userTwo.email !== undefined);
// Returns: false

console.log(userOne.toString !== undefined);
// Returns: true

Now let’s see what happens in the following example:

const userThree = {
  name: 'Steve Stevenson',
  email: undefined,
};

console.log(userThree.email !== undefined);
// Returns: false

The check is acceptable, because the property exists - but be aware of this behaviour.

Conclusion permalink

When trying to find out if an object holds a particular property, we need to consider how safe we want the check to be.

I would generally not recommend using the 3rd method, the undefined check.

If you only evaluate Own properties, the hasOwnProperty is the solid solution.

But you might want to be on the safe side and use the in check to determine if an object has a property - owned or inherited.

Thank you for reading, and let’s connect! permalink

Feel free to subscribe to my email newsletter and connect on Facebook or Twitter