---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
tags:
  - Выражение
  - Условие
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>

<p><strong>Инструкция if</strong> выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.</p>

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

<pre class="syntaxbox">if (<em>условие</em>)
   <em>инструкция1</em>
[else
   <em>инструкция2</em>]
</pre>

<dl>
 <dt><code>условие</code></dt>
 <dd><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражение</a>, которое является либо истинным, либо ложным.</dd>
</dl>

<dl>
 <dt><code>инструкция1</code></dt>
 <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> истинно (<code>true</code>). Может быть любой инструкцией в том числе и вложенным <code>if</code>. Для группировки нескольких инструкций используется блок (<code>{...}</code>), Когда никакого действия не требуется, может использоваться <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустая</a> инструкция.</dd>
</dl>

<dl>
 <dt><code>инструкция2</code></dt>
 <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> ложно (<code>false</code>). Может быть любой инструкцией, в том числе и вложенным <code>if</code>. Инструкции тоже  можно группировать в блок.</dd>
</dl>

<h2 id="Описание">Описание</h2>

<p>Несколько команд if ... else могут быть вложены для создания условия <code>else if</code>. Обратите внимание, что в JavaScript нет ключевого слова <code>elseif</code> (в одно слово).</p>

<pre class="eval">if (<em>условие1</em>)
   <em>инструкция1</em>
else if (<em>условие2</em>)
   <em>инструкция2</em>
else if (<em>условие3</em>)
   <em>инструкция3</em>
...
else
   <em>инструкцияN</em>

</pre>

<p>Чтобы увидеть, как это работает, ниже представлен пример правильного вложения с отступами:</p>

<pre class="eval">if (<em>условие1</em>)
   <em>инструкция1</em>
else
   if (<em>условие2</em>)
      <em>инструкция2</em>
   else
      if (<em>условие3</em>)
...
</pre>

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

<pre class="eval">if (<em>условие</em>) {
   <em>инструкции1</em>
} else {
   <em>инструкции2</em>
}
</pre>

<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> с правдивостью или ложностью булева объекта. Любое значение, которое не <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> или пустая строка (""), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:</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; 5) {

} else if (x &gt; 50) {

} else {

}</pre>

<h3 id="Присваивание_в_условном_выражении">Присваивание в условном выражении</h3>

<p>Целесообразно не использовать простые присваивания в условном выражении, потому что при взгляде на код присваивание можно путать с равенством. Например, не используйте следующий код:</p>

<pre class="brush: js">if (x = y) {
   /* сделать что-то */
}
</pre>

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

<pre class="brush: js">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>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойство</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Основная поддержка</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойство</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Основная поддержка</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li>{{jsxref("Statements/switch", "switch")}}</li>
</ul>