---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
tags:
  - JavaScript
  - else
  - if
  - Оператор
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>

<p><span class="seoSummary">Умовний оператор <strong><code>if</code></strong> виконує команду, якщо вказана умова є {{Glossary("truthy", "правдивою")}}. Якщо умова є {{Glossary("falsy", "хибною")}}, може бути виконана інша команда.</span></p>

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

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

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

<pre class="syntaxbox">if (<var>condition</var>)
   <var>statement1</var>
[else
   <var>statement2</var>]
</pre>

<dl>
 <dt><code>condition</code></dt>
 <dd><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Вираз</a>, який вважається або {{Glossary("truthy", "правдивим")}}, або {{Glossary("falsy", "хибним")}}.</dd>
</dl>

<dl>
 <dt><code>statement1</code></dt>
 <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("truthy", "правдивою")}}. Може бути будь-яка команда, в тому числі вкладені оператори <code>if</code>. Для виконання кількох команд використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">блок</a> ({ ... }), щоб згрупувати ці команди. Щоб не виконувати жодних команд, використайте <a href="/uk/docs/Web/JavaScript/Reference/Statements/Empty">порожній</a> оператор.</dd>
</dl>

<dl>
 <dt><code>statement2</code></dt>
 <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("falsy", "хибною")}} та присутній блок <code>else</code>. Може бути будь-яка команда, в тому числі блок команд та вкладені оператори <code>if</code>.</dd>
</dl>

<h2 id="Опис">Опис</h2>

<p>Можна додавати вкладені вирази <code>if...else</code> для створення конструкції <code>else if</code>. Зауважте, що у JavaScript не існує ключового слова <code>elseif</code> (одним словом).</p>

<pre class="brush: js">if (<var>condition1</var>)
  <var>statement1</var>
else if (<var>condition2</var>)
  <var>statement2</var>
else if (<var>condition3</var>)
  <var>statement3</var>
...
else
  <var>statementN</var>
</pre>

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

<pre class="brush: js">if (<var>condition1</var>)
  <var>statement1</var>
else
  if (<var>condition2</var>)
    <var>statement2</var>
  else
    if (<var>condition3</var>)
...
</pre>

<p>Щоб виконати декілька команд, використовуйте позначення блоку (<code>{ ... }</code>), щоб згрупувати ці команди. Взагалі, гарною практикою вважається завжди використовувати блочні вирази, особливо у коді, який містить вкладені оператори <code>if</code>:</p>

<pre class="brush: js">if (<var>condition</var>) {
  <var>statements1</var>
} else {
  <var>statements2</var>
}
</pre>

<p>Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> з правдивістю та хибністю об'єкта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Будь-яке значення, яке не є <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, або порожнім текстовим рядком (<code>""</code>), і будь-який об'єкт, в тому числі об'єкт Boolean, чиє значення дорівнює false, вважається {{Glossary("truthy", "правдивим")}} при використанні у якості умови. Для прикладу:</p>

<pre class="brush: js">var b = new Boolean(false);
if (b) // ця умова є правдивою
</pre>

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

<h3 id="Використання_if...else">Використання <code>if...else</code></h3>

<pre class="brush: js">if (cipher_char === from_char) {
  result = result + to_char;
  x++;
} else {
  result = result + clear_char;
}
</pre>

<h3 id="Використання_else_if">Використання <code>else if</code></h3>

<p>Зауважте, що у JavaScript немає оператора <code>elseif</code>. Однак, ви можете його записати з пробілом між <code>else</code> та <code>if</code>:</p>

<pre class="brush: js">if (x &gt; 50) {
  /* зробити що треба */
} else if (x &gt; 5) {
  /* зробити що треба */
} else {
  /* зробити що треба */
}</pre>

<h3 id="Присвоєння_всередині_умовного_виразу">Присвоєння всередині умовного виразу</h3>

<p>Не рекомендовано використовувати прості присвоєння в умовному виразі, тому що присвоєння можна переплутати з порівнянням при швидкому перегляді коду. Наприклад, не використовуйте наступний код:</p>

<pre class="brush: js example-bad">if (x = y) {
  /* зробити що треба */
}
</pre>

<p>Якщо вам потрібно використати присвоєння в умовному виразі, загальноприйнятим є використання додаткових дужок навколо присвоєння. Наприклад:</p>

<pre class="brush: js example-good">if ((x = y)) {
  /* зробити що треба */
}
</pre>

<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('ESDraft', '#sec-if-statement', 'if statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Початкове визначення</td>
  </tr>
 </tbody>
</table>

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



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

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

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li>{{jsxref("Statements/switch", "switch")}}</li>
 <li><a href="/uk/docs/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a></li>
</ul>