Error Types

JavaScript Error Types: When Your Code Cries for Help 🚨

Imagine you’re building a tower with blocks. Sometimes you pick the wrong block, sometimes you try to use a block that doesn’t exist, and sometimes you put blocks in the wrong order. JavaScript is just like that! When something goes wrong, it tells you exactly what happened with different types of errors.

Let’s meet the Error Family — each one tells you a different story about what went wrong.

The Universal Analogy: The Helpful Librarian 📚

Think of JavaScript as a super helpful librarian. When you ask for something that doesn’t make sense, the librarian doesn’t just shrug — they tell you exactly what went wrong:

• “That book doesn’t exist!” → ReferenceError
• “You can’t read a book that way!” → TypeError
• “Your request doesn’t make sense!” → SyntaxError
• “That number is too big/small!” → RangeError

1. TypeError: “You Can’t Do That With This Thing!”

A TypeError happens when you try to do something with a value, but that value doesn’t support it.

The Story

Imagine trying to ride a bicycle… but it’s actually a sandwich. You CAN’T ride a sandwich! That’s a TypeError — you’re trying to use something in a way it wasn’t meant to be used.

Examples

// Trying to call something that's not a function
let name = "Alice";
name(); // TypeError: name is not a function

// Trying to read property of undefined
let user;
console.log(user.age); // TypeError: Cannot read property 'age' of undefined

// Trying to change a constant
const pi = 3.14;
pi = 3; // TypeError: Assignment to constant variable

What JavaScript Says

“Hey! You’re trying to use this value in a way that doesn’t work. Check what type of thing you’re working with!”

2. ReferenceError: “I Don’t Know What That Is!”

A ReferenceError happens when you try to use a variable that doesn’t exist.

The Story

Imagine calling your friend “Zorbax” to come play — but you don’t have a friend named Zorbax! You can’t call someone who doesn’t exist. That’s a ReferenceError.

Examples

// Using a variable before declaring it
console.log(myAge); // ReferenceError: myAge is not defined

// Typo in variable name
let userName = "Bob";
console.log(usrName); // ReferenceError: usrName is not defined

// Accessing outside scope
function greet() {
  let secret = "Hi!";
}
console.log(secret); // ReferenceError: secret is not defined

What JavaScript Says

“I looked everywhere, but I can’t find anything called that! Did you forget to create it, or maybe you spelled it wrong?”

3. SyntaxError: “I Can’t Understand You!”

A SyntaxError happens when you write code that JavaScript can’t read at all. It’s like speaking gibberish.

The Story

Imagine writing a note: “I want ice cream want I cream”. That doesn’t make sense! The words are jumbled up. JavaScript needs your code written in a specific way, or it gets confused.

Examples

// Missing closing bracket
function sayHi( {  // SyntaxError: Unexpected token '{'
  console.log("Hi");
}

// Using reserved word as variable
let const = 5; // SyntaxError: Unexpected token 'const'

// Missing quotes
let name = Hello; // SyntaxError: Hello is not defined

// Extra comma
let arr = [1, 2, 3,]; // OK in modern JS
let obj = {a: 1,, b: 2}; // SyntaxError: Unexpected token ','

What JavaScript Says

“I can’t even start reading your code! Something is written in a way I don’t understand. Check your brackets, quotes, and punctuation!”

The Big Difference

SyntaxError happens BEFORE your code runs. The other errors happen WHILE your code runs.

4. RangeError: “That Number is Too Wild!”

A RangeError happens when a value is not in the allowed range.

The Story

Imagine asking for a pizza with 10 million slices or negative 5 slices. The pizza shop says “That’s impossible!” That’s a RangeError — your number is outside what’s allowed.

Examples

// Array with impossible length
let arr = new Array(-1); // RangeError: Invalid array length

// Too much recursion (function calling itself forever)
function forever() {
  forever();
}
forever(); // RangeError: Maximum call stack size exceeded

// toFixed with too many decimals
let num = 3.14159;
num.toFixed(200); // RangeError: toFixed() digits argument must be between 0 and 100

What JavaScript Says

“The number you gave me is way outside what I can handle! Make it smaller, bigger, or more reasonable.”

5. Custom Error Classes: Make Your Own Error Messages!

Sometimes, you want to create your own type of error with a special message. This helps you (and other developers) understand exactly what went wrong in YOUR code.

The Story

Imagine you’re a teacher. Instead of just saying “Wrong!”, you create specific feedback: “NotEnoughHomeworkError”, “TooManyAbsencesError”, “IncompleteProjectError”. Custom errors work the same way!

How to Create Custom Errors

// Create your own error type
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

// Use it in your code
function checkAge(age) {
  if (age < 0) {
    throw new ValidationError("Age cannot be negative!");
  }
  if (age > 150) {
    throw new ValidationError("Age seems unrealistic!");
  }
  return "Age is valid!";
}

// Try it out
try {
  checkAge(-5);
} catch (error) {
  console.log(error.name);    // ValidationError
  console.log(error.message); // Age cannot be negative!
}

Why Custom Errors Rock

• Your error messages are super clear
• You can catch specific error types
• Other developers understand your code better

6. Error Stack Trace: The Detective Trail 🔍

When an error happens, JavaScript gives you a stack trace — a trail of breadcrumbs showing exactly where the error happened and how your code got there.

The Story

Imagine you’re in a maze and you drop breadcrumbs. When you get lost, you can follow the breadcrumbs back to see your path. A stack trace is like those breadcrumbs — it shows you the path your code took before the error.

Reading a Stack Trace

function step1() {
  step2();
}

function step2() {
  step3();
}

function step3() {
  throw new Error("Something broke!");
}

step1();

The Stack Trace Output

Error: Something broke!
    at step3 (script.js:10)
    at step2 (script.js:6)
    at step1 (script.js:2)
    at script.js:13

How to Read It (Bottom to Top)

1. Line 13: Your code called step1()
2. Line 2: step1 called step2()
3. Line 6: step2 called step3()
4. Line 10: step3 threw the error — THIS IS WHERE THE PROBLEM IS!

The Stack Trace Shows You:

• What went wrong (the error message)
• Where it happened (file name and line number)
• How your code got there (the trail of function calls)

Quick Reference: Which Error is Which?

graph TD
    A["Error Happens!"] --> B{What kind?}
    B --> C["TypeError"]
    B --> D["ReferenceError"]
    B --> E["SyntaxError"]
    B --> F["RangeError"]

    C --> C1["Used value wrong way<br/>Example: null.something"]
    D --> D1["Variable doesn't exist<br/>Example: console.log#40;xyz#41;"]
    E --> E1["Code can't be read<br/>Example: missing bracket"]
    F --> F1["Number out of range<br/>Example: new Array#40;-1#41;"]

The Error Family Summary

Pro Tips: Becoming an Error Detective 🕵️

1. Read the error message first — JavaScript tells you what went wrong!
2. Check the line number — The stack trace points you right to the problem
3. Read bottom to top — Stack traces show the journey in reverse
4. Look for typos — Many ReferenceErrors are just spelling mistakes
5. Check for undefined — Many TypeErrors happen because a value is undefined

You’ve Got This! 💪

Errors aren’t scary — they’re helpful messages from JavaScript! Every error tells you:

• What went wrong
• Where it happened
• How to find it

The more errors you see and fix, the better programmer you become. Each error is a lesson, and now you know exactly what each one means!

Remember our librarian? Now YOU can be the librarian — understanding every complaint and knowing exactly how to fix it! 📚✨