Common Errors and Fixes0%
Clean Code Practices

Common Errors and Fixes

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Common JavaScript Errors and Fixes

Every JavaScript developer encounters runtime errors. Understanding how to read error messages and trace stack traces transforms frustrating debugging into quick, routine fixes.

1. Reading an Error Message and Stack Trace

When an unhandled error occurs, the console prints:

Output
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at app.js:14:5

Decoding the Trace:

  1. 1
    Error Name: TypeError (The category of error).
  2. 2
    Message: Cannot read properties of null (reading 'addEventListener') (What went wrong).
  3. 3
    File & Line: app.js:14:5 (The error occurred in app.js on line 14, column 5).

2. The Big 5 JavaScript Errors

1. TypeError: Cannot read properties of null / undefined

  • Cause: Attempting to access a property or call a method on a variable that evaluates to null or undefined.
  • Example:
JavaScript
const btn = document.querySelector("#wrong-id"); // Returns null!
btn.addEventListener("click", () => {}); // 💥 TypeError!
  • Fix: Check that the selector matches your HTML, or use optional chaining (?.):
JavaScript
btn?.addEventListener("click", () => {});

2. ReferenceError: x is not defined

  • Cause: Trying to use a variable that was never declared, or accessing a block-scoped variable outside its scope.
  • Example:
JavaScript
console.log(totalScore); // 💥 ReferenceError! (Variable never declared)
  • Fix: Verify variable spelling and ensure it is declared with const or let in accessible scope.

3. SyntaxError: Unexpected token ...

  • Cause: Breaking JavaScript grammar rules: unclosed quotes, missing commas, missing parentheses or curly braces.
  • Example:
JavaScript
const user = { name: "Sumit" age: 25 }; // 💥 SyntaxError: Missing comma!
  • Fix: Check matching braces and commas; enable Prettier in VS Code to highlight syntax errors instantly.

4. TypeError: Assignment to constant variable

  • Cause: Trying to reassign a variable declared with const.
  • Example:
JavaScript
const count = 0;
count = 1; // 💥 TypeError!
  • Fix: Change declaration to let if the variable must be reassigned.

5. RangeError: Maximum call stack size exceeded

  • Cause: Infinite recursion! A function calls itself repeatedly without ever reaching a base case.
  • Example:
JavaScript
function loop() {
loop(); // 💥 RangeError: Stack overflow!
}
loop();
  • Fix: Always define an explicit termination base case in recursive functions.

3. Defensive Programming: Handling Errors with try...catch

When dealing with operations that might fail unpredictably (like parsing external JSON or making network requests):

JavaScript
try {
const data = JSON.parse(malformedString);
console.log("Parsed data:", data);
} catch (error) {
console.error("Failed to parse JSON gracefully:", error.message);
} finally {
console.log("Cleanup operations executed.");
}
Interactive Quiz

Practice Quiz

Question 1
What causes TypeError: Cannot read properties of undefined?
Question 2
What causes a ReferenceError: myVar is not defined?
Question 3
What causes RangeError: Maximum call stack size exceeded?
Question 4
Which operator introduced in ES2020 safely prevents Cannot read properties of null errors by short-circuiting to undefined if the reference is nullish?
Question 5
What block in a try...catch...finally statement is guaranteed to run regardless of whether an error occurred or was caught?
Next Lesson

Clean Code Practices

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Using console.log()Clean Code Practices

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext