Javascript: testing whether elements or properties exist – the redux

Posted by: Paul on: February 8, 2007

• In: JavaScript
• 7 Comments

In my previous post, I detailed how typeof could be used to test if something is present or not. Given that this sounds loosely defined at best, consider the following:


window.onload = function() {
var myObject = new Object();
var myImg = new Image();
var myArray = new Array();
var myString = new String();
theDiv = document.getElementById('n');
theDiv.innerHTML = typeof(myObject) + '<br />' + typeof(myImg) + '<br />' + typeof(myArray) + '<br />' + typeof(myString);
}

What would we expect our div with the id of ‘n’ to contain once the page loads?

I expected sopmething like this:

Object
Image
Array
String

Instead, JavaScript gives you this:

Object
Object
Object
Object

????? Well, in JavaScript, it appears everything is an object. This is no big deal, as typeof still lets you test whether things exist or not.

Now consider this script:

window.onload = function() {
var myObject = new Object();
theDiv = document.getElementById('n');
theDiv.innerHTML = typeof(myObject) + '<br />' + typeof(myUndefinedVariable) + '<br />' + typeof(myObject[0]) + '<br />' + typeof(myObject.myUndefinedProperty) + '<br />' + typeof(myObject[0].myUndefinedProperty) ;
}

Our div with the id of ‘n’ would now display:

Object
undefined
undefined
undefined


Right? Right? Right?…. Wrong – Our script will terminate (produce an error) the moment we try to access an undefined object property in an unset array key. So, when we try to call typeof on myObject.myUndefinedProperty things are ok, but when we try to call typeof on myObject[0].myUndefinedProperty, the script dies.

Why? I’m not sure….it just does.

Firefox (we won’t mention IE’s unhelpful JS debugging) gives the error ‘myObject[0] has no properties’ which is absolutely correct, but the property myObject.myUndefinedProperty didn’t exist at all and typeof didn’t fail, so what’s the difference?

The difference:

As explained by someone more knowledgable then I:

Firstly, typeof is not a function, it’s an operator so it’s just
“typeof myObject[0]” – but this is not the reason you can’t do what
you’re trying.

When the code is evaluated, the dot operator takes precedence, it
cannot evaluate the property of an object that does not exist
therefore does not get the chance to perform the typeof.

For the same reason, you couldn’t then go ahead and do:
myObject[0].myUndefinedProperty = foo;.

You’d have to do a myObject[0] = new Object() first. You could use
the object literal: myObject[0] = {myUndefinedProperty:foo;};

So:
if(myObject[0])
alert(typeof myObject[0].myUndefinedProperty);

——————

Want to improve your JavaScript skills? I recommend the following:

• Ajax in Action
• DOM Scripting: Web Design with JavaScript and the Document Object Model

Tags: JavaScript