The Error object and throwing your own errors
The Error
Object
As promised, we're going to take a closer look at the Error
object that
gets passed into the catch
clause to see just what we can
extract from it in an event of an error. The Error
object in
all browsers support the following two properties:
- name: The name of the error, or more specifically, the name of the constructor function the error belongs to.
- message: A description of the error, with this description varying depending on the browser.
try{ document.body.filters[0].apply() } catch(e){ alert(e.name + "\n" + e.message) }
Six possible values can be returned by the name
property,
which as mentioned correspond to the names of the error's constructors.
They are:
Error Name | Description |
---|---|
EvalError | An error in the eval() function has
occurred. |
RangeError | Out of range number value has occurred. |
ReferenceError | An illegal reference has occurred. |
SyntaxError | A syntax error within code inside the eval()
function has occurred. All other syntax errors are not caught by
try/catch/finally , and will trigger the default browser
error message associated with the error. To catch actual syntax errors,
you may use the onerror event. |
TypeError | An error in the expected variable type has occurred. |
URIError | An error when encoding or decoding the URI has occurred
(ie: when calling encodeURI() ). |
This level of detail may be useful when you wish to sniff out a
specific type of error in your catch
clause. In the below, no
DIV on the page exists with ID="mydiv"
. When trying to set its
.innerHTML
property, a TypeError
occurs, since
we're trying to assign the .innerHTML
property to a null
object:
try{ document.getElementById("mydiv").innerHTML='Success' //assuming "mydiv" is undefined } catch(e){ if (e.name.toString() == "TypeError"){ //evals to true in this case //do something } }
Ok, so maybe it's not that useful most of the time, but you just never know.
Throwing your own errors (exceptions)
Instead of waiting for one of the 6 types of errors above to occur before
control is automatically transferred from the try
block to the
catch
block, you can also explicitly throw your own exceptions
to force that to happen on demand. This is great for creating your own
definitions of what an error is and when control should be transferred to
catch
.
To throw an error, invoke, well, the throw
statement inside
your try/catch/finally
blocks. The syntax is:
throw myerrorobject
Where myerrorobject
can in fact be anything from a string,
number, Boolean, to a new or one of the 6 default Error Constructor
functions. What myerrorobject
is set to mainly just affects what
error.name
and
error.message
returns in your catch
clause. Most
commonly you would just throw a new Error object:
throw new Error("Oh oh, an error has occured")
Lets see a meaningful example of throw
in action:
function entrycheck(){ try{ var agecheck=prompt("This movie is rated PG-13. Please enter your age before continuing:") if (isNaN(parseInt(agecheck))) throw new Error("Please enter a valid age") else if (agecheck<13) throw new Error("Sorry, but you are too young for this movie") alert("Enjoy the movie!") } catch(e){ alert(e.name+" "+e.message) } }
Try entering a none numeric value (ie: "haha") or a number less than 13
(ie: 11). In both cases, by using throw
, control is instantly
transferred to catch
, with e.message
displaying a
different message. Technically entering a string or number less than 13
certainly doesn't constitute an exception in JavaScript, though for our
purpose here, they should. That's how throw
can be useful- when
you need to specify your own parameters of what an error is inside
try/catch/finally
.
As mentioned, there are a number of other things apart from new
Error()
you can throw, which changes the contents of the error object
passed into catch
. The following are all valid throws:
- throw "An error has occurred"
- throw true
- throw new Error("I detect an error!")
- throw new SyntaxError("Your syntax is no good")
In the last instance, you can substitute SyntaxError
with
one of the 6 Error constructor function names to throw a specific type of
error. In our age check example above, we could have thrown a
SyntaxError
when the value entered was a string, and a
RangeError
when the value was less than 13:
function entrycheck(){ try{ var agecheck=prompt("This movie is rated PG-13. Please enter your age before continuing:") if (isNaN(parseInt(agecheck))) throw new SyntaxError("Please enter a valid age") else if (agecheck<13) throw new RangeError("Sorry, but you are too young for this movie") alert("Enjoy the movie!") } catch(e){ alert(e.name+" "+e.message) } }
This has the effect of changing what e.name
returns-
SyntaxError
and RangeError
, respectively. If that's not
enough, you can even throw a generic Error object with custom name and
message properties:
throw{ name: "JavaScriptKit Error", message: "Error detected. Please contact webmaster" }
And with that we throw in the towel!
- Overview of try/catch/finally
- The Error object and throwing your own errors