JS оператор break

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

break — це ключове слово, яке використовується для дострокового завершення виконання поточного циклу або блоку switch. Воно негайно припиняє роботу конструкції, в якій викликається, і передає управління на наступну інструкцію після цієї конструкції.

Використання в циклах

break особливо корисний у циклах (for, while, do...while), якщо потрібно припинити ітерацію за певних умов. Наприклад, якщо знайдений потрібний елемент в масиві, інші елементи можна не перевіряти:

const numbers = [1, 3, 5, 7, 9];
for (let number of numbers) {
  if (number === 5) {
    console.log('Знайдено число 5!');
    break; // Цикл припиняється
  }
}

Використання в switch

У блоці switch, ключове слово break дозволяє вийти з поточної гілки після виконання її коду, щоб уникнути переходу до наступної гілки.

const fruit = 'яблуко';
switch (fruit) {
  case 'яблуко':
    console.log('Це яблуко.');
    break; // Виходимо з блоку switch
  case 'банан':
    console.log('Це банан.');
    break;
  default:
    console.log('Це невідомий фрукт.');
}

Без break усі наступні гілки case будуть виконуватися, навіть якщо умова вже була виконана.

Вкладені цикли

break може використовуватися для виходу лише з найближчого циклу. Щоб завершити роботу кількох циклів одночасно, часто застосовують мітки (label), хоча це менш поширений підхід.

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // Вихід із зовнішнього циклу
    }
    console.log(`i: ${i}, j: ${j}`);
  }
}

правити

Порада

Використовуйте break з мітками для складних вкладених конструкцій, але уникайте надмірного використання міток. Їх важко відстежувати в довгому коді.

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

Порада

Не використовуйте break поза контекстом циклів чи switch. Це спричинить синтаксичну помилку.

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

Порада

У тестуванні масивів або об’єктів break корисний для дострокового завершення, але слід уникати ситуацій, коли це порушує читабельність:

for (let item of items) {
  if (item.matchesCondition) {
    handle(item);
    break;
  }
}

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

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

Синтаксис

break;

Переглядачі

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

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

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

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

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

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

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

Приклади

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

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

outerLoop: for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] === 5) {
      console.log('Знайдено число 5!');
      break outerLoop; // Завершення обох циклів
    }
  }
}

const largeArray = Array.from({ length: 1000 }, (_, i) => i + 1);
for (let number of largeArray) {
  if (number > 100) {
    console.log(`Знайдено перше число більше за 100: ${number}`);
    break;
  }
}

<header>
  <h2 class="title">Конструкція "break"</h2>
  <p class="description">Дозволяє завершити виконання циклу або блоку коду достроково.</p>
</header>
<main>
  <div class="result">
    <!-- Форма для введення числа -->
    <form id="search-form">
      <label for="number-input">Введіть число для пошуку:</label>
      <input type="number" id="number-input" placeholder="Наприклад, 5" required />
      <button type="submit">Знайти</button>
    </form>
    <!-- Відображення результату -->
    <div id="output" style="margin-top: 15px;"></div>
  </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);
}

/* Стилі форми */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

// Масив чисел для пошуку
const numbers = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];

// Знаходимо елементи форми та результату
const form = document.getElementById('search-form');
const input = document.getElementById('number-input');
const output = document.getElementById('output');

// Обробник події для форми
form.addEventListener('submit', function (event) {
  event.preventDefault(); // Забороняємо перезавантаження сторінки
  const targetNumber = parseInt(input.value, 10);
  let found = false;

  // Цикл для пошуку числа
  for (let number of numbers) {
    if (number === targetNumber) {
      found = true;
      output.innerHTML = `Число <strong>${targetNumber}</strong> знайдено в масиві!`;
      break; // Припиняємо цикл після знаходження
    }
  }

  // Якщо число не знайдено
  if (!found) {
    output.innerHTML = `Число <strong>${targetNumber}</strong> відсутнє в масиві.`;
  }
});
//# sourceURL=pen.js