Internet & ToolsAI tools like GitHub Copilot and ChatGPT generate JavaScript that looks plausible but sometimes makes assumptions about data that turn out to be wrong. Understanding the four most common JavaScript error types means you can look at an error and know immediately what kind of fix to apply, instead of guessing.
TypeError
A TypeError means you tried to use a value as a type it isn't. The most common trigger is accessing a property on undefined or null, or calling something that isn't a function.
"Cannot read properties of undefined"
// Problem: user is undefined, so user.name crashes
const user = undefined;
console.log(user.name); // TypeError!
// Fix 1: guard with an if statement
if (user) {
console.log(user.name);
}
// Fix 2: optional chaining (returns undefined instead of crashing)
console.log(user?.name);
// Fix 3: default value if the source might return nothing
const user = getUser() ?? { name: 'Guest' };"Cannot read properties of null"
Null is slightly different from undefined, it usually means a DOMWhat is dom?The Document Object Model - the browser's live representation of your HTML page as a tree of objects that JavaScript can read and modify. element wasn't found, or an APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. returned an explicit empty value.
// Problem: getElementById returns null if the element doesn't exist
const element = document.getElementById('missing-id');
element.classList.add('active'); // TypeError!
// Fix: check before using
if (element) {
element.classList.add('active');
}"X is not a function"
// Problem 1: typo in the method name
const arr = [1, 2, 3];
arr.maap(x => x * 2); // TypeError: arr.maap is not a function
// Problem 2: calling .map() on something that isn't an array
const obj = { a: 1 };
obj.map(x => x); // TypeError: obj.map is not a function
// Fix: verify the type before calling array methods
if (Array.isArray(data)) {
data.map(x => x * 2);
}.lenght instead of .length, or .filer instead of .filter.ReferenceError
A ReferenceError means JavaScript cannot find the variable you're referencing. Either it was never declared, or you're using it before it was declared.
"X is not defined"
// Problem 1: variable was never declared
console.log(myVariable); // ReferenceError: myVariable is not defined
// Problem 2: typo
console.log(usreName); // ReferenceError: usreName is not defined
// ^^^ should be userName
// Fix: declare the variable before using it
const myVariable = 'hello';
console.log(myVariable);"Cannot access X before initialization"
// Problem: using const/let before its declaration
console.log(name); // ReferenceError!
const name = 'Alice';
// Why: const and let have a "temporal dead zone" - they exist in the
// scope but cannot be accessed until the declaration line runs.
// Fix: always declare first, use second
const name = 'Alice';
console.log(name); // 'Alice'var doesn't have this problem (it gets hoisted), but const and let are safer because they force you to declare before use. That's the behavior you want.
SyntaxError
A SyntaxError means your code is structurally broken, the JavaScript engine can't even parse it, so nothing in the file will run. These are usually easy to find because your editor will flag them immediately.
"Unexpected tokenWhat is token?The smallest unit of text an LLM processes - roughly three-quarters of a word. API pricing is based on how many tokens you use." and "Unexpected end of input"
// Problem: missing closing brace
function greet() {
console.log('hello');
// SyntaxError: Unexpected end of input
// Problem: missing comma between object properties
const user = {
name: 'Alice'
age: 25 // SyntaxError: Unexpected identifier 'age'
};
// Problem: unclosed string
const message = 'Hello world; // SyntaxError: Invalid or unexpected tokenA good editor (VS Code) will underline syntax errors in red before you even save the file. Invest five minutes in enabling syntax highlighting if you haven't already.
// Fixed versions
function greet() {
console.log('hello');
}
const user = {
name: 'Alice',
age: 25
};
const message = 'Hello world';RangeError
A RangeError means a number is outside an allowed range, or a recursive function called itself too many times without stopping.
// Problem: negative array length
const arr = new Array(-1); // RangeError: Invalid array length
// Problem: infinite recursion
function loop() {
loop(); // calls itself forever
}
loop(); // RangeError: Maximum call stack size exceeded
// Fix: every recursive function needs a base case that stops the recursion
function countdown(n) {
if (n <= 0) return; // base case
console.log(n);
countdown(n - 1);
}
countdown(5); // 5, 4, 3, 2, 1Bonus: two common React errors
If you're using React, these two come up constantly when working with AI-generated components.
"Cannot read properties of undefined (reading 'map')"
// Problem: data hasn't loaded yet, so users is undefined
function UserList({ users }) {
return users.map(u => <div key={u.id}>{u.name}</div>);
}
// Fix: provide a default value so .map() always has an array to work with
function UserList({ users = [] }) {
return users.map(u => <div key={u.id}>{u.name}</div>);
}"Objects are not valid as a React child"
// Problem: accidentally rendering an object instead of a string or number
const user = { name: 'Alice', age: 25 };
return <div>{user}</div>; // Error: Objects are not valid as a React child
// Fix: render a specific property
return <div>{user.name}</div>;Quick reference
| Error type | Root cause | Quick fix |
|---|---|---|
TypeError | Wrong type, accessing .x on undefined or null | Optional chaining (?.), default values, type checks |
ReferenceError | Variable doesn't exist or used before declaration | Declare variables before using them |
SyntaxError | Invalid JavaScript, missing brackets, commas, quotes | Fix in editor; use a linter to catch early |
RangeError | Number out of range or infinite recursion | Add bounds checks; add a base case to recursive functions |