Syntax error vs runtime error

JavaScriptJunior~3 min read

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().

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.