Синтаксична помилка проти runtime-помилки

JavaScriptJunior~2 хв читання

Синтаксична помилка, це помилка структури коду, яку рушій знаходить на етапі парсингу, ще до виконання, а runtime-помилка виникає вже під час роботи синтаксично коректного коду. Різниця практична: перша не дає програмі запуститися взагалі, другу можна перехопити через try...catch і продовжити роботу.

Теорія

TL;DR

SyntaxError на етапі парсингу означає, що рушій не може навіть розібрати код.
Такий файл не виконається жодним рядком, тому try...catch усередині нього марний.
Runtime-помилка виникає після успішної перевірки синтаксису, коли логіка призводить до збою.
Типові runtime-помилки: ReferenceError, TypeError, RangeError.
Runtime-помилку можна спіймати в try...catch і відновити роботу програми.
JSON.parse() може кинути SyntaxError саме під час виконання, тому цей випадок перехоплюється нормально.

Швидкий приклад

javascript

// Синтаксична помилка: пропущена дужка, код не запуститься
if (true {
  console.log("ok");
}

// Runtime-помилка: код запустився і зламався на цьому рядку
console.log(a); // ReferenceError: a is not defined

Що таке синтаксична помилка

Синтаксична помилка (SyntaxError), це помилка, що виникає ще до запуску програми, коли JavaScript не може розібрати код, бо в ньому порушені правила синтаксису мови. Простіше кажучи: код не можна навіть почати виконувати.

Приклади:

javascript

if (true {          // пропущена дужка
  console.log("ok");
}

javascript

function() {        // функція без імені
  console.log("hi");
}

javascript

const a = ;         // після "=" немає значення

Такі помилки інтерпретатор виявляє на етапі парсингу, до виконання, тому код не запуститься взагалі.

Наочний приклад з поясненням:

javascript

console.log("до помилки");
eval("let x = ;");            // SyntaxError
console.log("після помилки"); // не виконається

Помилка виникає одразу при спробі інтерпретувати рядок, тому до другого console.log програма не дійде.

Що таке runtime-помилка

Runtime-помилка, це помилка часу виконання: вона виникає під час роботи програми, уже після того, як код успішно пройшов перевірку синтаксису. Тобто синтаксис коректний, але логіка програми призводить до збою.

Приклади:

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, але кинута під час виконання

У цих випадках код запускається, але ламається на певному рядку під час виконання. Останній приклад показує важливий нюанс: тип помилки називається SyntaxError, проте вона стосується розбору рядка з даними, а не вашого файлу, тому й виникає в рантаймі.

Головна різниця

Критерій	Синтаксична помилка	Runtime-помилка
Коли виникає	На етапі парсингу, до запуску коду	Під час виконання програми
Чи можна спіймати в `try...catch`	Ні, код навіть не запуститься	Так, можна обробити
Приклад	`if (true {`	`console.log(a)`
Реакція JS	Код не виконується взагалі	Виконання переривається на помилці
Тип помилки	`SyntaxError`	`ReferenceError`, `TypeError`, `RangeError` та інші

Приклад для наочного порівняння

javascript

// Синтаксична помилка:
try {
  eval("if (true { console.log('hi') }"); // некоректний синтаксис
} catch (e) {
  console.log("Спіймали?", e.message);
}
// Тут помилка виникає при розборі рядка всередині eval,
// а справжня синтаксична помилка у самому файлі не дала б
// цьому коду запуститися взагалі.

// Runtime-помилка:
try {
  console.log(a); // ReferenceError
} catch (e) {
  console.log("Спіймали:", e.message);
}

Підсумок

Термін	Що означає
SyntaxError	Помилка у структурі коду, JS не може його інтерпретувати
Runtime Error	Помилка під час виконання синтаксично коректного коду
Різниця	Перша на етапі парсингу, друга на етапі виконання

Типові помилки

Сподіватися, що try...catch захистить від синтаксичної помилки у тому самому файлі. Парсер відхиляє файл цілком, тому блок try навіть не встигає з'явитися.
Плутати SyntaxError від JSON.parse() із помилкою розбору вашого коду. Перша виникає в рантаймі і чудово ловиться, друга ні.
Вважати, що редактор завжди покаже синтаксичну помилку. Підсвітка допомагає, але остаточна перевірка за рушієм, тому корисно тримати лінтер у CI.
Гадати, що runtime-помилка ламає лише один рядок. Неспіймана помилка зупиняє весь поточний стек викликів, а не тільки проблемний вираз.
Використовувати eval() для перевірки коду. Це вносить проблеми з безпекою та продуктивністю; для розбору даних беріть JSON.parse(), а не eval().

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.