JavaScript Tip - Checking for undefined

April 9, 2015 by Christoff Truter JavaScript  

One of the common logical statements that we write when using JavaScript is to check if a variable is undefined.

What do we mean by undefined though?

• Undefined is the default type for declared but unassigned variables, arguments and return types for functions in JavaScript.
• Undefined is also the default type that will be returned when we're testing for unresolvable references (loosely speaking undeclared variables).

Now this is simple enough, but there are however a few caveats you need to be aware of.

Observe the following somewhat mediocre snippet I shamelessly ripped off W3Schools

var x;

if (x === undefined) {
	txt = "x is undefined"; // value set (hopefully)
} else {
	txt = "x is defined";
}	

Ideally this would be good enough, but lets have a quick look if it holds up against the aforementioned caveats.

1. Treated as a writable property
   
   In some browsers or rather pre ECMAScript 5 implementations, undefined can be assigned to like a writeable property, thereby making it very fickle and untrustworthy.
   
   

   undefined = null; // In some arbitrary library trying to be clever 
   
   var x;
   
   if (x === undefined) {
   	txt = "x is undefined";
   } else {
   	txt = "x is defined"; // value set
   }	
   

   This is something that will phase out with time, but unfortunately we still need to cater for this possibility (unless you're evergreen browser assuming - debate for another day).
   
   
2. null == undefined but null !== undefined
   
   The W3schools snippet correctly uses the identity operator ( === ) when checking if a value is undefined. But why is this necessary? Well, observe the follow snippet:
   
   

   var x = null;
   console.log(x == undefined); // outputs true
   console.log(x === undefined); // outputs false
   console.log(typeof null); // outputs object
   console.log(typeof undefined); // outputs undefined		
   

   Equality wise null is equal to undefined, which means that if you were to use the equality instead of the identity operator on a null declared variable, the undefined statement would evaluate to true.
   
   The fundamental difference is the types itself, null (weirdly enough) is an object, where undefined is a type.
   
   
3. Unresolvable References (Undeclared variables)
   
   When dealing with unresolvable references (e.g functions/variables used existing in a JavaScript API that failed to load from an external url) the W3schools snippet will throw a reference exception, like seen in the snippet below.
   
   

   //var x;
   
   if (x === undefined) { // throws ReferenceError exception
   	txt = "x is undefined";
   } else {
   	txt = "x is defined";
   }
   

Conclusion

If you're only interested in supporting evergreen browsers (or unconcerned about undefined being reassigned) and if unresolvable references won't be an issue for your specific context then the W3schools snippet will be sufficient.

But if you're looking for a more robust solution, something like the IIFE approach could be used; the most robust way to test for undefined variables however is by checking the type of the variable, this will also cater for unresolvable reference issues.

//var x;

if (typeof x === 'undefined') { 
	txt = "x is undefined";
} else {
	txt = "x is defined";
}

Is it just me or is all of this a bit dirty? Let me know what you think...