Built-in Error Types in JavaScript: A Comprehensive Guide

ProStep Technologies - Feb 22 - - Dev Community

Image description

1. Error

The Error object is the base class for all error types in JavaScript. It serves as a generic container for error messages and stack traces.

When does it occur?

You typically create custom errors by extending the Error class or throwing an instance of Error.

try {
  throw new Error("Something went wrong!");
} catch (err) {
  console.error(err.message); // Output: Something went wrong!
}
Enter fullscreen mode Exit fullscreen mode

2. SyntaxError

A SyntaxError occurs when there is invalid JavaScript syntax in your code.

When does it occur?

This error is usually caught during the parsing phase before the code is executed.

Example:

// Missing closing parenthesis
let result = eval("console.log('Hello, world';");
// Output: SyntaxError: missing ) after argument list
Enter fullscreen mode Exit fullscreen mode

3. ReferenceError

A ReferenceError is thrown when you try to reference a variable that has not been declared or is out of scope.

When does it occur?

This often happens due to typos or using variables before they are defined.

Example:

console.log(x); // x is not defined
// Output: ReferenceError: x is not defined
Enter fullscreen mode Exit fullscreen mode

4. TypeError

A TypeError occurs when an operation is performed on a value of the wrong type.

When does it occur?

This error is common when calling methods on null, undefined, or incompatible data types.
Example:

let num = 42;
num.toUpperCase(); // Numbers don't have a toUpperCase method
// Output: TypeError: num.toUpperCase is not a function
Enter fullscreen mode Exit fullscreen mode

5. RangeError

A RangeError is thrown when a value is outside the acceptable range for a function or operation.

When does it occur?

This often happens with recursive functions, array lengths, or numeric operations.

Example:

function recurse() {
  return recurse();
}
recurse();
// Output: RangeError: Maximum call stack size exceeded
Enter fullscreen mode Exit fullscreen mode

6. EvalError

An EvalError was historically used to indicate errors related to the global eval() function. However, modern JavaScript engines no longer throw this error.

When does it occur?

This error is deprecated and rarely encountered today. For compatibility reasons, it still exists but is not actively used.

Example:

// This won't throw an EvalError in modern JavaScript
try {
  throw new EvalError("Deprecated error");
} catch (err) {
  console.error(err.name); // Output: EvalError
}
Enter fullscreen mode Exit fullscreen mode

7. URIError

A URIError is thrown when a malformed URI is passed to a global URI-handling function like encodeURI() or decodeURI().

When does it occur?

This error occurs when the input contains invalid characters for encoding or decoding.

Example:

decodeURIComponent("%"); // Invalid URI component
// Output: URIError: URI malformed

Enter fullscreen mode Exit fullscreen mode

Summary Table of Built-in Error Types

Image description

Why Should You Care About These Errors?

Understanding these built-in error types helps you:
Debug your code more efficiently.
Write robust applications that handle edge cases gracefully.
Prevent runtime crashes by anticipating potential issues.

By familiarizing yourself with these error types, you'll be better equipped to write clean, maintainable, and error-free JavaScript code.

Conclusion

JavaScript's built-in error types provide a solid foundation for identifying and resolving issues in your code. Whether it's a simple typo (ReferenceError) or an invalid operation (TypeError), knowing how to interpret these errors will save you hours of debugging time.
Next time you encounter an error, take a moment to understand its type and context - it might just lead you to the solution faster!
Happy coding!

. . . .