path: root/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html

---
title: Логічні оператори
slug: >-
  conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca
tags:
  - JavaScript
  - Оператор
  - логічний
translation_of: Web/JavaScript/Reference/Operators
translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators
original_slug: Web/JavaScript/Reference/Operators/Logical_Operators
---
<div>{{jsSidebar("Operators")}}</div>

<p>Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&amp;&amp;</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>



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

<p>Логічні оператори описані у наведеній нижче таблиці (вирази <code><em>expr</em></code> можуть належати до будь-якого <a href="/uk/docs/Glossary/Data_structure">типу</a>, не лише булевого):</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Оператор</th>
   <th>Синтаксис</th>
   <th>Опис</th>
  </tr>
  <tr>
   <td>Логічне І (<code>&amp;&amp;</code>)</td>
   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
   <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>2</strong></code>; інакше, вертає <code>expr<strong>1</strong></code>.</td>
  </tr>
  <tr>
   <td>Логічне АБО (<code>||</code>)</td>
   <td><code><em>expr1</em> || <em>expr2</em></code></td>
   <td>Якщо вираз <code>expr<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>expr<strong>1</strong></code>; інакше, вертає <code>expr<strong>2</strong></code>.</td>
  </tr>
  <tr>
   <td>Логічне НЕ (<code>!</code>)</td>
   <td><code>!<em>expr</em></code></td>
   <td>Вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</td>
  </tr>
 </tbody>
</table>

<p>Якщо значення може бути приведене до <code>true</code>, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p>

<p>Приклади виразів, які можуть бути приведені до false:</p>

<ul>
 <li><code>null</code>;</li>
 <li><code>NaN</code>;</li>
 <li><code>0</code>;</li>
 <li>порожній рядок (<code>""</code>, або <code>''</code>, або <code>``</code>);</li>
 <li><code>undefined</code>.</li>
</ul>

<p>Хоча оператори <code>&amp;&amp;</code> та <code>||</code> можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>.</p>

<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3>

<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p>

<ul>
 <li><code>(якийсь хибний вираз) &amp;&amp; <em>expr</em></code> обчислюється як хибний вираз;</li>
 <li><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</li>
</ul>

<p>Коротке замикання означає, що наведені вирази <em>expr</em> <strong>не обчислюються</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <em>expr</em> є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p>

<pre class="brush: js">function A(){ console.log('викликано A'); return false; }
function B(){ console.log('викликано B'); return true; }

console.log( A() &amp;&amp; B() );
// виводить "викликано A" в результаті виклику функції,
// потім виводить false (що є результатом виклику оператора)

console.log( B() || A() );
// виводить "викликано B" в результаті виклику функції,
// потім виводить true (що є результатом виклику оператора)
</pre>

<h3 id="Пріоритет_операторів">Пріоритет операторів</h3>

<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&amp;&amp;</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p>

<pre class="brush: js">true || false &amp;&amp; false      // вертає true, оскільки &amp;&amp; виконується першим
(true || false) &amp;&amp; false    // вертає false, оскільки не можна застосувати пріоритет операторів</pre>

<h3 id="Логічне_І"><a id="Logical_AND" name="Logical_AND">Логічне І (<code>&amp;&amp;</code>)</a></h3>

<p>Наступний код наводить приклади оператора <code>&amp;&amp;</code> (логічне І).</p>

<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t вертає true
a2 = true  &amp;&amp; false      // t &amp;&amp; f вертає false
a3 = false &amp;&amp; true       // f &amp;&amp; t вертає false
a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f вертає false
a5 = 'Кіт' &amp;&amp; 'Пес'      // t &amp;&amp; t вертає "Пес"
a6 = false &amp;&amp; 'Кіт'      // f &amp;&amp; t вертає false
a7 = 'Кіт' &amp;&amp; false      // t &amp;&amp; f вертає false
a8 = ''    &amp;&amp; false      // f &amp;&amp; f вертає ""
a9 = false &amp;&amp; ''         // f &amp;&amp; f вертає false
</pre>

<h3 id="Логічне_АБО"><a id="Logical_OR" name="Logical_OR">Логічне АБО (<code>||</code>)</a></h3>

<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</p>

<pre class="brush: js">o1 = true  || true       // t || t вертає true
o2 = false || true       // f || t вертає true
o3 = true  || false      // t || f вертає true
o4 = false || (3 == 4)   // f || f вертає false
o5 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
o6 = false || 'Кіт'      // f || t вертає "Кіт"
o7 = 'Кіт' || false      // t || f вертає "Кіт"
o8 = ''    || false      // f || f вертає false
o9 = false || ''         // f || f вертає ""
o10 = false || varObject // f || object вертає varObject
</pre>

<div class="blockIndicator note">
<p><strong>Заувага:</strong> Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке <em>хибне</em> значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">оператор null-об'єднання</a> (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).</p>
</div>

<h3 id="Логічне_НЕ_!"><a id="Logical_NOT" name="Logical_NOT">Логічне НЕ (<code>!</code>)</a></h3>

<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p>

<pre class="brush: js">n1 = !true               // !t вертає false
n2 = !false              // !f вертає true
n3 = !''                 // !f вертає true
n4 = !'Cat'              // !t вертає false
</pre>

<h4 id="Подвійне_НЕ_!!">Подвійне НЕ (<code>!!</code>)</h4>

<p>Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p>

<p>Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.</p>

<pre class="brush: js">n1 = !!true                   // !!truthy вертає true
n2 = !!{}                     // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим...
n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean з false <em>.valueOf()</em>!
n4 = !!false                  // !!falsy вертає false
n5 = !!""                     // !!falsy вертає false
n6 = !!Boolean(false)         // !!falsy вертає false
</pre>

<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3>

<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4>

<p>Наступна операція з <strong>булевими значеннями</strong>:</p>

<pre class="brush: js">умова1 &amp;&amp; умова2</pre>

<p>завжди дорівнює:</p>

<pre class="brush: js">!(!умова1 || !умова2)</pre>

<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4>

<p>Наступна операція з <strong>булевими значеннями</strong>:</p>

<pre class="brush: js">умова1 || умова2</pre>

<p>завжди дорівнює:</p>

<pre class="brush: js">!(!умова1 &amp;&amp; !умова2)</pre>

<h4 id="Перетворення_НЕ">Перетворення НЕ</h4>

<p>Наступна операція з <strong>булевими значеннями</strong>:</p>

<pre class="brush: js">!!умова</pre>

<p>завжди дорівнює:</p>

<pre class="brush: js">умова</pre>

<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3>

<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись деяких правил.</p>

<h4 id="Прибирання_вкладеного_І">Прибирання вкладеного І</h4>

<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>

<pre class="brush: js">умова1 || (умова2 &amp;&amp; умова3)</pre>

<p>завжди дорівнює:</p>

<pre class="brush: js">умова1 || умова2 &amp;&amp; умова3</pre>

<h4 id="Прибирання_вкладеного_АБО">Прибирання вкладеного АБО</h4>

<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p>

<pre class="brush: js">умова1 &amp;&amp; (умова2 || умова3)</pre>

<p>завжди дорівнює:</p>

<pre class="brush: js">!(!умова1 || !умова2 &amp;&amp; !умова3)</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Початкове визначення.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бінарні логічні оператори</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Бінарні логічні оператори</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бінарні логічні оператори</a></td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("javascript.operators.logical")}}</p>

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

<ul>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li>
 <li>{{jsxref("Boolean")}}</li>
 <li><a href="/uk/docs/Glossary/Truthy">Truthy</a></li>
 <li><a href="/uk/docs/Glossary/Falsy">Falsy</a></li>
</ul>