JS Errors

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Errors

Throw, and Try…Catch…Finally

The try statement specifies a code block to run (to try).

The catch statement specifies a code block to handle any error.

The finally statement specifies a code block to run regardless of the result.

The throw statement specifies a custom error.

Errors Will Happen!

While JavaScript code is executed, different errors can occur.

Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things.

Example

In this example the “alert” is misspelled as “adddlert” to deliberately produce an error:

<!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>

Output

JavaScript Error Handling

How to use catch to display an error.

JavaScript try and catch

The try statement enables you to specify a block of code to be tested for errors while it is being executed.

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

The JavaScript statements try and catch come in pairs:

Example

try {

  Block of code to try

}

catch(err) {

  Block of code to handle errors

}

JavaScript Throws Errors

When an error is seen, JavaScript  normally stops and generates an error message.

The technical term for this is: JavaScript will throw an exception (throw an error).

JavaScript creates an Error object with two properties: name and message.

The throw Statement

The throw statement enables you to create a custom error.

Technically you can throw an exception (throw an error).

The exception can be a JavaScript String, a Number, a Boolean or an Object:

throw “Too big”;  // throw a text

throw 500;  // throw a number

If you use throw together with try and catch, you can control program flow and generate custom error messages.

Input Validation Example

This example examines input. If the value is wrong, an exception (err) is thrown.

The exception (err) is caught by the catch statement and a custom error message is displayed.

Example

<!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 == “”)  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>

Output

JavaScript try catch

Please input a number between 5 and 10:

HTML Validation

Modern browsers often use a combination of JavaScript and built-in HTML validation, with the help of prespecified validation rules specified in HTML attributes:

<input id=”demo” type=”number” min=”5″ max=”10″ step=”1″>

The finally Statement

The finally statement enables the execution of the code, after try and catch, regardless of the result:

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

}

Example

<!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 == “”)  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>

Output

JavaScript try catch

Please input a number between 5 and 10:

Range Error

A RangeError is thrown if a number is used outside the range of legal values.

For example: You cannot set the number of significant digits of a number to 500.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id=”demo”>

<script>

let num = 1;

try {

  num.toPrecision(500);

}

catch(err) {

 document.getElementById(“demo”).innerHTML = err.name;

}

</script>

</body>

</html>

Output

JavaScript Errors

You cannot set the number of significant digits of a number to 500:

RangeError

Reference Error

A ReferenceError is thrown if you use (reference) a variable that has not been declared:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Errors</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>

Output

JavaScript Errors

You cannot use the value of a non-existing variable:

ReferenceError

Syntax Error

A SyntaxError is thrown if you try to evaluate code with a syntax error.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Errors</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>

Output

JavaScript Errors

You cannot evaluate code that contains a syntax error:

SyntaxError

Type Error

A TypeError is thrown if you use a value that is outside the range of expected types:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Errors</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>

Output

JavaScript Errors

You cannot convert a number to upper case:

TypeError

URI (Uniform Resource Identifier) Error

A URIError is thrown illegal characters in a URI function is used:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Errors</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>

Output

JavaScript Errors

Some characters cannot be decoded with decodeURI():

URIError