Check if an Object has a Nested Property in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 06 20213 min read

Check if an Object has a Nested Property #

To check if an object has a nested property, use the optional chaining operator - ?.. The ?. operator allows you to read the value of a nested property without throwing an error if the property does not exist on the object, e.g. obj?.a?.b.

index.js
const obj = {a: {b: 'hello'}}; const value = obj?.a?.b; console.log(value); // ๐Ÿ‘‰๏ธ hello if (value !== undefined) { // if this block runs // ๐Ÿ‘‰๏ธ property exists on object }

In the code snippet we use the optional chaining operator to check if a nested property exists on the object.

Using the ?. operator is similar to accessing a property on an object with .(dot) notation, however ?. does not throw an error when a nested property does not exist.

Instead, if the object's property does not exist the ?. operator returns undefined.

index.js
const obj = {}; const value = obj?.a?.b?.c; console.log(value); // ๐Ÿ‘‰๏ธ undefined if (value !== undefined) { // if this block runs // ๐Ÿ‘‰๏ธ property exists on object }

In the code snippet we use the ?. operator to access a nested property that does not exist on the object.

When the ?. operator tries to access the a property of the object it gets undefined and short-circuits returning undefined.

If you were to omit the ?. operator and just use . (dot) notation, you would get an error - "Cannot read property b of undefined".

Note that the ?. is not supported in Internet Explorer, if you need to support the browser you can add a polyfill for it, use babel to compile your code to an older version of JavaScript or use the next approach mentioned in this article.

An alternative approach is to manually check if a property exists on an object:

index.js
// ๐Ÿ‘‰๏ธ Supported in Internet Explorer const obj = {}; if (obj.a !== undefined && obj.a.b !== undefined && obj.a.b.c !== undefined) { // if this block runs // ๐Ÿ‘‰๏ธ the a.b.c property exists on the object }

In the code snippet we manually check for the existence of a nested property.

We use the && (and) operator, which means that the conditions in our if statement will get checked from left to right, one by one.

If any of the conditions evaluates to a falsy value, the if block will not run.

This is very explicit and less elegant than the ?. operator, however it is supported in Internet Explorer.

In the example above we explicitly check if each property is equal to undefined. You might see examples, which use only the && operator, however this approach is error prone.

The following example checks if the value of an object's property is truthy.

Truthy values in JavaScript are all values that are not falsy. Falsy values are: false, 0, "", null, undefined, NaN.

Don't write code like this:

index.js
const obj = {a: {b: {c: 0}}}; if (obj && obj.a && obj.a.b && obj.a.b.c) { // ๐Ÿ‘‰๏ธ This never runs // even though the `c` property exists }

In the code snippet, we check if a property of an object is truthy, which is not enough for us to determine whether the property exists on the object.

The a.b.c property is set to 0, which is a falsy value, so even though the property a.b.c exists on the object the if block never runs, because the condition is not met.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee