Suggest an edit

Improve this article

Refine the answer for “Syntax error vs runtime error”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A syntax error is an error in the structure of the code that the engine finds at the parsing stage, before execution, while a runtime error happens while syntactically valid code is already running.** The difference is practical: the first one prevents the program from starting at all, the second can be intercepted with `try...catch` so the program keeps working.

## Theory

### TL;DR

- A `SyntaxError` at the parsing stage means the engine cannot even parse the code.
- Such a file does not execute a single line, so a `try...catch` inside it is useless.
- A runtime error happens after the syntax check succeeds, when the logic leads to a failure.
- Typical runtime errors: `ReferenceError`, `TypeError`, `RangeError`.
- A runtime error can be caught in `try...catch` and the program can recover.
- `JSON.parse()` can throw a `SyntaxError` at runtime, so that case is intercepted normally.

### Quick example

```javascript
// Syntax error: a missing bracket, the code will not start
if (true {
  console.log("ok");
}

// Runtime error: the code started and broke on this line
console.log(a); // ReferenceError: a is not defined
```

### What a syntax error is

A syntax error (`SyntaxError`) is an error that appears before the program starts, when JavaScript cannot parse the code because it violates the syntax rules of the language. Put simply: the code cannot even begin to execute.

Examples:

```javascript
if (true {          // a missing bracket
  console.log("ok");
}
```

```javascript
function() {        // a function without a name
  console.log("hi");
}
```

```javascript
const a = ;         // no value after "="
```

The interpreter detects such errors at the parsing stage, before execution, so the code never runs at all.

A clear example with an explanation:

```javascript
console.log("before the error");
eval("let x = ;");              // SyntaxError
console.log("after the error"); // will not run
```

The error happens immediately when the string is interpreted, so the program never reaches the second `console.log`.

### What a runtime error is

A runtime error is an error of execution time: it appears while the program is running, after the code has successfully passed the syntax check. In other words the syntax is correct, but the program logic leads to a failure.

Examples:

```javascript
console.log(a); // ReferenceError: a is not defined
```

```javascript
let obj = null;
obj.name;       // TypeError: Cannot read properties of null
```

```javascript
JSON.parse("{ not valid json }"); // SyntaxError, but thrown at runtime
```

In these cases the code does start, but breaks on a particular line during execution. The last example shows an important nuance: the error type is called `SyntaxError`, yet it is about parsing a string of data, not your file, which is why it occurs at runtime.

### The main difference

| Criterion | Syntax error | Runtime error |
| --- | --- | --- |
| **When it happens** | At the parsing stage, before the code starts | While the program is running |
| **Can it be caught in `try...catch`** | No, the code will not even start | Yes, it can be handled |
| **Example** | `if (true {` | `console.log(a)` |
| **How JS reacts** | The code does not execute at all | Execution is interrupted at the error |
| **Error type** | `SyntaxError` | `ReferenceError`, `TypeError`, `RangeError` and others |

### A side by side example

```javascript
// Syntax error:
try {
  eval("if (true { console.log('hi') }"); // invalid syntax
} catch (e) {
  console.log("Caught it?", e.message);
}
// Here the error happens while parsing the string inside eval,
// whereas a real syntax error in the file itself would stop
// this code from running at all.

// Runtime error:
try {
  console.log(a); // ReferenceError
} catch (e) {
  console.log("Caught:", e.message);
}
```

### Summary

| Term | What it means |
| --- | --- |
| **SyntaxError** | An error in the structure of the code, JS cannot interpret it |
| **Runtime Error** | An error while running code that is syntactically valid |
| **The difference** | The first one is at the parsing stage, the second at the execution stage |

### Common mistakes

- **Hoping that `try...catch` protects against a syntax error in the same file.** The parser rejects the whole file, so the `try` block never even comes into existence.
- **Confusing a `SyntaxError` from `JSON.parse()` with a parse error in your own code.** The former happens at runtime and is caught perfectly well, the latter is not.
- **Assuming the editor always shows a syntax error.** Highlighting helps, but the engine has the final word, so it pays to keep a linter in CI.
- **Thinking a runtime error only breaks one line.** An uncaught error stops the entire current call stack, not just the problematic expression.
- **Using `eval()` to check code.** It brings security and performance problems; to parse data use `JSON.parse()`, not `eval()`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts822 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.