How to Handle JavaScript Errors
If you're building an application in JavaScript, chances are high that human error will be made. Either with the data types or you may just end up substituting an undefined for a null or a triple equality operator (===) for a double equality operator (==).
Before identifying and fixing these errors, let's clarify what an error is and its syntax.
/* What is a JavaScript Error? */
Whenever a JavaScript error occurs, an object will be displayed containing detailed information about the type of error and the statement that caused it. JavaScript also allows programmers to create custom errors to provide additional information when debugging problems.
Properties of an Error
In order to be understood, errors in JavaScript carry certain properties. By default, JavaScript errors contain two properties:
- Message: A string value carrying the error message.
- Name: The type of error that occurred (very useful when googling looking for answers)
/* Most Common Types of JavaScript Errors */
Syntax error
These errors are self-explanatory, as they indicate a syntax error in your code. Since JavaScript is a scripting language that is interpreted and not compiled, they are thrown when the application executes the script containing the error.
Some of the most common reasons why this can occur are:
- Missing quotes.
- Lack of closing parentheses
- Incorrect alignment of braces or other characters
It is good practice to use a linting tool in your IDE to identify these errors before they reach the browser.
TypeError
When some value does not happen to be of a certain expected type, this error will pop-up. Some of the most common cases in which it occurs are:
- Calling objects that are not methods.
- Attempting to access properties of null or undefined objects.
- Using a string as a number or vice versa.
RangeError
A RangeError occurs when a variable is set to a value outside of its legal value range. It usually happens when a value is passed as an argument to a function, and the given value is not in the range of the function's parameters. This can sometimes be difficult to fix when using poorly documented third-party libraries, since you need to know the range of possible values for the arguments to pass the correct value.
Some of the most common situations in which the RangeError occurs are:
- Attempting to create an array of illegal lengths using the Array constructor.
- Passing wrong values to numeric methods like toExponential(), toPrecision(), toFixed(), etc.
- Passing illegal values to string functions like normalize().
ReferenceError
Occurs when something is wrong with a variable reference in your code. You may have forgotten to define a value for the variable before using it, or you may be trying to use an inaccessible variable in your code. In either case, reviewing the stack trace provides ample information for finding and fixing the broken variable reference.
Some of the most common reasons for reference errors are:
- Attempting to access block-scoped variables outside of their scope.
- Reference a global variable from an external library (such as jQuery's $) before it is loaded.
If you are interested in an extensive errors list, check out: Errors Docs -Developer.mozilla.org
a. 🌺
