JavaScript check if property exists in Object

You might need to determine if an object holds a particular property.

Let’s say we have a user object. Optionally the email property can be set. If not, we want to show a form so the user can fill out their email.

How can we determine if this field e…


This content originally appeared on DEV Community and was authored by Chris Bongers

You might need to determine if an object holds a particular property.

Let's say we have a user object. Optionally the email property can be set. If not, we want to show a form so the user can fill out their email.

How can we determine if this field exists?

const userOne = {
  name: 'Chris Bongers',
  email: 'info@daily-dev-tips.com',
};

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

And to answer that, there are several ways of doing that. Let's take a look at the three most common ones.

Using hasOwnProperty to see if an object has a property

By using hasOwnProperty we can evaluate if an object has Own property.

Let's see how it would work on our example data.

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. It 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. (While this does exist)

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

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

Using in to see if an object has a property

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

This one can check in own and inherited properties.

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

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

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

Using undefined to see if an object has a property

The last method is to use an undefined check. This method 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, but it's not what we might be looking for.

Conclusion

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

I would generally not recommend using the undefined check.

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

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

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter


This content originally appeared on DEV Community and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2022-07-05T06:29:27+00:00) JavaScript check if property exists in Object. Retrieved from https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/

MLA
" » JavaScript check if property exists in Object." Chris Bongers | Sciencx - Tuesday July 5, 2022, https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/
HARVARD
Chris Bongers | Sciencx Tuesday July 5, 2022 » JavaScript check if property exists in Object., viewed ,<https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/>
VANCOUVER
Chris Bongers | Sciencx - » JavaScript check if property exists in Object. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/
CHICAGO
" » JavaScript check if property exists in Object." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/
IEEE
" » JavaScript check if property exists in Object." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/. [Accessed: ]
rf:citation
» JavaScript check if property exists in Object | Chris Bongers | Sciencx | https://www.scien.cx/2022/07/05/javascript-check-if-property-exists-in-object/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.