Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Синтаксична помилка проти runtime-помилки». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Синтаксична помилка, це помилка структури коду, яку рушій знаходить на етапі парсингу, ще до виконання, а 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()`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати680 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.