Error messages look scary, but most of them mean something simple, and they are clues: they tell you what kind of mistake happened and where to look. This lesson is a field guide to the messages you will see most, what each one means, and how to fix it.
An error in the console has three important parts:
| Part | Meaning |
|---|---|
| TypeError | The error type: the kind of mistake |
| Cannot read properties of undefined (reading 'name') | The explanation, often naming the exact value or property |
| script.js:12 | The file and line number: click it to jump there |
| at showUser ... at start | The stack: showUser was running, called by start |
The most common error in JavaScript. The name in quotes is the property it was trying to read, so the value before the dot was undefined (or null):
let user;
console.log(user.name);Find out why user is empty: log it, and check where it should have been set. If it is allowed to be missing, use optional chaining (JS Objects) and a fallback:
let user;
console.log(user?.name ?? "Guest");(reading 'name').
console.log(myValue);The name does not exist where you used it. Check the spelling (including capital letters), that it was declared with let or const, and that it is in scope: a variable declared inside a function or block does not exist outside it (JS Scope).
console.log("hello".toUppercase());You called something that is not a function. Usually a misspelled method name (here, it should be toUpperCase with a capital C), a method that does not exist on that type (like calling .map on an object), or a variable that holds a value instead of a function.
console.log(total);
let total = 5;A let or const variable was used above the line that declares it (the temporal dead zone, JS Hoisting). Move the declaration up.
const score = 10;
score = 11;You tried to reassign a const. Use let if the value really needs to change.
A SyntaxError means JavaScript cannot understand the code at all, so the script does not run. The line number points to where JavaScript noticed the problem, which can be just after the actual mistake:
| Code | Message | Usual cause |
|---|---|---|
| if (x == 5 { | Unexpected token '{' | A missing ) |
| console.log("hi" | missing ) after argument list | A call that is never closed |
| function f() { return 1; | Unexpected end of input | A missing } somewhere above |
| let name = "Ava; | Invalid or unexpected token | A string that is never closed |
| let score = 1; let score = 2; | Identifier 'score' has already been declared | The same let/const name declared twice |
| Message | Means | Fix |
|---|---|---|
| x is not iterable | for...of or spread used on something that is not a list | Check that x is an array, string, Map, or Set |
| Maximum call stack size exceeded | A function calls itself forever | Add a stopping condition |
| Invalid array length | An array created with a negative or huge size | Check the number passed to new Array() |
| Unexpected token '<' ... is not valid JSON | Parsing HTML (often an error page) as JSON | Check the URL and response.ok (Debug Async) |
NaN never shows up as an error message. It silently appears in your results when math fails:
let result = "abc" * 5;
console.log(result);When you see NaN, log each input to the calculation and find the one that is not a real number (JS NaN).
| ReferenceError | A name is not defined (yet) |
| TypeError | A value is used incorrectly: often undefined or null |
| SyntaxError | The code structure is broken |
| RangeError | A number is out of range |
| NaN (no error) | Invalid math somewhere upstream |
Which value was undefined?
const order = { customer: { name: "Ava" } };
console.log(order.shipping.city);
// TypeError: Cannot read properties of undefined (reading 'city')order.shipping. The message names the property being read (city), so the value just before it was the undefined one: order has no shipping property.What does TypeError: list.forEach is not a function most likely mean?
list is not declaredlist is not an arrayforEach is misspelled in the errorlist exists (otherwise it would be a ReferenceError), but it holds something without a forEach method, like an object or a string.The console shows eight errors. Which one should you fix first, and why?
) and one with a missing }, and compare the messages?. and ??