How to Check If A Key Exists In An Object In JavaScript

There are a couple of options you can play around with. Some more bulletproof than others. Let’s start with the most common ones. Imagine you have the following nested object and you want to retrieve the theme property:

const user = { 
    settings: { 
        theme: 'default'  
    } 
}; 

The simplest way is to check if the value equals to undefined

if (typeof user.settings.theme !== 'undefined') { 
    // your property exists 
}

This presumes that settings is an existing object. If it’s not the case, you’ll get a TypeError.

You can also concatenate variables with the AND operator to create a boolean value.

if (user && user.settings && user.settings.theme) { 
    // your property exist 
} 

With this solution, you’ll get around the TypeError. However, you can see that if your object is deeply nested, checking each level, quickly makes the statement unreadable.

This will also return a boolean value:

if ('theme' in user.settings) { 
    // your property exist 
} 

The problem with this solution again is that it assumes that settings is an object. If it’s not, we get a TypeError.

Just like the in operator, this assumes the existence of settings, and can be only used reliably if we have a single level object.

if (user.settings.hasOwnProperty('theme')) { 
    // your property exist 
} 

Unlike the previous examples, this method provides a solution for unexisting parents.

if (user?.settings?.theme) { 
    // your property exist 
} 

Even if settings is not an object, it won’t throw an error. However, there is a downside to this too. According to Caniuse, it’s only supported in ~78% of browsers at the writing of this solution. So you should not use it in a production environment. Make sure that you have a fallback option if you go with this option.

If you are using TypeScript, you can use the non-null assertion operator to check for the existence of properties. This works like optional chaining and will prevent TypeErrors.

if (user!.settings!.theme) { 
    // your property exist 
} 

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

What is the Difference Between the in and hasOwnProperty?

It’s important to know the difference between in and hasOwnProperty. If you need to check for inherited properties, you need to use the in operator. Otherwise you can go with hasOwnProperty as well. To emphasis the difference between the two, take a look at the following code example:

// constructor is an inherited property
// therefore, this will return true
console.log('constructor' in window);

// this will however, return false
console.log(window.hasOwnProperty(constructor));

Make sure to also check out, how you can get deeply nested properties error safe, and how to loop through an object, by clicking on one of the two tips below:

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Remove ads

---

Resources:

• How to Get Nested Properties Error-Safe
• How to Loop Through Object Properties
• The typeof operator in JavaScript
• The in operator in JavaScript
• The hasOwnProperty method in JavaScript
• Optional Chaining
• Support table for optional chaining
• Polyfill for optional chaining
• The non-null assertion operator