Errors and How to Read Them

When your JavaScript code breaks, the environment (like the browser or Node.js) generates an Error.

Reading an error message is the single most important skill you can learn as a programmer. It separates people who continue coding from people who quit. Let’s learn the three most common error types by causing them deliberately.

SyntaxError: The Parse-Time Failure

Before JavaScript executes your code, it parses (reads) it to understand the structure. A SyntaxError happens when the parser encounters invalid code format.

try {
  JSON.parse('{ invalid json }');
} catch (e) {
  console.log(e.name);
}

SyntaxError

[!WARNING] Because SyntaxErrors usually occur during the parsing phase, they happen before execution begins. This means a standard try/catch block cannot catch a syntax error in your regular script. The code simply won’t run at all. (We used JSON.parse above because it parses strings at runtime, which allows us to catch it).

TypeError: The Wrong Value

A TypeError happens when you try to do something with a value that is of the wrong type. For example, trying to call a number as if it were a function, or using a string method on a number.

try {
  let num = 42;
  num.toUpperCase();
} catch (e) {
  console.log(e.name);
}

TypeError

[!TIP] The most common TypeError you will see in your career is Cannot read properties of undefined. This happens when you try to access a property on a variable that doesn’t hold an object.

ReferenceError: The Missing Variable

A ReferenceError occurs when you try to use a variable that hasn’t been defined in the current scope. JavaScript is telling you, “I don’t know what this name refers to.”

try {
  console.log(nonExistentVar);
} catch (e) {
  console.log(e.name);
}

ReferenceError

Reading the Error Object

When an error is thrown, it creates an Error object. This object has useful properties, most importantly name and message.

const err = new TypeError('Not a function');
console.log(err.message);

Not a function

The most powerful part of an error is the stack trace (e.stack). It shows the exact history of which function called which function, leading up to the crash. This tells you where the error happened.

function crash() {
  throw new Error('Boom');
}
try {
  crash();
} catch (e) {
  console.log(e.stack.includes('crash'));
}

true

Creating Custom Errors

You can create and throw your own errors to stop execution when something is wrong. While you can throw any value (like throw "Oops"), you should always throw an Error object so that you capture the stack trace.

const err = new Error('Database disconnected');
console.log(err instanceof Error);

true

Parse-Time vs Run-Time

Here is a visual summary of when errors occur: