JavaScript Errors

❮ Previous Next ❯

Throw, and Try...Catch...Finally

The try statement sets up a section of code to be executed and tested for any potential errors or issues.

The catch statement sets up a block of code to manage errors that may occur.

The finally statement sets up a block of code to execute, no matter what happens in the preceding code.

The throw statement defines a custom error.

Errors Will Happen!

When running JavaScript code, various errors may occur.

Errors in programming can happen when a programmer makes mistakes in their code, when the input provided is incorrect, or due to unexpected events.

JavaScript recognizes an adddlert as a mistake and runs the catch code to deal with it.

JavaScript try and catch

The try statement lets you specify a section of code that will be checked for errors as it runs.

The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

The JavaScript commands try and catch work together in pairs:

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

JavaScript Throws Errors

When something goes wrong in JavaScript, it usually stops and shows an error message.

The technical term for this is: JavaScript will encounter a problem (an error) and show an exception.

JavaScript will actually create an Error object with two properties: name and message.

The throw Statement

The throw statement lets you make your own error in the code.

You can technically cause an error by throwing an exception.

The problem can be a JavaScript string, number, boolean, or an object.

throw "Too big"; // throw a text
throw 500; // throw a number

When you combine throw with try and catch, you gain the ability to manage how your program behaves and create personalized error messages.

Input Validation Example

This sample looks at input. If the value is incorrect, it triggers an exception (err).

The catch statement catches the exception (err) and shows a personalized error message.

HTML Validation

The code above is just an example.

Contemporary web browsers typically rely on both JavaScript and built-in HTML validation. They utilize preset validation rules specified in HTML attributes to validate input.

You can learn more about checking if forms are filled out correctly in a later part of this guide.

The finally Statement

The finally statement allows you to run code after the try and catch blocks, no matter what the outcome is.

Syntax

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}

The Error Object

JavaScript includes a built-in error object that gives details about errors when they happen.

The error object has two helpful properties: name and message.

Error Object Properties

Property	Description
name	Sets or returns an error name
message	Sets or returns an error message (a string)

Error Name Values

Six different values can be returned by the error name property:

Error Name	Description
EvalError	An error has occurred in the eval() function
RangeError	A number "out of range" has occurred
ReferenceError	An illegal reference has occurred
SyntaxError	A syntax error has occurred
TypeError	A type error has occurred
URIError	An error in encodeURI() has occurred

The six different values are described below.

Eval Error

A problem in the eval() function is shown by an EvalError.

Recent JavaScript updates don't throw EvalError anymore. Use SyntaxError instead.

Range Error

If you use a number that's not allowed, a RangeError is triggered.

For instance: You can't make a number have 500 significant digits.

Reference Error

An error called ReferenceError occurs when you try to use a variable that hasn't been declared.

Syntax Error

If there's a mistake in your code, a SyntaxError will be generated when you attempt to run it.

Type Error

An error called TypeError occurs when you use a value that doesn't match the expected types.

URI (Uniform Resource Identifier) Error

The URIError occurs when you use forbidden characters in a URI function.

Non-Standard Error Object Properties

Mozilla and Microsoft have their own special ways of describing certain error properties.

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Avoid employing these attributes on websites accessible to the public. They will not work in all browsers.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Error Handling</h2>
    <p>How to use <b>catch</b> to display an error. </p>
    <p id="demo"></p>
    <script>
      try {
        adddlert("Welcome guest!");
      } catch (err) {
        document.getElementById("demo").innerHTML = err.message;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript try catch</h2>
    <p>Please input a number between 5 and 10:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="p01"></p>
    <script>
      function myFunction() {
        const message = document.getElementById("p01");
        message.innerHTML = "";
        let x = document.getElementById("demo").value;
        try {
          if (x.trim() == "") throw "empty";
          if (isNaN(x)) throw "not a number";
          x = Number(x);
          if (x < 5) throw "too low";
          if (x > 10) throw "too high";
        } catch (err) {
          message.innerHTML = "Input is " + err;
        }
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript try catch</h2>
    <p>Please input a number between 5 and 10:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="p01"></p>
    <script>
      function myFunction() {
        const message = document.getElementById("p01");
        message.innerHTML = "";
        let x = document.getElementById("demo").value;
        try {
          if (x.trim() == "") throw "is empty";
          if (isNaN(x)) throw "is not a number";
          x = Number(x);
          if (x > 10) throw "is too high";
          if (x < 5) throw "is too low";
        } catch (err) {
          message.innerHTML = "Input " + err;
        } finally {
          document.getElementById("demo").value = "";
        }
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Errors</h1>
    <h2>The RangeError</h2>
    <p>You cannot set the number of significant digits too high:</p>
    <p id="demo">
      <script>
        let num = 1;
        try {
          num.toPrecision(500);
        } catch (err) {
          document.getElementById("demo").innerHTML = err.name;
        }
      </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Errors</h1>
    <h2>The ReferenceError</h2>
    <p>You cannot use the value of a non-existing variable:</p>
    <p id="demo"></p>
    <script>
      let x = 5;
      try {
        x = y + 1;
      } catch (err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Errors</h1>
    <h2>The SyntaxError</h2>
    <p>You cannot evaluate code that contains a syntax error:</p>
    <p id="demo"></p>
    <script>
      try {
        eval("alert('Hello)");
      } catch (err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Errors</h1>
    <h2>The TypeError</h2>
    <p>You cannot convert a number to upper case:</p>
    <p id="demo"></p>
    <script>
      let num = 1;
      try {
        num.toUpperCase();
      } catch (err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Errors</h1>
    <h2>The URIError</h2>
    <p>Some characters cannot be decoded with decodeURI():</p>
    <p id="demo"></p>
    <script>
      try {
        decodeURI("%%%");
      } catch (err) {
        document.getElementById("demo").innerHTML = err.name;
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics