path: root/files/uk/web/javascript/reference/statements/for/index.html

---
title: for
slug: Web/JavaScript/Reference/Statements/for
tags:
  - JavaScript
  - for
  - Цикл
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Statements")}}</div>

<p><strong>Оператор for </strong>створює цикл, що складається з трьох необов'язкових виразів, заключених у дужки та розділених крапками з комами, за ними розташовані команди (зазвичай, <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блок команд</a>), який потрібно виконати у циклі.</p>

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



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

<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
   <em>statement</em></pre>

<dl>
 <dt><code>initialization</code></dt>
 <dd>Вираз (в тому числі вирази присвоєння) або оголошення змінної, оцінюється один раз перед початком циклу. Зазвичай використовується для ініціалізації змінної лічильника. Цей вираз може також оголошувати нові змінні ключовими словами <code>var</code> або <code>let</code>. Змінні, оголошені через <code>var</code> не є локальними для циклу, тобто, вони знаходяться у тій же області видимості, що й сам цикл <code>for</code>. Змінні, оголошені через <code>let</code>, є локальними змінними циклу.</dd>
 <dd>Результат цього виразу відкидається.</dd>
 <dt><code>condition</code></dt>
 <dd>Вираз, який оцінюється перед кожною ітерацією циклу. Якщо вираз оцінюється як true, то <code>statement</code> виконується. Ця перевірка є необов'язковою. Якщо вона пропущена, то умова завжди оцінюється як true. Якщо вираз оцінюється як false, виконання переходить до першого виразу, розташованого після конструкції <code>for</code>.</dd>
 <dt><code>final-expression</code></dt>
 <dd>Вираз, який оцінюється в кінці кожної ітерації циклу. Це відбувається до наступного оцінювання виразу <code>condition</code>. Зазвичай використовується, щоб оновити або збільшити значення змінної лічильника.</dd>
 <dt><code>statement</code></dt>
 <dd>Команда, яка виконується, поки умова оцінюється як true. Для виконання кількох команд, використовуйте {{jsxref("Statements/block", "блок", "", 0)}} (<code>{ ... }</code>), щоб згрупувати ці команди. Щоб не виконувати жодних команд, скористайтесь {{jsxref("Statements/empty", "порожнім", "", 0)}} оператором (<code>;</code>).</dd>
</dl>

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

<h3 id="Використання_циклу_for">Використання циклу <code>for</code></h3>

<p>Наведений цикл <code>for</code> починається з оголошення змінної <code>i</code> та ініціалізації її значенням <code>0</code>. Він перевіряє, що значення <code>i</code> менше дев'яти, виконує дві команди та збільшує <code>i</code> на 1 після кожного проходу через цикл.</p>

<pre class="brush: js">for (let i = 0; i &lt; 9; i++) {
   console.log(i);
   // ще команди
}
</pre>

<h3 id="Необов'язкові_вирази_циклу_for">Необов'язкові вирази циклу <code>for</code></h3>

<p>Всі три вирази у шапці циклу <code>for</code> є необов'язковими.</p>

<p>Наприклад, у блоці <em>initialization</em> не вимагається ініціалізувати змінні:</p>

<pre class="brush: js">var i = 0;
for (; i &lt; 9; i++) {
    console.log(i);
    // ще команди
}
</pre>

<p>Як і блок <em>initialization</em>, блок умови <em>condition</em> також є необов'язковим. Якщо ви пропускаєте цей вираз, то маєте переконатись, що встановили переривання у тілі циклу, щоб не створити нескінченний цикл.</p>

<pre class="brush: js">for (let i = 0;; i++) {
   console.log(i);
   if (i &gt; 3) break;
   // ще команди
}</pre>

<p>Ви також можете пропустити всі три блоки. Знову ж таки, переконайтеся, що ви встановили оператор {{jsxref("Statements/break", "break")}}, щоб закінчити цикл, а також змінили (збільшили) змінну, щоб умова для переривання в якийсь момент набула значення true.</p>

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

for (;;) {
  if (i &gt; 3) break;
  console.log(i);
  i++;
}
</pre>

<h3 id="Використання_циклу_for_без_команд">Використання циклу <code>for</code> без команд</h3>

<p>Наведений цикл <code>for</code> обчислює зміщення вузла у розділі <em>final-expression</em>, і тому не вимагає використання розділу <code>statement</code>, замість нього використовується крапка з комою.</p>

<pre class="brush: js">function showOffsetPos(sId) {

  var nLeft = 0, nTop = 0;

  for (

    var oItNode = document.getElementById(sId); /* ініціалізація */

    oItNode; /* умова */

    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */

  ); /* крапка з комою */

  console.log('Зміщення елемента \'' + sId + '\':\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');

}

/* Приклад виклику: */

showOffsetPos('content');

// Результат:
// "Зміщення елемента "content":
// left: 0px;
// top: 153px;"</pre>

<div class="note"><strong>Заувага:</strong> Це один з небагатьох випадків у JavaScript, коли <strong>крапка з комою є обов'язковою</strong>. Дійсно, без крапки з комою рядок, що записаний після циклу, вважатиметься командою циклу.</div>

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

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

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



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

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

<ul>
 <li>{{jsxref("Statements/empty", "порожній оператор", "", 0)}}</li>
 <li>{{jsxref("Statements/break", "break")}}</li>
 <li>{{jsxref("Statements/continue", "continue")}}</li>
 <li>{{jsxref("Statements/while", "while")}}</li>
 <li>{{jsxref("Statements/do...while", "do...while")}}</li>
 <li>{{jsxref("Statements/for...in", "for...in")}}</li>
 <li>{{jsxref("Statements/for...of", "for...of")}}</li>
</ul>