Exception Handling in JavaScript: Using Multiple Exception Handlers

Having described the main features associated with JavaScript primary error types, what I’ll do next is write a simple function, which adds on the fly a bunch of links to the document tree by using some DOM methods. This function implements a single exception handler, and its definition looks like this:

function addLinks(){
    // define links
    try {
        var links=new Array
('home.htm','profile.htm','products.htm','contact.htm');
        for(var i=0;i<links.length;i++){
            // create <a> elements
            var as=document.createElement('a');
            // add href property
            as.href=links[i];
            // add title property
            as.title=links[i].replace(/.htm/,'');
            // add link labels
            as.appendChild(document.createTextNode(' '+as.title+' '));           
           // add links to document tree
            document.body.appendChild(as);
        }
    }
    catch(e){
        var p=document.createElement('p');
        p.appendChild(document.createTextNode('An exception was
thrown by the script. Error name :'+e.name+' Error
message :'+e.message));
        document.body.appendChild(p);
    }
}
// call function when page is loaded
window.onload=function(){
    var W3C=document.getElementById&&document.
createElement&&document.getElementsByTagName;
    if(W3C){
        addLinks();
    }
}

As I mentioned before, the “addLinks()” function appends dynamically some links to the document tree, defined through the “links” array, and sets up a single exception handler. Within the “catch()” block, the type of error is displayed by adding a paragraph, which is populated with the values of  “name” and “message” Error’s object properties.

When the script is run, it outputs a group of regulars links and nothing else, because the code has been correctly executed. The script’s output is depicted below:

Now, let’s tweak the code a little bit and introduce some changes for seeing how the script reacts to them. So, firstly I’ll deliberately replace the line:

var as=document.createElement('a');

with this one:

var a=document.createElement('a');

After running the script, what I get on my browser is the following output:

An exception was thrown by the script. Error name :ReferenceError
Error message :as is not defined

Since I replaced the “as” variable with “a”, the function throws a reference error, because the script fails to find the referenced variable.

Next, let’s make the script trap a type error. To do this, I’ll simply replace the line:

var links=new Array
('home.htm','profile.htm','products.htm','contact.htm');

with this one:

var links=new Array
(1,'profile.htm','products.htm','contact.htm');

In this case the function launches a type error, which is trapped by the “catch” block, as follows:

An exception was thrown by the script. Error name :TypeError
Error message :links[i].replace is not a function

The raised error is pretty clear, because the “links” array’s first element has been set to be numeric, so the “replace()” method fails in replacing a string value.

By this point, you should have a clear idea of how the single exception handler works. By deliberately introducing some changes within the script, I caused several errors to be raised, and accordingly the handler has trapped them.

Now that a single exception handler was implemented on the first example, let’s move on and use the same script, this time using multiple handlers.