path: root/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html

---
title: Opérateurs logiques
slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques
tags:
  - JavaScript
  - Operator
  - Reference
translation_of: Web/JavaScript/Reference/Operators
---
<div>{{jsSidebar("Operators")}}</div>

<p>Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs <code>&amp;&amp;</code> et <code>||</code> renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.</p>

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

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Description">Description</h2>

<p>Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Opérateur</th>
   <th>Usage</th>
   <th>Description</th>
  </tr>
  <tr>
   <td>ET logique (<code>&amp;&amp;</code>)</td>
   <td><code><em>expr1</em> &amp;&amp;<em>expr2</em> </code></td>
   <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>false</code>, sinon renvoie <code>expr2</code>.</td>
  </tr>
  <tr>
   <td>OU logique (<code>||</code>)</td>
   <td><code><em>expr1</em> ||<em>expr2</em> </code></td>
   <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>true</code>, sinon renvoie <code>expr2</code>.</td>
  </tr>
  <tr>
   <td>NON logique (<code>!</code>)</td>
   <td><code>!<em>expr</em> </code></td>
   <td>Renvoie <code>false</code> si son opérande unique peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td>
  </tr>
 </tbody>
</table>

<p>Si une valeur peut être convertie en <code>true</code>, on dit en anglais qu'elle est <em>truthy</em>. Pour <code>false</code> on dit qu'elle est <em>falsy</em>.</p>

<p>Parmi les expressions qui peuvent être converties en <code>false</code>, citons celles qui seront évaluées à :</p>

<ul>
 <li><code>null</code>,</li>
 <li><code>NaN</code>,</li>
 <li><code>0</code>,</li>
 <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>),</li>
 <li><code>undefined</code>.</li>
</ul>

<p>Même si les opérateurs <code>&amp;&amp;</code> et <code>||</code> peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.</p>

<h3 id="Évaluation_court-circuit">Évaluation court-circuit</h3>

<p>Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :</p>

<ul>
 <li>l'évaluation de <code>false &amp;&amp;<em> n'importe quoi</em> </code> est court-circuitée en <code>false</code>.</li>
 <li>l'évaluation de <code>true ||<em> n'importe quoi</em> </code> est court-circuitée en <code>true</code>.</li>
</ul>

<p>Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partie<em>n'importe quoi</em> des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.</p>

<p>Ainsi, les deux fonctions suivantes sont équivalentes :</p>

<pre>function courtCircuit() {
  // OU logique
  faireQuelqueChose() || faireAutreChose();

 faireQuelqueChose() &amp;&amp; faireAutreChose();
}

function évaluationÉquivalente() {
  var orFlag = faireQuelqueChose();
  if (!orFlag) {
    faireAutreChose();
  }

  var andFlag = faireQuelqueChose();
  if (andFlag) {
    faireAutreChose();
  }
}
</pre>

<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3>

<p>Les expressions suivantes ne sont pas équivalentes en raison de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs">la précédence des opérateurs</a>. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).</p>

<pre>true || false &amp;&amp; false   // renvoie true car &amp;&amp; est appliqué en premier
(true || false) &amp;&amp; false // renvoie false car || est appliqué en premier grâce aux parenthèses</pre>

<h3 id="ET_logique"><a name="Logical_AND">ET logique (<code>&amp;&amp;</code>)</a></h3>

<p>Le code qui suit illustre comment utiliser l'opérateur <code>&amp;&amp;</code> (ET logique).</p>

<pre>a1 = true  &amp;&amp; true      // t &amp;&amp; t renvoie true
a2 = true  &amp;&amp; false     // t &amp;&amp; f renvoie false
a3 = false &amp;&amp; true      // f &amp;&amp; t renvoie false
a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f renvoie false
a5 = "Yip" &amp;&amp; "Yop"     // t &amp;&amp; t renvoie "Yop"
a6 = false &amp;&amp; "Yop"     // f &amp;&amp; t renvoie false
a7 = "Yop" &amp;&amp; false     // t &amp;&amp; f renvoie false
a8 = ""    &amp;&amp; true      // f &amp;&amp; f renvoie ""
a9 = false &amp;&amp; ""        // f &amp;&amp; f renvoie false
</pre>

<h3 id="OU_logique"><a name="Logical_OR">OU logique (<code>||</code>)</a></h3>

<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>||</code> (OU logique).</p>

<pre>o1 = true  || true       // t || t renvoie true
o2 = false || true       // f || t renvoie true
o3 = true  || false      // t || f renvoie true
o4 = false || (3 == 4)   // f || f renvoie false
o5 = "Yip" || "Yop"      // t || t renvoie "Yip"
o6 = false || "Yip"      // f || t renvoie "Yip"
o7 = "Yip" || false      // t || f renvoie "Yip"
o8 = ""    || false      // f || f renvoie false
o9 = false || ""         // f || f renvoie ""
010 = false|| monObjet   // f || objet renvoie monObjet
</pre>

<h3 id="NON_logique!"><a name="Logical_NOT">NON logique(<code>!</code>)</a></h3>

<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>!</code> (NON logique).</p>

<pre>n1 = !true              // !t renvoie false
n2 = !false             // !f renvoie true
n3 = !""                // !f renvoie true
n3 = !"Yop"             // !t renvoie false
</pre>

<h4 id="Utilisation_de_la_double_négation">Utilisation de la double négation</h4>

<p>Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen <code>true</code> si la valeur est équivalente à vrai et <code>false</code> si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.</p>

<pre class="brush: js">n1 = !!true;                 // une valeur équivalente à true renvoie true
n2 = !!{};                   // un objet, même vide est toujours équivalent à true
n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean !
n4 = !!false;                // une valeur équivalente à false renvoie false
n5 = !!"";                   // idem
n6 = !!Boolean(false);       // ici Boolean n'est pas utilisé comme constructeur
                             // et la valeur produite est bien équivalente à false</pre>

<h3 id="Règles_de_conversions">Règles de conversions</h3>

<h4 id="Convertir_un_ET_logique_avec_des_OU_logiques">Convertir un ET logique avec des OU logiques</h4>

<p>L'opération suivante</p>

<pre>condition1 &amp;&amp; condition2</pre>

<p>sera toujours égale à :</p>

<pre>!(!condition1 || !condition2)</pre>

<h4 id="Convertir_un_OU_logique_avec_des_ET_logiques">Convertir un OU logique avec des ET logiques</h4>

<p>L'opération suivante :</p>

<pre>condition1 || condition2</pre>

<p>sera toujours égale à :</p>

<pre>!(!condition1 &amp;&amp; !condition2)</pre>

<h4 id="Convertir_des_NON_logiques_successifs">Convertir des NON logiques successifs</h4>

<p>Si on a l'opération suivante avec un booléen :</p>

<pre>!!condition
</pre>

<p>elle sera toujours équivalente à</p>

<pre>condition</pre>

<h3 id="Retirer_les_parenthèses_imbriquées">Retirer les parenthèses imbriquées</h3>

<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.</p>

<h4 id="Retirer_les_parenthèses_dun_ET_imbriqué">Retirer les parenthèses d'un ET imbriqué</h4>

<p>Cette opération :</p>

<pre>condition1 || (condition2 &amp;&amp; condition3)</pre>

<p>sera toujours équivalente à :</p>

<pre>condition1 || condition2 &amp;&amp; condition3</pre>

<h4 id="Retirer_les_parenthèses_dun_OU_imbriqué">Retirer les parenthèses d'un OU imbriqué</h4>

<p>Cette opération :</p>

<pre>condition1 &amp;&amp; (condition2 || condition3)</pre>

<p>sera toujours équivalente à :</p>

<pre>!(!condition1 || !condition2 &amp;&amp; !condition3)</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.11">opérateurs logiques binaires</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">opérateurs logiques binaires</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://tc39.github.io/ecma262/#sec-binary-logical-operators">opérateurs logiques binaires</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>

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

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Les opérateurs binaires</a></li>
 <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_littéraux_booléens">Le type primitif booléen</a></li>
 <li>Le constructeur objet {{jsxref("Boolean")}}</li>
</ul>