Catching "NullPointerExceptions" in JavaScript

Question

I'm writing quite a bit of code in Prototype.js which returns null if a DOM-id wasn't found.

$("someId").show();

If someId doesn't exist, a method will be called on null, which halts the entire program, in effect disabling all JS effects after the error. I could just check for null before executing such a statement, but this is getting tiring.

I would like to catch an exception but I'm not sure which one its is. MDC lists the following ECMA Script error types, but on first glance none of them seem to be what I want:

* Error
* EvalError
* RangeError
* ReferenceError
* SyntaxError
* TypeError
* URIError
* DOMException
* EventException
* RangeException

Also, do browsers have a unified way of dealing with a method call on null?

Answer 1

I don't believe there's unity to be found. Chrome throws a TypeError, but IE throws an Error, so you would probably have to catch everything and make severe assumptions. Better to check for null first.

var element = $('someId');
if (element) {
    element.show();
    // whatever else...
}

If element.show() is the only thing you need it for, then it can obviously be written a lot shorter, but in most cases that would be appropriate.

Answer 2

The correct way to handle this is to check for null before doing something with an object. There are several shorthand ways to do this, the shortest is (as Alex K) wrote

$("someId") && $("someId").show();

but this seems to me to be harder to read.

To answer your question directly you can do

try { $('someId').show(); } catch (e) {} 

but this seems amateurish. You should program explicitly because later on someone else won't know why you wrote that odd code. The first example is slightly opaque but at least contains the null test first, and doesn't hide errors in the show() method.

Incidentally, if you were using JQuery instead of Prototype, this code would work without error even if there is no object with id 'someId':

$('#someId').show()

That's because the $() function in JQuery returns a collection which may be empty but is never null.

Answer 3

If your going to chain .show() on $("someId") then check its result first.

if ($("someId"))
   $("someId").show();

or

$("someId") && $("someId").show();

or

if (someVar = $("someId"))
   someVar.show();

If for some reason you really need to identify them you could wrap $() and throw a custom exception:

function NullReferenceException(id) {this.id = id}

function $my(id) {
    var el = $(id);
    if (!el)
        throw new NullReferenceException(id);
    return el
}

try {
    $my("iDontExistId").show();
} catch (e) {
    if (e instanceof NullReferenceException)
        alert(e.id + " doesn't exist");
}