JS оператор throw

Загальний опис

throw — це ключове слово JavaScript, яке використовується для генерації винятків, що сигналізують про помилки або інші аномалії в роботі програми. Коли throw викликається, виконання коду негайно припиняється, і управління передається найближчому блоку catch або механізму обробки помилок.

У throw можна передати будь-яке значення: об'єкт, рядок, число або навіть функцію. Найчастіше передають об'єкт помилки (Error), який містить інформацію про проблему.

Основна структура:

function divide(a, b) {
    if (b === 0) {
        throw new Error("Ділення на нуль заборонено.");
    }
    return a / b;
}

У цьому прикладі, якщо b дорівнює нулю, програма зупинить виконання і створить виняток із повідомленням.

Як працює разом з try...catch:

try {
    console.log(divide(10, 0));
} catch (error) {
    console.error("Помилка:", error.message);
}

Блок catch обробляє виняток і дозволяє уникнути аварійного завершення програми.

throw також може використовуватися з іншими типами даних, наприклад:

throw "Простий текстовий виняток";
throw 404; // Числовий код помилки
throw {message: "Щось пішло не так", code: 500};

Загалом, throw — потужний інструмент для керування помилками в програмному коді, який дозволяє дотримуватися принципу "fail fast" (швидке виявлення проблем).

правити

Порада

Обробляйте винятки обережно. Пам’ятайте, що необроблені винятки можуть завершити виконання всієї програми. Завжди використовуйте throw разом із блоками try...catch для захисту критичних ділянок коду.

автор: Bond правити

Порада

Уникайте використання простих типів (наприклад, рядків або чисел) у throw. Надавайте перевагу об'єктам Error, оскільки вони надають більше інформації, наприклад, стек викликів (stack) та ім’я помилки (name).

автор: Bond правити

Порада

Створюйте власні класи помилок, успадковані від Error. Це допоможе чіткіше визначити типи помилок:

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}
throw new ValidationError("Некоректні дані!");

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

throw expression;

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

function validateUser(user) {
    if (!user.name) throw new Error("Ім'я обов'язкове.");
    if (user.age < 18) throw new Error("Користувач повинен бути старше 18 років.");
    return "Користувач успішно верифікований.";
}

try {
    console.log(validateUser({ name: "Іван", age: 15 }));
} catch (error) {
    console.error("Помилка валідації:", error.message);
}

class NetworkError extends Error {
    constructor(message) {
        super(message);
        this.name = "NetworkError";
    }
}

function fetchData(url) {
    if (!url.startsWith("https://")) {
        throw new NetworkError("URL повинен починатися з 'https://'.");
    }
    // Логіка запиту
    return "Дані завантажено.";
}

try {
    console.log(fetchData("http://example.com"));
} catch (error) {
    if (error instanceof NetworkError) {
        console.error("Мережева помилка:", error.message);
    } else {
        console.error("Невідома помилка:", error);
    }
}

<header>
  <h2 class="title">Використання "throw" у валідації форми</h2>
  <p class="description">Завершує виконання, якщо введені дані не відповідають умовам.</p>
</header>
<main>
  <div class="result">
    <form id="validationForm">
      <label for="userInput">Введіть число (від 1 до 100):</label><br>
      <input type="text" id="userInput" placeholder="Наприклад: 42"><br><br>
      <button type="submit">Перевірити</button>
    </form>
    <p id="message"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#message {
  margin-top: 15px;
  font-weight: bold;
}

document.getElementById("validationForm").addEventListener("submit", function (event) {
  event.preventDefault(); // Запобігаємо перезавантаженню сторінки

  const userInput = document.getElementById("userInput").value;
  const messageElement = document.getElementById("message");

  try {
    validateInput(userInput);
    messageElement.style.color = "green";
    messageElement.textContent = "Введені дані коректні!";
  } catch (error) {
    messageElement.style.color = "red";
    messageElement.textContent = error.message;
  }
});

function validateInput(input) {
  const number = Number(input);

  if (isNaN(number)) {
    throw new Error("Ви повинні ввести число!");
  }
  if (number < 1 || number > 100) {
    throw new Error("Число повинно бути в діапазоні від 1 до 100.");
  }
}
//# sourceURL=pen.js