JavaScript Debugging Errors
Common Errors Explained
JavaScript error messages look scary, but most of them mean very simple things.
This page explains the most common errors in beginner-friendly language.
Note
Error messages are clues.
They tell you where to look and what kind of mistake happened.
How to Read an Error Message
An error message usually has three important parts.
- The error type.
- A short explanation.
- A line number.
Click the line number in the console to jump to the exact line of code.
ReferenceError
A ReferenceError means a variable or function name does not exist.
This is often caused by a misspelling or a missing declaration.
Example:
console.log(myValue);
JavaScript says it cannot find myValue.
Check spelling and make sure the variable is declared with let or const.
TypeError
A TypeError means you used a value in an invalid way.
This usually happens with undefined or null.
Example:
let x;
console.log(x.length);
The variable exists, but it has no value.
You cannot read properties from undefined.
Log the value before using it.
SyntaxError
A SyntaxError means JavaScript cannot understand your code.
This is often caused by missing brackets or parentheses.
Example:
if (x == 5 {
console.log("Hello");
}
The closing parenthesis is missing.
Syntax errors stop the script from running.
NaN Errors
NaN means Not a Number.
This happens when JavaScript cannot perform valid math.
Example:
let result = "abc" * 5;
console.log(result);
The result is NaN.
Check that both values are numbers before doing math.
Cannot Read Property of Undefined
This is one of the most common beginner errors.
It means you are trying to use something that does not exist.
Example:
let user;
console.log(user.name);
The variable exists, but the object does not.
Common Error Meanings
- ReferenceError means a name is not defined.
- TypeError means a value is used incorrectly.
- SyntaxError means broken code structure.
- NaN means invalid math.
Debugging Tip
Do not ignore errors.
Fix the first error before moving on.
One error often causes many others.
Next: Debugging Async Code
Async code introduces new types of bugs.
The next page shows how to debug fetch(), promises, and async functions.
