---
title: while
slug: Web/JavaScript/Reference/Statements/while
tags:
  - JavaScript
  - while
translation_of: Web/JavaScript/Reference/Statements/while
---
<div>{{jsSidebar("Statements")}}</div>

<p>Оператор <strong>while</strong> створює цикл, який виконує вказану інструкцію, доки перевірочна умова оцінюється як true. Умова оцінюється перед виконанням інструкції.</p>

<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>



<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">while (<var>condition</var>)
  <var>statement</var>
</pre>

<dl>
 <dt><code><var>condition</var></code></dt>
 <dd>Вираз, який оцінюється перед кожним проходом циклу. Якщо ця умова оцінюється як true, <code><var>statement</var></code> виконується. Коли умова оцінюється як false, виконання продовжується з інструкції, що розташована після циклу <code>while</code>.</dd>
 <dt><code><var>statement</var></code></dt>
 <dd>Необов'язкова інструкція, яка виконується, поки умова оцінюється як true. Для виконання кількох інструкцій у циклі, скористайтесь <a href="/uk/docs/JavaScript/Reference/Statements/block">блоком</a> <code>({ ... })</code>, щоб згрупувати ці інструкції.<br>
 <br>
 Заувага: Використовуйте оператор <code>break</code>, щоб зупинити цикл раніше, ніж умова буде оцінена як false.</dd>
</dl>

<h2 id="Приклади">Приклади</h2>

<p>Наступний цикл <code>while</code> виконується, поки <code>n</code> менше трьох.</p>

<pre class="brush:js">var n = 0;
var x = 0;

while (n &lt; 3) {
  n++;
  x += n;
}</pre>

<p>На кожній ітерації цикл збільшує змінну <code>n</code> на один та додає її до <code>x</code>. Отже, <code>x</code> та <code>n</code> приймають наступні значення:</p>

<ul>
 <li>Після першого проходу: <code>n</code> = 1 та <code>x</code> = 1</li>
 <li>Після другого проходу: <code>n</code> = 2 та <code>x</code> = 3</li>
 <li>Після третього проходу: <code>n</code> = 3 та <code>x</code> = 6</li>
</ul>

<p>Після завершення третього проходу умова <code>n</code> &lt; 3 більше не дорівнює true, тому цикл переривається.</p>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Початкове визначення</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>



<p>{{Compat("javascript.statements.while")}}</p>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("Statements/do...while", "do...while")}}</li>
 <li>{{jsxref("Statements/for", "for")}}</li>
</ul>