path: root/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html

---
title: Opérateurs d'affectation
slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation
tags:
  - JavaScript
  - Operator
  - Reference
translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators
---
<div>{{jsSidebar("Operators")}}</div>

<p>Un <strong>opérateur d'affectation</strong> permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.</p>

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

<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>L'opérateur utilisé pour l'affectation est le symbole égal (<code>=</code>), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit <code>x = y</code>, on affecte la valeur de <code>y</code> à <code>x</code>. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Nom</th>
   <th>Opérateur (raccourci)</th>
   <th>Signification</th>
  </tr>
  <tr>
   <td><a href="#Assignment">Affectation</a></td>
   <td><code>x = y</code></td>
   <td><code>x = y</code></td>
  </tr>
  <tr>
   <td><a href="#Addition_assignment">Affectation après addition</a></td>
   <td><code>x += y</code></td>
   <td><code>x = x + y</code></td>
  </tr>
  <tr>
   <td><a href="#Subtraction_assignment">Affectation après soustraction</a></td>
   <td><code>x -= y</code></td>
   <td><code>x = x - y</code></td>
  </tr>
  <tr>
   <td><a href="#Multiplication_assignment">Affectation après multiplication</a></td>
   <td><code>x *= y</code></td>
   <td><code>x = x * y</code></td>
  </tr>
  <tr>
   <td><a href="#Division_assignment">Affectation après division</a></td>
   <td><code>x /= y</code></td>
   <td><code>x = x / y</code></td>
  </tr>
  <tr>
   <td><a href="#Remainder_assignment">Affectation du reste</a></td>
   <td><code>x %= y</code></td>
   <td><code>x = x % y</code></td>
  </tr>
  <tr>
   <td><a href="#Exponentiation">Affectation après exponentiation</a></td>
   <td><code>x **= y</code></td>
   <td><code>x = x ** y</code></td>
  </tr>
  <tr>
   <td><a href="#Left_shift_assignment">Affectation après décalage à gauche</a></td>
   <td><code>x &lt;&lt;= y</code></td>
   <td><code>x = x &lt;&lt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Right_shift_assignment">Affectation après décalage à droite</a></td>
   <td><code>x &gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></td>
   <td><code>x &gt;&gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_AND_assignment">Affectation après ET binaire</a></td>
   <td><code>x &amp;= y</code></td>
   <td><code>x = x &amp; y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_XOR_assignment">Affectation après OU exclusif binaire</a></td>
   <td><code>x ^= y</code></td>
   <td><code>x = x ^ y</code></td>
  </tr>
  <tr>
   <td><a href="#Bitwise_OR_assignment">Affectation après OU binaire</a></td>
   <td><code>x |= y</code></td>
   <td><code>x = x | y</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Affectation"><a name="Assignment">Affectation</a></h2>

<p>L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.</p>

<h4 id="Syntaxe">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x = y
</pre>

<h4 id="Exemples">Exemples</h4>

<pre class="brush: js">// Si on dispose des variables suivantes :
//  x = 5;
//  y = 10;
//  z = 25;

x = y;     // x vaudra désormais 10
x = y = z; // x, y et z valent désormais tous 25
</pre>

<h3 id="Affectation_après_addition"><a name="Addition_assignment">Affectation après addition</a></h3>

<p>Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.</p>

<h4 id="Syntaxe_2">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x += y
<strong>Signification :</strong>  x  = x + y
</pre>

<h4 id="Exemples_2">Exemples</h4>

<pre class="brush: js">// Si on dispose des variables suivantes :
//  toto = "toto";
//  truc = 5;
//  machin = true;


// Nombre + Nombre -&gt; addition
truc += 2; // 7

// Booléen + Booléen -&gt; addition
machin += 1; // 2

// Booléen + Booléen -&gt; addition
machin += false; // 1

// Nombre + String -&gt; concaténation
truc += "toto"; // "5toto"

// String + Booléen -&gt; concaténation
toto += false; // "totofalse"

// String + String -&gt; concaténation
toto += "truc"; // "tototruc"
</pre>

<h3 id="Affectation_après_soustraction"><a name="Subtraction_assignment">Affectation après soustraction</a></h3>

<p>Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.</p>

<h4 id="Syntaxe_3">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x -= y
<strong>Signification :</strong>  x  = x - y
</pre>

<h4 id="Exemples_3">Exemples</h4>

<pre class="brush: js">// Si on a la variable suivante :
//  truc = 5;

truc -= 2;     // 3
truc -= "toto"; // NaN
</pre>

<h3 id="Affectation_après_multiplication"><a name="Multiplication_assignment">Affectation après multiplication</a></h3>

<p>Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.</p>

<h4 id="Syntaxe_4">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x *= y
<strong>Signification :</strong>  x  = x * y
</pre>

<h4 id="Exemples_4">Exemples</h4>

<pre class="brush: js">// Si on a la variable suivante :
//  truc = 5;

truc *= 2;     // 10
truc *= "toto"; // NaN
</pre>

<h3 id="Affectation_après_division"><a name="Division_assignment">Affectation après division</a></h3>

<p>Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.</p>

<h4 id="Syntaxe_5">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x /= y
<strong>Signification :</strong>  x  = x / y
</pre>

<h4 id="Exemples_5">Exemples</h4>

<pre class="brush: js">// Si on a la variable suivante :
//  truc = 5;

truc /= 2;     // 2.5
truc /= "toto"; // NaN
truc /= 0;     // Infinity
</pre>

<h3 id="Affectation_du_reste"><a name="Remainder_assignment">Affectation du reste</a></h3>

<p>Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.</p>

<h4 id="Syntaxe_6">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x %= y
<strong>Signification :</strong>  x  = x % y
</pre>

<h4 id="Exemples_6">Exemples</h4>

<pre class="brush: js">// Si on a la variable suivante :
//  truc = 5;

truc %= 2;      // 1
truc %= "toto"; // NaN
truc %= 0;      // NaN
</pre>

<h3 id="Affectation_après_exponentiation"><a id="Exponentiation" name="Exponentiation">Affectation après exponentiation</a></h3>

<p>L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.</p>

<h4 id="Syntaxe_7">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x **= y
<strong>Signification :</strong>  x  = x ** y
</pre>

<h4 id="Exemples_7">Exemples</h4>

<pre class="brush: js">// Si on a la variable :
//  toto = 5

toto **= 2      // 25
toto **= "truc" // NaN</pre>

<h3 id="Affectation_après_décalage_à_gauche"><a name="Left_shift_assignment">Affectation après décalage à gauche</a></h3>

<p>Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.</p>

<h4 id="Syntaxe_8">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x &lt;&lt;= y
<strong>Signification :</strong>  x   = x &lt;&lt; y
</pre>

<h4 id="Exemples_8">Exemples</h4>

<pre class="brush: js">var toto = 5; //  (00000000000000000000000000000101)
toto &lt;&lt;= 2;   // 20 (00000000000000000000000000010100)
</pre>

<h3 id="Affectation_après_décalage_à_droite"><a name="Right_shift_assignment">Affectation après décalage à droite</a></h3>

<p>Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.</p>

<h4 id="Syntaxe_9">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x &gt;&gt;= y
<strong>Signification :</strong>  x   = x &gt;&gt; y
</pre>

<h4 id="Exemples_9">Exemples</h4>

<pre class="brush: js">var toto = 5; //   (00000000000000000000000000000101)
toto &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)

var toto -5; //    (-00000000000000000000000000000101)
toto &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
</pre>

<h3 id="Affectation_après_décalage_à_droite_non-signé"><a name="Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></h3>

<p>Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.</p>

<h4 id="Syntaxe_10">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x &gt;&gt;&gt;= y
<strong>Signification :</strong>  x    = x &gt;&gt;&gt; y
</pre>

<h4 id="Exemples_10">Exemples</h4>

<pre class="brush: js">var toto = 5; //   (00000000000000000000000000000101)
toto &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)

var toto = -5; // (-00000000000000000000000000000101)
toto &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>

<h3 id="Affectation_après_ET_binaire"><a name="Bitwise_AND_assignment">Affectation après ET binaire</a></h3>

<p>Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&amp;_.28ET_binaire.29", 1)}}.</p>

<h4 id="Syntaxe_11">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x &amp;= y
<strong>Signification :</strong>  x  = x &amp; y
</pre>

<h4 id="Exemple">Exemple</h4>

<pre class="brush: js">var truc = 5;
// 5:     00000000000000000000000000000101
// 2:     00000000000000000000000000000010
truc &amp;= 2; // 0
</pre>

<h3 id="Affectation_après_OU_exclusif_(XOR)_binaire"><a name="Bitwise_XOR_assignment">Affectation après OU exclusif (<em>XOR</em>) binaire</a></h3>

<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.</p>

<h4 id="Syntaxe_12">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x ^= y
<strong>Signification :</strong>  x  = x ^ y
</pre>

<h4 id="Exemple_2">Exemple</h4>

<pre class="brush: js">var toto = 5;
toto ^= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
</pre>

<h3 id="Affectation_après_OU_binaire"><a name="Bitwise_OR_assignment">Affectation après OU binaire</a></h3>

<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.</p>

<h4 id="Syntaxe_13">Syntaxe</h4>

<pre class="syntaxbox"><strong>Opérateur :</strong> x |= y
<strong>Signification :</strong>  x  = x | y
</pre>

<h4 id="Exemple_3">Exemple</h4>

<pre class="brush: js">var toto = 5;
toto |= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
</pre>

<h2 id="Exemples_11">Exemples</h2>

<h3 id="Opérande_gauche_utilisé_avec_un_autre_opérateur_d'affectation">Opérande gauche utilisé avec un autre opérateur d'affectation</h3>

<p>Dans certains cas, l'opérateur d'affectation (par exemple<code> x += y</code>) n'est pas identique à l'expression développée correspondante (respectivement <code>x = x + y</code>). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :</p>

<pre class="brush: js">a[i++] += 5         // i est évalué une fois
a[i++] = a[i++] + 5 // i est évalué deux fois
</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('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

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

<div 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>.</div>

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

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

<ul>
 <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li>
</ul>