How to Fix Common JavaScript Errors

Every JavaScript developer encounters errors. They're not failures — they're clues. Understanding common errors helps you fix them faster. Here are the most frequent JavaScript errors and how to solve them.

1. "Cannot read property of undefined"

This is the most common JavaScript error. It happens when you try to access a property on something that doesn't exist.

// This causes the error
const user = {};
console.log(user.name.length); // Error: Cannot read property 'length' of undefined

// Fix: Check if the value exists first
console.log(user.name?.length); // Optional chaining
// Or
if (user.name) {
  console.log(user.name.length);
}

2. "is not a function"

This happens when you try to call something that isn't a function. Maybe you misspelled the function name or forgot to import it.

// This causes the error
const name = "John";
name(); // Error: name is not a function

// Fix: Make sure you're calling an actual function
function greet() {
  return "Hello!";
}
greet(); // This works

3. "Unexpected token"

Syntax errors happen when your code doesn't follow JavaScript rules. Missing brackets, semicolons, or quotes cause this.

// This causes the error
const greeting = "Hello"  // Missing semicolon is okay, but...

if (x == 5) {  // Missing closing bracket
  console.log("Five");

// Fix: Check your brackets and syntax
if (x == 5) {
  console.log("Five");
}

4. "Variable is not defined"

This happens when you use a variable before declaring it or when it's out of scope.

// This causes the error
console.log(age); // Error: age is not defined

// Fix: Declare the variable first
const age = 25;
console.log(age);

5. "CORS error"

CORS (Cross-Origin Resource Sharing) errors happen when your browser blocks requests to a different domain for security. This is common when calling APIs.

// This might cause a CORS error
fetch('https://api.example.com/data')
  .then(res => res.json())
  .catch(err => console.log(err));

// Fix: Use a proxy or configure the server
// Or use a CORS proxy during development

6. "TypeError: null is not an object"

This happens when you try to use an element that doesn't exist in the DOM.

// This causes the error if element doesn't exist
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick); // Error if button is null

// Fix: Check if element exists
const button = document.getElementById('myButton');
if (button) {
  button.addEventListener('click', handleClick);
}

Debugging Tips

• Use console.log() — Print values to see what's happening
• Read the error message — It tells you the file and line number
• Use the browser debugger — Set breakpoints and step through code
• Google the error — Someone else has had the same problem
• Take a break — Fresh eyes catch bugs faster