JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at ways to check for undefined and the existence of properties to prevent our JavaScript program from crashing.
Checking for undefined with the typeof Operator
undefined is a value that we often encounter by methods that return undefined or by trying to use properties that don’t exist. Therefore, we should check if some variable is undefined before doing our action.
We can either check for undefined by using the typeof operator or using the === operator.
For instance, we can do that with the typeof operator as follows:
if (typeof foo === 'undefined') {
//...
}
In the code above, we check if foo is undefined by using the typeof operator on foo and see if it returns 'undefined' .
If it is, then we do something. We can also run something if foo isn’t undefined by writing:
if (typeof foo !== 'undefined') {
//...
}
This is important because trying to do any operation to something that’s undefined will crash our JavaScript app.
Also, it’s important to check if the property exists by checking whether it’s undefined or not. A property exists if it’s not undefined.
For checking object if an object property exists, we can also use the hasOwnPropety to see if a property exists as a non-inherited property.
We can check if a property exists in an object as follows:
if (typeof foo.bar !== 'undefined' &&
typeof foo.bar.baz !== 'undefined') {
//...
}
In the code above, we check if foo.bar exists and if foo.bar.baz exists by checking if both of them aren’t undefined . If the first one isn’t then, we know foo.bar exists, then we can proceed to check if foo.bar.baz exists.
We can’t jump straight into the 2nd expression and just write typeof foo.bar.baz !== ‘undefined’ since foo.bar may not exist. Therefore, it may be undefined , so we must also check if foo.bar exists before doing the 2nd check.
This is critical if we want to do some operation to foo.bar.baz since these properties may not exist.
Object.prototype.hasOwnProperty
To check if a property exists as a non-inherited property in an object, we can also use the hasOwnProperty method in the object instance.
For instance, we can rewrite our property check as follows:
if (foo.hasOwnProperty('bar') &&
foo.bar.hasOwnProperty('baz')) {
//...
}
In the code above, we checked is foo.bar exists as a non-inherited property with foo.hasOwnProperty(‘bar’) . Then if foo.bar exists, we check if foo.bar.baz exists by writing foo.bar.hasOwnProperty(‘baz’).
However, if the property is set explicitly to undefined , hasOwnProperty still returns true , so if we probably still need to check if the property is set explicitly set to undefined even if we use hasOwnProperty.
Therefore, typeof is probably more reliable for checking for undefined since it works whether undefined is implicit, which is when the property doesn’t exist, or when it does exist and set to undefined explicitly.
=== Operator
We can also just use the === operator to check for undefined . For instance, we can just do a direct comparison with the === operator to check for undefined as follows:
if (foo.bar !== undefined) {
//...
}
The code above also works since === doesn’t do any data type coercion before doing any comparison.
Object.is
Lastly, we can use the Object.is method to check for undefined . It takes 2 arguments, which are the items that we want to compare.
Object.is different from === as === +0 and -0 are considered different in Object.is and which isn’t the case with === . Also, NaN is considered the same as itself with Object.is.
However, for comparing undefined , there’s no difference between Object.is and ===.
For instance, we can use Object.is as follows to check for undefined:
if (Object.is(foo.bar, undefined)) {
//...
}
The code above checks if foo.bar is undefined or if foo.bar exists as we did with the === operator.
Conclusion
There’re many ways to check if something is undefined in JavaScript. One way is to use the typeof operator to check if something has type 'undefined'.
Also, we can use the === operator to directly compare if something is undefined . Likewise, we can use the Object.is to check for undefined.
To check if a property exists in an object, we can use the object instance’s hasOwnProperty method. However, this doesn’t work if the property is set explicitly to undefined since it exists and it’s set to undefined.
