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?
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
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
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
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
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!
Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
