Types of Errors
and How to Catch Them

Introduction

Errors are inevitable in programming. In JavaScript, errors can occur due to typos, invalid operations, missing variables, or unexpected behavior at runtime.

Understanding error types and how to catch them is crucial to writing reliable code. JavaScript offers built-in mechanisms like try...catch to help developers gracefully handle unexpected issues.

Types of Errors in JavaScript

• ReferenceError: Occurs when a variable that hasn’t been declared is accessed.
• TypeError: Happens when an operation is performed on a value of the wrong type.
• SyntaxError: Raised when JavaScript code has invalid syntax.
• RangeError: Happens when a value is out of an allowable range.
• EvalError: Related to the eval() function (rarely used today).
• URIError: Occurs when functions like decodeURI() or encodeURI() are misused.

1. ReferenceError

This error is thrown when you try to access a variable that hasn’t been declared.

// ReferenceError Example
try {
  console.log(userName); // userName is not defined
} catch (error) {
  console.error("Caught a ReferenceError:", error.message);
}
    

Output:

Caught a ReferenceError: userName is not defined

2. TypeError

Thrown when a value is not of the expected type. For instance, calling a method on undefined.

// TypeError Example
try {
  let num = 42;
  num.toUpperCase(); // toUpperCase() is a string method
} catch (error) {
  console.error("Caught a TypeError:", error.message);
}
    

Output:

Caught a TypeError: num.toUpperCase is not a function

3. SyntaxError

Occurs when the code structure is not valid JavaScript. These errors must be caught at eval-time.

// SyntaxError Example using eval
try {
  eval('function () {'); // invalid syntax
} catch (error) {
  console.error("Caught a SyntaxError:", error.message);
}
    

Output:

Caught a SyntaxError: Unexpected token ')'

4. RangeError

Thrown when a number is outside of its allowable range, e.g., when creating an array with invalid length.

// RangeError Example
try {
  let items = new Array(-5);
} catch (error) {
  console.error("Caught a RangeError:", error.message);
}
    

Output:

Caught a RangeError: Invalid array length

5. URIError

Happens when decodeURI or encodeURI is used incorrectly.

// URIError Example
try {
  decodeURI('%'); // invalid URI component
} catch (error) {
  console.error("Caught a URIError:", error.message);
}
    

Output:

Caught a URIError: URI malformed

How to Catch Errors

JavaScript provides try...catch to handle errors:

try {
  // risky code here
} catch (error) {
  // handle error here
  console.log("Error caught:", error.message);
} finally {
  console.log("This block always runs");
}
    

What Happens If You Don’t Catch an Error?

If errors are not caught using try...catch, JavaScript will stop execution and show the error in the console. In production, this could mean breaking your entire web page or script.

Questions and Answers

Q: Can all errors be caught with try...catch?

A: No, SyntaxError that occurs outside eval cannot be caught using try...catch. Also, asynchronous errors need special handling (like .catch() for Promises).

Q: Can you throw custom errors?

A: Yes, using throw. You can throw a string, number, object, or an instance of Error.

try {
  throw new Error("This is a custom error");
} catch (e) {
  console.log("Custom Error:", e.message);
}
    

Output:

Custom Error: This is a custom error

Conclusion

By understanding error types and handling them effectively, you can make your JavaScript programs more robust and user-friendly. Mastering try...catch and identifying error patterns is an essential skill for every developer.