unslug fr: move

31 files changed, 5615 insertions, 0 deletions

diff --git a/files/fr/web/javascript/reference/operators/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..39f76c434d
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,83 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Opérateurs/Addition
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>L'opérateur d'addition (<code>+</code>) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de <span class="ver" title="">caractères</span>.</div>
+
+
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stockée dans un référentiel GitHub. Si vous souhaitez contribuer au projet d'exemples interactifs, veuillez cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et envoyez-nous une pull request.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><strong>Opérateur:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Addition_numérique">Addition numérique</h3>
+
+<pre class="brush: js notranslate">// Nombre + Nombre -&gt; addition
+1 + 2 // 3
+
+// Booléen + Nombre -&gt; addition
+true + 1 // 2
+
+// Booléen + Booléen -&gt; addition
+false + false // 0
+</pre>
+
+<h3 id="Concaténation_de_chaînes">Concaténation de chaînes</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur reste</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur unaire plus</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html
new file mode 100644
index 0000000000..5377d00b35
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.html
@@ -0,0 +1,58 @@
+---
+title: Addition avec assignement (+=)
+slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement
+tags:
+  - Fonctionnalité du language
+  - JavaScript
+  - Opérateur
+  - Opérateur d'assignement
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Addition_assignment
+---
+<p>{{jsSidebar("Operators")}}</p>
+
+<p>L'opérateur d'addition avec assignement (<code>+=</code>) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate"><strong>Opérateur :</strong> x += y
+<strong>Signifie :</strong>  x = x + y</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Utilisation_de_lopérateur">Utilisation de l'opérateur</h3>
+
+<pre class="brush: js notranslate">// On considère les variables suivantes :
+var chaine = "Hello";
+var nombre = 5;
+var booleen = true;
+
+// Nombre + Nombre
+nombre += 2;
+// 7
+
+// Booléen + Nombre
+booleen += 1;
+// 2
+
+// Booléen + Booléen
+booleen += false;
+// 1
+
+// Nombre + Chaîne
+nombre += "World";
+// "5World"
+
+// Chaîne + Booléen
+chaine += false;
+// "Hellofalse"
+
+// Chaîne + Chaîne
+chaine += "World"
+// "HelloWorld"</pre>
diff --git a/files/fr/web/javascript/reference/operators/assignment/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html
new file mode 100644
index 0000000000..5011c20000
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/assignment/index.html
@@ -0,0 +1,65 @@
+---
+title: Assignement (=)
+slug: Web/JavaScript/Reference/Opérateurs/Assignement
+tags:
+  - Fonctionnalités du language
+  - JavaScript
+  - Opérateur
+  - Opérateur d'assignement
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur d'assignement simple (<code>=</code>) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><strong>Opérateur :</strong> x = y
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Assignement_simple_et_variables_en_chaînes">Assignement simple et variables en chaînes</h3>
+
+<pre class="brush: js notranslate">// On considère les variables suivantes :
+var x = 5;
+var y = 10;
+var z = 25;
+
+x = y;
+// x est égale à 10
+
+x = y = z;
+// x, y et z sont égales à 25</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Assignment operators in the JS guide</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..0dd3cf0def
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,116 @@
+---
+title: Expression async function
+slug: Web/JavaScript/Reference/Opérateurs/async_function
+tags:
+  - Function
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>async function</code></strong> peut être utilisé pour définir une fonction asynchrone au sein d'une expression.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est aussi possible de définir une fonction asynchrone en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">instruction <code>async function</code></a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est <em>anonyme</em>. Le nom utilisé est uniquement local pour le corps de la fonction.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui composent le corps de la fonction.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> À partir d'ES2015 (ES6), il est aussi possible d'utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour les expressions de fonction asynchrone.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression <code>async function</code> est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async <code>function</code> et une instruction async <code>function</code> est qu'on peut omettre le nom de la fonction dans les expressions <code>async function</code>. On peut donc utiliser une expression <code>async function</code> afin de créer une <em>IIFE</em> (pour <em>Immediately Invoked Function Expression</em>) qu'on appelle au moment de sa définition. Voir également le chapitre sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions</a> pour plus d'informations.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+(async function(x) { // fonction asynchrone immédiatement appelée
+  var a = resolveAfter2Seconds(20);
+  var b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+})(10).then(v =&gt; {
+  console.log(v);  // affiche 60 après 2 secondes.
+});
+
+var add = async function(x) {
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // affiche 60 après 4 secondes.
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2017')}}</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.async_function_expression")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/async_function", "async function")}}</li>
+ <li>L'objet {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Opérateurs/await", "await")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..87423b32a0
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,132 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Opérateurs/await
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>await</code></strong> permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.</p>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'expression <code>await</code> interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.</p>
+
+<p>Si la promesse est rompue, l'expression <code>await</code> lève une exception avec la raison.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si on passe une promesse à une expression <code>await</code>, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>Les objets dotés d'une méthode <code>then()</code> (<em>thenable</em> en anglais) seront également résolus :</p>
+
+<pre class="brush: js">async function f0() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve("résolu :)");
+    }
+  };
+  console.log(await thenable); // résolu :)
+}
+f0();</pre>
+
+<p>Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();</pre>
+
+<p>Si la promesse est rejetée, la raison est fournie avec l'exception.</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch (e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<p>On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :</p>
+
+<pre class="brush: js">var response = await maFonctionPromesse().catch(
+  (err) =&gt; {
+    console.log(err);
+  }
+);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2("ESDraft")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2('ES2017')}}</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.await")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/async_function", "async function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/async_function", "async function")}}</li>
+ <li>L'objet {{jsxref("AsyncFunction")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..b41f9fc832
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,111 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Opérateurs/class
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] {
+  // corps de la classe
+};</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p>
+
+<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_expression_simple">Une expression simple</h3>
+
+<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p>
+
+<pre class="brush: js">var Toto = class {
+  constructor() {}
+  truc() {
+    return "Coucou monde !";
+  }
+};
+
+var instance = new Toto();
+instance.truc(); // "Coucou monde !"
+Toto.name; // "Toto"
+</pre>
+
+<h3 id="Des_expressions_nommées">Des expressions nommées</h3>
+
+<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p>
+
+<pre class="brush: js">// TBD
+var Toto = class TotoNommé {
+  constructor() {}
+  quiEstLa() {
+    return TotoNommé.name;
+  }
+}
+
+var truc = new Toto;
+truc.quiEstLa(); // "TotoNommmé"
+TotoNommé.name;  // ReferenceError
+Toto.name;       // "TotoNommé"
+</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('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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.class")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les déclaration <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..d3ccf9c8f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,107 @@
+---
+title: L'opérateur virgule
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur<strong> virgule</strong> permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>Des expressions JavaScript.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.</p>
+
+<p>L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>SI on a un tableau à 2 dimensions appelé <code>monTableau</code>, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (<code>i</code> et <code>j</code>) à la fois. Attention, la virgule utilisée au sein de l'instruction <code>var</code> <strong>n'est pas</strong> l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--){
+  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
+}</pre>
+
+<p>Dans le code suivant, <code>a</code> est défini avec la valeur de <code>b = 3</code> (qui est 3) et l'expression <code>c = 4</code> est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.</p>
+
+<pre class="brush: js">var a, b, c;
+a = b = 3, c = 4; // Renvoie 4 dans la console
+console.log(a);   // 3</pre>
+
+<p>Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :</p>
+
+<pre class="brush: js">var x, y, z;
+x = (y = 5, z = 6); // Renvoie 6 dans la console
+console.log(x);     // 6</pre>
+
+<h3 id="Effectuer_un_traitement_puis_renvoyer_une_valeur">Effectuer un traitement puis renvoyer une valeur</h3>
+
+<p>Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :</p>
+
+<pre class="brush: js">function maFonction () {
+  var x = 0;
+
+  return (x += 1, x); // ce qui revient à renvoyer ++x
+}</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-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</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.comma")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les boucles {{jsxref("Instructions/for","for")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..c2357f8e93
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,152 @@
+---
+title: L'opérateur conditionnel
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel
+tags:
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>exprSiVrai</code></dt>
+ <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd>
+ <dt><code>exprSiFaux</code></dt>
+ <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p>
+
+<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €")
+</pre>
+
+<p>On peut également affecter des variables dont la valeur dépendra du test :</p>
+
+<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p>
+
+<pre class="brush: js">var premierControle = false,
+    secondControle = false,
+    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
+
+console.log(acces); // "Accès autorisé"</pre>
+
+<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p>
+
+<pre class="brush: js">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p>
+
+<pre class="brush: js">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    console.log("OK, accès autorisé."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    console.log("Accès refusé !")
+);
+</pre>
+
+<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p>
+
+<pre class="brush: js">var age = 16;
+
+var url = age &gt; 18 ? (
+    console.log("Accès autorisé."),
+    // console.log renvoie "undefined", mais cela importe peu car
+    // ce n'est pas le dernier élément de l'expression
+    "continue.html" // la valeur à affecter si âge &gt; 18
+) : (
+    console.log("Accès refusé !"),
+    // etc.
+    "stop.html" // la valeur à affecter si âge &lt;= 18
+);
+
+location.assign(url); // "stop.html"</pre>
+
+<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3>
+
+<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p>
+
+<pre class="brush: js">var func1 = function( .. ) {
+  if (condition1) { return valeur1 }
+  else if (condition2) { return valeur2 }
+  else if (condition3) { return valeur3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? valeur1
+       : condition2 ? valeur2
+       : condition3 ? valeur3
+       :              valeur4
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</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.conditional")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..19a48f8649
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,305 @@
+---
+title: L'opérateur delete
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>delete</code></strong> permet de retirer une propriété d'un objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">delete <em>expression</em></pre>
+
+<p>où <em>expression</em> est évaluée comme une référence à une propriété :</p>
+
+<pre class="syntaxbox">delete <em>objet.propriete</em>
+delete <em>objet</em>['propriete']
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>Le nom d'un objet ou une expression dont l'évaluation fournit un objet.</dd>
+ <dt><code>propriete</code></dt>
+ <dd>La propriété qu'on souhaite supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> pour tous les cas sauf lorsque la propriété est une propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">propre</a> <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete">non-configurable</a> auquel cas <code>false</code> est renvoyé en mode non-strict.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cet opérateur lève une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> si la propriété est une propriété propre qui est non-configurable.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">voir cette page pour plus de détails</a>.</p>
+
+<p>L'opérateur <code><strong>delete</strong></code> permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie <code>true</code>, sinon c'est la valeur <code>false</code> qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :</p>
+
+<ul>
+ <li>Si la propriété qu'on souhaite supprimer n'existe pas, <code>delete</code> n'aura aucun effet et l'opération renverra <code>true</code></li>
+ <li>Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, <code>delete</code> n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).</li>
+ <li>Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction.
+  <ul>
+   <li>Aussi, <code>delete</code> ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).</li>
+   <li>Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec <code>delete</code>.</li>
+  </ul>
+ </li>
+ <li>Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.</li>
+ <li>Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.</li>
+</ul>
+
+<p>Voici un fragment de code qui illustre certains cas :</p>
+
+<pre class="brush: js">var Employe = {
+  age: 28,
+  nom: 'abc',
+  designation: 'developpeur'
+}
+
+console.log(delete Employe.nom);  // renvoie true
+console.log(delete Employe.age);  // renvoie true
+
+// Lorsqu'on souhaite supprimer une propriété
+// inexistante, on obtient true
+console.log(delete Employe.salaire); // renvoie true
+</pre>
+
+<h3 id="Les_propriétés_non-configurables">Les propriétés non-configurables</h3>
+
+<p>Lorsqu'une propriété est marquée comme non-configurable, <code>delete</code> n'aura aucun effet et l'opération renverra <code>false</code>. En mode strict, cela déclenchera une exception <code>TypeError</code>.</p>
+
+<pre class="brush: js">var Employe = {};
+Object.defineProperty(Employe, 'nom', {configurable: false});
+
+console.log(delete Employe.nom);  // renvoie false
+</pre>
+
+<p>{{jsxref("Instructions/var","var")}} (ou <code>let</code> ou <code>const</code>) crée des propriétés non-configurables qui ne peuvent pas être supprimées via <code>delete</code> :</p>
+
+<pre class="brush: js">var autreNom = 'XYZ';
+
+// On peut accéder à la description de cette
+// propriété globale grâce à :
+Object.getOwnPropertyDescriptor(window, 'autreNom')
+
+/* Object {value: "XYZ",
+                  writable: true,
+                  enumerable: true,
+                  <strong>configurable: false</strong>}
+*/
+
+// On voit que "autreNom", ajouté avec var
+// est marquée comme "non-configurable"
+
+delete autreNom;   // renvoie false</pre>
+
+<p>En mode strict, cela aurait déclenché une exception.</p>
+
+<h3 id="Mode_strict_ou_non-strict">Mode strict ou non-strict ?</h3>
+
+<p>Lorsqu'on est en mode strict, si <code>delete</code> est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}<strong>.</strong></p>
+
+<p>Toute variable définie avec <code>var</code> est marquée comme non-configurable. Dans l'exemple qui suit, <code>salaire</code> est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération <code>delete</code> renverra <code>false</code>.</p>
+
+<pre class="brush: js">function Employe() {
+  delete salaire;
+  var salaire;
+}
+
+Employe();
+</pre>
+
+<p>Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception <code>SyntaxError</code>.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employe() {
+  delete salaire;  // SyntaxError
+  var salaire;
+}
+
+// De même, tout accès direct à une fonction
+// avec delete lèvera une SyntaxError
+
+function DemoFunction() {
+  //du code
+}
+
+delete DemoFunction; // SyntaxError
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// on crée la propriété adminName sur la portée globale
+adminName = 'xyz';
+
+// on crée la propriété empCount sur la portée globale
+// On utilise var, elle est donc non-configurable
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName est une propriété de la portée globale
+// qui peut être supprimée car configurable.
+delete adminName;       // renvoie true
+
+// En revanche empCount n'est pas configurable
+// car c'est var qui a été utilisée.
+delete empCount;        // renvoie false
+
+// delete peut être utilisé pour retirer des propriétés
+// d'objets
+delete EmployeeDetails.name; // renvoie true
+
+<strong>// </strong>Même lorsque la propriété n'existe pas,
+// l'opération renvoie "true"
+delete EmployeeDetails.salary; // renvoie true
+
+// delete n'a pas d'impact sur les propriétés
+// statiques natives
+delete Math.PI; // renvoie false
+
+// EmployeeDetails est une propriété de la portée globale
+// définie sans var, elle est donc configurable
+delete EmployeeDetails;   // renvoie true
+
+function f() {
+  var z = 44;
+
+  // delete n'a pas d'impact sur les noms
+  // des variables locales
+  delete z;     // returns false
+}
+</pre>
+
+<h3 id="delete_et_la_chaîne_de_prototypes"><code>delete</code> et la chaîne de prototypes</h3>
+
+<p>Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :</p>
+
+<pre class="brush: js">function Toto(){
+  this.truc = 10;
+}
+
+Toto.prototype.truc = 42;
+
+var toto = new Toto();
+
+// L'instruction suivante renvoie true,
+// après avoir effectivement supprimé
+// la propriété de l'objet toto
+delete toto.truc;
+
+// toto.truc est toujours disponible car
+// elle est disponible sur la chaîne de
+// prototypes
+console.log(toto.truc);
+
+// Ici on supprime la propriété du prototype
+delete Toto.prototype.truc;
+
+// On aura "undefined" dans la console
+// car l'objet n'hérite plus de cette propriété
+// qui a été supprimée
+console.log(toto.truc);</pre>
+
+<h3 id="Supprimer_les_éléments_dun_tableau">Supprimer les éléments d'un tableau</h3>
+
+<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.</p>
+
+<p>Lorsqu'on utilise <code>delete</code> pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire <code>arbres[3]</code> grâce à <code>delete</code>.</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+delete arbres[3];
+if (3 in arbres) {
+    // Le code ici ne sera pas exécuté
+}</pre>
+
+<p>Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur <code>undefined</code> à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant <code>undefined</code>, <code>arbres[3]</code> continue d'être présent :</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Le code ici sera bien exécuté
+}</pre>
+
+<p>Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de <code>arbres[3]</code> est retirée du tableau grâce à <code>splice()</code> mais l'index suivant se décale et arbres[4] devient arbres[3] :</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+if (3 in arbres) {
+ // Le code ici sera exécuté
+}
+arbres.splice(3, 1);
+console.log(arbres); // ["cèdre","pin","chêne","sapin"];
+if (3 in arbres) {
+ // Le code ici sera également exécuté
+}
+</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-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémenté avec JavaScript 1.2.</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.delete")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise <code>delete</code> sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).</p>
+
+<p>Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://perfectionkills.com/understanding-delete/">Une analyse de <code>delete</code> par Kangax, en anglais</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..cdce16f559
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,424 @@
+---
+title: Affecter par décomposition
+slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>affectation par décomposition </strong>(<em>destructuring </em>en anglais) est une expression JavaScript qui permet d'extraire (<em>unpack</em> en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.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="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Proposition de syntaxe (niveau 4)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>{a, b} = {a:1, b:2}</code> n'est pas syntaxiquement valide en tant que tel, en effet <code>{a, b}</code> est ici considéré comme un bloc et non comme un objet littéral.</p>
+
+<p>Cependant, <code>({a, b} = {a:1, b:2})</code> sera valide comme pour la forme <code>let {a, b} = {a:1, b:2}</code>.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Ces expressions utilisant des littéraux pour les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets">objets</a> ou les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">tableaux</a> permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.</p>
+
+<pre class="brush: js">const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
+const [y, z] = x; // On utilise l'affectation par décomposition
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.</p>
+
+<p>Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.</p>
+
+<h2 id="Décomposition_dun_tableau">Décomposition d'un tableau</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">const toto = ["un", "deux", "trois"];
+
+// sans utiliser la décomposition
+const un    = toto[0];
+const deux  = toto[1];
+const trois = toto[2];
+
+// en utilisant la décomposition
+const [un, deux, trois] = toto;</pre>
+
+<h3 id="Affectation_sans_déclaration">Affectation sans déclaration</h3>
+
+<p>L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+[a, b] = [1, 2];
+console.log(a);  // 1
+console.log(b);  // 2</pre>
+
+<h3 id="Valeurs_par_défaut">Valeurs par défaut</h3>
+
+<p>On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+
+[a = 5, b = 7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="Échange_de_variables">Échange de variables</h3>
+
+<p>Une fois le fragment de code exécuté, on aura <var>b</var> égal à 1 et <var>a</var> égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une <a class="external" href="https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR">permutation XOR</a>).</p>
+
+<pre class="brush:js">let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1</pre>
+
+<h3 id="Renvoyer_plusieurs_valeurs">Renvoyer plusieurs valeurs</h3>
+
+<p>Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+</pre>
+
+<p>Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, <code>f()</code> renvoie les valeurs <code>[1, 2]</code>.</p>
+
+<pre class="brush:js">let a, b;
+[a, b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+</pre>
+
+<p>L'instruction <code>[a, b] = f()</code> assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici <var>a</var> vaut 1 et b vaut 2.</p>
+
+<p>On peut également récupérer la valeur de retour comme un tableau :</p>
+
+<pre class="brush:js">const x = f();
+console.log("X vaut " + x);
+</pre>
+
+<p>Et on aura x qui sera égal au tableau contenant 1 et 2.</p>
+
+<h3 id="Ignorer_certaines_valeurs">Ignorer certaines valeurs</h3>
+
+<p>On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+</pre>
+
+<p>Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Exploiter_les_résultats_dune_expression_rationnelle">Exploiter les résultats d'une expression rationnelle</h3>
+
+<p>Lorsque la méthode <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec">exec()</a></code>, liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :</p>
+
+<pre class="brush:js">function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+</pre>
+
+<h3 id="Affecter_le_reste_dun_tableau_à_une_variable">Affecter le reste d'un tableau à une variable</h3>
+
+<p>On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :</p>
+
+<pre class="brush: js">const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :</p>
+
+<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3]
+// SyntaxError : un élément du reste ne peut pas avoir
+//               de virgule à la fin</pre>
+
+<h2 id="Décomposer_un_objet">Décomposer un objet</h2>
+
+<h3 id="Exemple_simple_2">Exemple simple</h3>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+// Assign new variable names
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+</pre>
+
+<h3 id="Affectation_sans_déclaration_2">Affectation sans déclaration</h3>
+
+<p>Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+({a, b} = {a:1, b:2});
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les parenthèses <code>( ... )</code> utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.</p>
+</div>
+
+<h3 id="Affecter_avec_un_nom_différent">Affecter avec un nom différent</h3>
+
+<p>Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :</p>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true</pre>
+
+<p>Ici, par exemple, <code>const {p: toto} = o</code> prend la propriété <code>p</code> de l'objet <code>o</code> pour l'affecter à une variable locale intitulée <code>toto</code>.</p>
+
+<h3 id="Valeurs_par_défaut_2">Valeurs par défaut</h3>
+
+<p>Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut <code>undefined</code>.</p>
+
+<pre class="brush: js">const {a = 10; b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Affecter_de_nouveaux_noms_aux_variables_et_fournir_des_valeurs_par_défaut">Affecter de nouveaux noms aux variables et fournir des valeurs par défaut</h3>
+
+<p>Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut <code>undefined</code>.</p>
+
+<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5</pre>
+
+<h3 id="Arguments_par_défaut_dune_fonction">Arguments par défaut d'une fonction</h3>
+
+<h4 id="Version_ES5">Version ES5</h4>
+
+<pre class="brush: js">function dessinGrapheES5(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, coords, radius);
+  // seulement ensuite on dessine le graphe
+}
+
+dessinGrapheES5({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h4 id="Version_ES2015">Version ES2015</h4>
+
+<pre class="brush: js">function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, coords, radius);
+  // on dessine le graphe
+}
+
+dessinGrapheES2015({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Dans la signature de la fonction <code>dessinGrapheES2015</code> ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (<code>{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}</code>). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », <code>dessinGrapheES2015()</code> pourra être appelée sans paramètre.</p>
+</div>
+
+<h3 id="Décomposition_imbriquée_avec_objets_et_tableaux">Décomposition imbriquée avec objets et tableaux</h3>
+
+<pre class="brush:js">const metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="Décomposition_et_utilisation_de_for_of">Décomposition et utilisation de <a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for of</a></h3>
+
+<pre class="brush: js">const personnes = [
+  {
+    nom: "Alain Dupont",
+    famille: {
+      mere: "Isabelle Dupont",
+      pere: "Jean Dupont",
+      soeur: "Laure Dupont"
+    },
+    age: 35
+  },
+  {
+    nom: "Luc Marchetoile",
+    famille: {
+      mere: "Patricia Marchetoile",
+      pere: "Antonin Marchetoile",
+      frere: "Yann Marchetoile"
+    },
+    age: 25
+  }
+];
+
+for (const {nom: n, famille: { pere: f } } of personnes) {
+  console.log("Nom : " + n + ", Père : " + f);
+}
+
+// "Nom : Alain Dupont, Père : Jean Dupont"
+// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"</pre>
+
+<h3 id="Décomposer_les_propriétés_dobjets_passés_en_arguments">Décomposer les propriétés d'objets passés en arguments</h3>
+
+<pre class="brush:js">const user = {
+  id: 42,
+  displayName: "jbiche",
+  fullName: {
+    firstName: "Jean",
+    lastName: "Biche"
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " est " + name);
+}
+
+console.log("userId: " + userId(user)); w// "userId: 42"
+whois(user); // "jbiche est Jean"</pre>
+
+<p>Cela permet d'accéder directement à <code>id</code>, <code>displayName</code> et <code>firstName</code> depuis l'objet <code>user</code>.</p>
+
+<h3 id="Les_noms_de_propriétés_calculés_et_la_décomposition">Les noms de propriétés calculés et la décomposition</h3>
+
+<p>Il est possible d'utiliser des noms de propriétés calculés, comme avec les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s">littéraux objets</a>, avec la décomposition.</p>
+
+<pre class="brush: js">let clef = "z";
+let { [clef]: toto } = { z: "truc" };
+
+console.log(toto); // "truc"</pre>
+
+<h3 id="Syntaxe_du_«_reste_»_et_décomposition_dun_objet">Syntaxe du « reste » et décomposition d'un objet</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript</a> ajoute <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">la syntaxe du reste</a> pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :</p>
+
+<pre class="brush: js">let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+reste; // { c: 30, d: 40 }</pre>
+
+<h3 id="Gestion_des_identifiants_invalides_comme_noms_de_propriétés">Gestion des identifiants invalides comme noms de propriétés</h3>
+
+<p>Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :</p>
+
+<pre class="brush: js">const toto = {'truc-bidule': true}
+const {'truc-bidule': trucBidule } = toto;
+
+console.log(trucBidule);  // "true"</pre>
+
+<h3 id="Combiner_la_décomposition_de_tableaux_et_dobjets">Combiner la décomposition de tableaux et d'objets</h3>
+
+<p>Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété <code>nom</code> du troisième élément du tableau <code>props</code>:</p>
+
+<pre class="brush: js">const props = [
+  { id: 1, nom: "Toto"},
+  { id: 2, nom: "Truc"},
+  { id: 3, nom: "Bidule"}
+];
+
+const [,, {nom}] = props;
+console.log(nom); // Bidule</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('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></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.destructuring")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">ES6 en détails : La décomposition sur tech.mozfr.org</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/function/index.html b/files/fr/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..bff2848ad7
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,163 @@
+---
+title: L'opérateur function
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>function</code></strong> permet de définir une fonction à l'intérieur d'une expression.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est également possible de définir des fonctions grâce au constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> et aux <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonction</a>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction <em>anonyme</em>.</dd>
+</dl>
+
+<dl>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un paramètre à passer à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions constituant le corps de la fonction.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> À partir d'ES2015/ES6, on peut également former des expressions de fonction avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a> pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction <em>anonyme</em>). Consultez l'article <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée <a href="/fr/docs/Glossaire/IIFE">immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou <em>IIFE</em> pour <em>Immediately Invoked Function Expression</em> en anglais)</a>.</p>
+
+<h3 id="Remontée_(hoisting)_des_expressions_de_fonction">Remontée (<em>hoisting</em>) des expressions de fonction</h3>
+
+<p>En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :</p>
+
+<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+  console.log("truc");
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit définit une fonction anonyme et l'assigne à une variable <code>x</code>. La fonction renvoie le carré de son paramètre :</p>
+
+<pre class="brush: js">var x = function(y) {
+   return y * y;
+};
+</pre>
+
+<h3 id="Expression_nommée">Expression nommée</h3>
+
+<p>Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code>.</p>
+
+<pre class="brush: js">var math = {
+  'factorielle': function factorielle(n) {
+    if (n &lt;= 1) {
+      return 1;
+    }
+    return n * factorielle(n - 1);
+  }
+};</pre>
+
+<p>La variable affectée à l'expression de fonction aura une propriété <code>name</code>. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
+
+<pre class="brush: js">var toto = function() {};
+console.log(toto.name); // "toto"
+
+var toto2 = toto;
+console.log(toto2.name); // "toto"
+
+var truc = function machin() {}
+console.log(truc.name); // "machin"
+</pre>
+
+<h3 id="IIFE_pour_Immediately_Invoked_Function_Expression_ou_expression_de_fonction_immédiatement_appelée">IIFE pour <em>Immediately Invoked Function Expression</em> ou expression de fonction immédiatement appelée</h3>
+
+<p>On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :</p>
+
+<pre class="brush: js">var a = "coucou";
+var b = "monde";
+
+// IIFE
+(function(x, y) {
+  console.log(x + " " + y);
+})(a, b);
+// coucou monde
+</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-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</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.function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions")}}</li>
+ <li>{{jsxref("Objets_globaux/Function","L'objet Function")}}</li>
+ <li>{{jsxref("Instructions/function", "Instruction function")}}</li>
+ <li>{{jsxref("Instructions/function*", "Instruction function*")}}</li>
+ <li>{{jsxref("Opérateurs/function*", "Expression function*")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">Les expressions de fonctions asynchrones (l'opérateur <code>async function</code>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les déclarations de fonctions asynchrones (l'instruction <code>async function</code>)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..8fa8fa1a4e
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,91 @@
+---
+title: Expression function*
+slug: Web/JavaScript/Reference/Opérateurs/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>function*</code></strong> peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function* [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction <em>anonyme</em>. Le nom sera local par rapport au corps de la fonction.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui forment le corps de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression <code>function*</code> est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression <code>function*</code> et une instruction <code>function*</code> est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice<em> anonyme</em>. Voir également le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> pour plus d'informations.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable <code>x</code>. Cette fonction génèrera le carré de son argument :</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</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('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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.function_star")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'objet {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol">Le protocole itérateur</a></li>
+ <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
+ <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li>
+ <li>L'objet {{jsxref("Function")}}</li>
+ <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
+ <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/grouping/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html
new file mode 100644
index 0000000000..07292088cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/grouping/index.html
@@ -0,0 +1,91 @@
+---
+title: Opérateur de groupement
+slug: Web/JavaScript/Reference/Opérateurs/Groupement
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur de groupement <code>( )</code> contrôle la précédence de l'évaluation dans les expressions.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la <a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">précédence normale des opérateurs </a>afin que les expressions dont la précédence est plus basse soient évaluées avant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence normale
+a + b * c     // 7
+// l'évaluation est effectuée de cette façon
+a + (b * c)   // 7
+
+// précédence surchargée avec le groupement
+// on additionne avant de multiplier
+(a + b) * c   // 9
+
+// mathématiquement, cela est équivalent à
+a * c + b * c // 9
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</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.grouping")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">Précédence des opérators</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/in/index.html b/files/fr/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..53c02fb41c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,145 @@
+---
+title: L'opérateur in
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>in</code></strong> renvoie <code>true</code> si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>propriété</em> in <em>nomObjet</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>propriété</code></dt>
+ <dd>Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.</dd>
+</dl>
+
+<dl>
+ <dt><code>nomObjet</code></dt>
+ <dd>Le nom de l'objet qu'on souhaite inspecter.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les exemples suivants illustrent certaines utilisation de l'opérateur <code>in</code>.</p>
+
+<pre class="brush: js">// Tableaux
+var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
+0 in arbres        // renvoie true
+3 in arbres        // renvoie true
+6 in arbres        // renvoie false
+"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
+"length" in arbres // renvoie true (length est une propriété des objets Array)
+Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
+
+// Objets prédéfinis
+"PI" in Math           // renvoie true
+var ma_chaine = new String("corail");
+"length" in ma_chaine  // renvoie true
+
+// Objets personnalisés
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+"marque" in voiture  // renvoie true
+"modèle" in voiture  // renvoie true
+"marque" in voiture // renvoie true
+"Accord" in voiture // renvoie false
+</pre>
+
+<p>L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur <code>String</code>, mais pas une chaîne littérale.</p>
+
+<pre class="brush: js">var couleur1 = new String("vert");
+"length" in couleur1 // renvoie true
+var couleur2 = "corail";
+"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
+</pre>
+
+<h3 id="Utilisation_de_l'opérateur_in_avec_des_propriétés_supprimées_ou_indéfinies">Utilisation de l'opérateur <code>in</code> avec des propriétés supprimées ou indéfinies</h3>
+
+<p>Si une propriété est supprimée avec l'opérateur <code><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete">delete</a></code>, l'opérateur <code>in</code> renvoie <code>false</code> pour cette propriété.</p>
+
+<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+delete voiture.marque;
+"marque" in voiture  // renvoie false
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+delete arbres[3];
+3 in arbres // renvoie false
+</pre>
+
+<p>Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur <code>in</code> renverra <code>true</code> pour cette propriété.</p>
+
+<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+voiture.marque = undefined;
+"marque" in voiture  // renvoie true
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+3 in arbres // renvoie true
+</pre>
+
+<h3 id="Propriétés_héritées">Propriétés héritées</h3>
+
+<p>L'opérateur <code>in</code> renvoie <code>true</code> pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.</p>
+
+<pre class="brush: js">"toString" in {}; // renvoie true</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-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4.</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.in")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...in","for...in")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable des propriétés et rattachement</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/index.html b/files/fr/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..531baa29cc
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/index.html
@@ -0,0 +1,302 @@
+---
+title: Opérateurs
+slug: Web/JavaScript/Reference/Opérateurs
+tags:
+  - JavaScript
+  - Opérateurs
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.</p>
+
+<h2 id="Expressions_et_opérateurs_par_catégorie">Expressions et opérateurs, par catégorie</h2>
+
+<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p>
+
+<h3 id="Expressions_primaires">Expressions primaires</h3>
+
+<p>Les mots-clés basiques et les expressions générales en JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_this", "this")}}</dt>
+ <dd>Le mot-clé <code>this</code> fait référence à une propriété spéciale du contexte d'exécution de la fonction.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_function", "function")}}</dt>
+ <dd>Le mot-clé <code>function</code> définit une expression de fonction.</dd>
+ <dt>{{jsxref("Opérateurs/class", "class")}}</dt>
+ <dd>Le mot-clé <code>class</code> définit une expression de classe.</dd>
+ <dt> {{jsxref("Opérateurs/function*", "function*")}}</dt>
+ <dd>Le mot-clé <code>function*</code> définit une expression pour une fonction génératrice.</dd>
+ <dt>{{jsxref("Opérateurs/yield", "yield")}}</dt>
+ <dd>Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.</dd>
+ <dt>{{jsxref("Opérateurs/yield*", "yield*")}}</dt>
+ <dd>Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}</dt>
+ <dd>L'opérateur <code>async function</code> définit une expression de fonction asynchrone.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}</dt>
+ <dd>Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.</dd>
+ <dt>{{jsxref("Objets_globaux/Array", "[]")}}</dt>
+ <dd>Littéral initialisateur de tableau.</dd>
+ <dt>{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}</dt>
+ <dd>Littéral initialisateur d'objet.</dd>
+ <dt>{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}</dt>
+ <dd>Littéral d'expression rationnelle.</dd>
+ <dt>{{jsxref("Opérateurs/Groupement", "( )")}}</dt>
+ <dd>Opérateur de groupement.</dd>
+</dl>
+
+<h3 id="Expressions_«_vers_la_gauche_»">Expressions « vers la gauche »</h3>
+
+<p>On affectera des valeurs aux variables à gauche de l'expression.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}</dt>
+ <dd>Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (<code>objet.propriété</code> et <code>object["propriété"]</code>).</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_new", "new")}}</dt>
+ <dd>L'opérateur <code>new</code> permet de créer une instance d'un constructeur.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></dt>
+ <dd>Dans les constructeurs, <code>new.target</code> fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.</dd>
+ <dt>{{jsxref("Opérateurs/super", "super")}}</dt>
+ <dd>Le mot-clé <code>super</code> permet d'appeler le constructeur parent.</dd>
+ <dt>{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}</dt>
+ <dd>L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).</dd>
+</dl>
+
+<h3 id="Incrémentation_et_décrémentation">Incrémentation et décrémentation</h3>
+
+<p>Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}</dt>
+ <dd>Opérateur d'incrémentation suffixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt>
+ <dd>Opérateur de décrémentation suffixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}</dt>
+ <dd>Opérateur d'incrémentation préfixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt>
+ <dd>Opérateur de décrémentation préfixe.</dd>
+</dl>
+
+<h3 id="Opérateurs_unaires">Opérateurs unaires</h3>
+
+<p>Une opération unaire est une opération qui ne possède qu'un opérande.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</dt>
+ <dd>L'opérateur <code>delete</code> permet de supprimer une propriété d'un objet.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_void", "void")}}</dt>
+ <dd>L'opérateur <code>void</code> écarte la valeur de retour d'une expression.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</dt>
+ <dd>L'opérateur <code>typeof</code> permet de déterminer le type d'un objet donné.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}</dt>
+ <dd>Le plus unaire permet de convertir son opérande en une valeur du type <code>Number</code>.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}</dt>
+ <dd>La négation unaire permet de convertir son opérande en une valeur du type <code>Number</code> puis d'en prendre l'opposé.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}</dt>
+ <dd>L'opérateur binaire NON (<em>NOT</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}</dt>
+ <dd>L'opérateur du NON logique.</dd>
+</dl>
+
+<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3>
+
+<p>Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}</dt>
+ <dd>L'opérateur d'addition.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}</dt>
+ <dd>L'opérateur de soustraction.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}</dt>
+ <dd>L'opérateur de division.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}</dt>
+ <dd>L'opérateur de multiplication.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}</dt>
+ <dd>L'opérateur du reste.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}</dt>
+ <dd>Opérateur de puissance (exponentiation).</dd>
+</dl>
+
+<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3>
+
+<p>Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</dt>
+ <dd>L'opérateur <code>in</code> permet de déterminer si un objet possède une propriété donnée.</dd>
+ <dt>{{jsxref("Opérateurs/instanceof", "instanceof")}}</dt>
+ <dd>L'opérateur <code>instanceof</code> permet de déterminer si un objet est une instance d'un autre objet.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&lt;", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(&lt;)")}}</dt>
+ <dd>Opérateur inférieur strict.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&gt;", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(&gt;)")}}</dt>
+ <dd>Opérateur supérieur strict.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&lt;=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(&lt;.3D)")}}</dt>
+ <dd>Opérateur inférieur ou égal.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&gt;=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(&gt;.3D)")}}</dt>
+ <dd>Opérateur supérieur ou égal.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <code>=&gt;</code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p>
+</div>
+
+<h3 id="Opérateurs_d'égalité">Opérateurs d'égalité</h3>
+
+<p>Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}</dt>
+ <dd>Opérateur d'égalité faible.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}</dt>
+ <dd>Opérateur d'inégalité faible.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}</dt>
+ <dd>Opérateur d'égalité stricte.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}</dt>
+ <dd>Opérateur d'inégalité stricte.</dd>
+</dl>
+
+<h3 id="Opérateurs_de_décalage_binaires">Opérateurs de décalage binaires</h3>
+
+<p>Ces opérations permettent de décaler les bits contenus dans l'opérande.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&lt;&lt;", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}</dt>
+ <dd>Opérateur binaire de décalage à gauche.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&gt;&gt;", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}</dt>
+ <dd>Opérateur binaire de décalage à droite.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&gt;&gt;&gt;", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}</dt>
+ <dd>Opérateur binaire de décalage à droite non-signé.</dd>
+</dl>
+
+<h3 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h3>
+
+<p>Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&amp;", "#&amp;_.28ET_binaire.29")}}</dt>
+ <dd>ET binaire (<em>AND</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}</dt>
+ <dd>OU binaire (<em>OR</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}</dt>
+ <dd>OU exclusif binaire (<em>XOR</em>).</dd>
+</dl>
+
+<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+
+<p>Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "&amp;&amp;", "#ET_logique_.28&amp;&amp;.29")}}</dt>
+ <dd>ET logique (<em>AND</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}</dt>
+ <dd>OU logique (<em>OR</em>).</dd>
+</dl>
+
+<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}</dt>
+ <dd>
+ <p>Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.</p>
+ </dd>
+</dl>
+
+<h3 id="Opérateurs_d'affectation">Opérateurs d'affectation</h3>
+
+<p>Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}</dt>
+ <dd>Opérateur d'affectation.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>Affectation après multiplication.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}</dt>
+ <dd>Affectation après division.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}</dt>
+ <dd>Affectation du reste.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}</dt>
+ <dd>Affectation après addition.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>Affectation après soustraction.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à gauche.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à droite.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à droite non-signé.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Affectation après ET binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Affectation après OU exclusif binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}</dt>
+ <dd>Affectation après OU binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.</p>
+ </dd>
+</dl>
+
+<h3 id="Opérateur_virgule">Opérateur virgule</h3>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}</dt>
+ <dd>L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.</dd>
+</dl>
+
+<h3 id="Fonctionnalités_non-standardsnon-standard_inline">Fonctionnalités non-standards{{non-standard_inline}}</h3>
+
+<dl>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}</dt>
+ <dd>La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.</dd>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}</dt>
+ <dd>Le mot-clé <code>function</code> peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}</dt>
+ <dd>Compréhensions de tableau.</dd>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}</dt>
+ <dd>Compréhensions de générateurs.</dd>
+</dl>
+
+<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','#sec-11','Expressions')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé <code>super</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Operators/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">La précédence des opérateurs</a> en JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..1db76a5bbd
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,173 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Opérateurs/instanceof
+tags:
+  - JavaScript
+  - Operator
+  - Prototype
+  - Reference
+  - instanceof
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>instanceof</code></strong> permet de tester si un objet possède, dans sa chaîne de prototype, la propriété <code>prototype</code> d'un certain constructeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objet</em> instanceof <em>constructeur</em></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>L'objet qu'on souhaite analyser.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructeur</code></dt>
+ <dd>La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur <code>instanceof</code> teste la présence de <code>constructeur.prototype</code> dans la chaîne de prototypes d'<code>objet</code>.</p>
+
+<pre class="brush: js notranslate">function C(){} // Définition du constructeur
+function D(){} // Définition d'un autre constructeur
+
+var o = new C();
+
+// true, car : Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, car D.prototype n'existe pas dans la chaîne de prototype de o
+o instanceof D;
+
+o instanceof Object; // true, car:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, car C.prototype n'existe plus dans la chaîne de prototype de o
+o instanceof C;
+
+D.prototype = new C(); // Utilisation de l'héritage
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
+</pre>
+
+<p>À noter que la valeur retournée par <code>instanceof</code> peut être différente suite à un changement de la propriété <code>prototype</code> du constructeur, notamment via la méthode <code>Object.setPrototypeOf()</code>. On peut aussi utiliser la pseudo-propriété <code>__proto__</code> qui n'était pas standard avant ECMAScript 2015.</p>
+
+<h3 id="instanceof_dans_dautres_contextes_frames_ou_fenêtres"><code>instanceof</code> dans d'autres contextes (frames ou fenêtres)</h3>
+
+<p>Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, <code>[] instanceof window.frames[0].Array</code> renverra <code>false</code>, car <code>Array !== </code><code>window.frames[0].Array</code> et que les tableaux héritent de leur constructeur.</p>
+
+<p>Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser <code>Array.isArray(myObj)</code> pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.</p>
+
+<p>Ainsi, pour vérifier qu'un <a href="/fr/docs/Web/API/Node">nœud</a> est bien un objet de type <a href="/fr/docs/Web/API/SVGElement">SVGElement</a> dans un autre contexte, on pourra utiliser <code>monNœud instanceof monNœud.documentMaitre.vue.SVGElement</code>.</p>
+
+<div class="note"><strong>Note aux développeurs Mozilla :</strong><br>
+Dans un code utilisant XPCOM, <code>instanceof</code> a un comportement particulier : <code>obj instanceof </code><em><code>xpcomInterface</code></em> (ex : <code>Components.interfaces.nsIFile</code>) appelle <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> et retourne <code>true</code> si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de <em><code>xpcomInterface</code></em> sur <code>obj</code> après un test réussi d'<code>instanceof</code>. Contrairement au JavaScript classique, <code>obj instanceof xpcomInterface </code>fonctionnera comme prévu même si <code>obj</code> appartient à un autre niveau d'organisation (fenêtre, frame, etc.).</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Démonstration_que_String_et_Date_sont_de_type_Object_et_cas_aux_limites_des_littéraux">Démonstration que <code>String</code> et <code>Date</code> sont de type <code>Object</code> et cas aux limites des littéraux</h3>
+
+<p>Le code suivant utilise <code>instanceof</code> pour démontrer que les objets <code>String</code> et <code>Date</code> sont aussi de type <code>Object</code> (ils dérivent d'<code>Object</code>).</p>
+
+<p>Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, <code>instanceof Object</code> renvoie <code>true</code>.</p>
+
+<pre class="brush: js notranslate">var chaîneSimple = "Une chaîne simple";
+var maChaîne  = new String();
+var newChaîne = new String("Chaîne créée avec un constructeur");
+var maDate    = new Date();
+var monObjet  = {};
+var monNonObjet = Object.create(null);
+
+chaîneSimple instanceof String; //false car le prototype vaut undefined
+maChaîne  instanceof String; // true
+newChaîne instanceof String; // true
+maChaîne  instanceof Object; // true
+
+monObjet instanceof Object;  // true, bien que le protoype soit undefined
+({}) instanceof Object;      // true, comme pour le cas précédent
+monNonObjet instance Object; // false
+
+maChaîne instanceof Date;   // false
+
+maDate instanceof Date;     // true
+maDate instanceof Object;   // true
+maDate instanceof String;   // false
+</pre>
+
+<h3 id="Démonstration_que_mavoiture_est_de_type_Voiture_et_de_type_Object">Démonstration que <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code></h3>
+
+<p>Le code suivant créé un objet de type <code>Voiture</code> et une instance de cet objet, <code>mavoiture</code>. L'opérateur <code>instanceof</code> montre que l'objet <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code>.</p>
+
+<pre class="brush: js notranslate">function Voiture(fabricant, modele, annee) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+var mavoiture = new Voiture("Citroën", "C3", 2006);
+var a = mavoiture instanceof Voiture; // retourne true
+var b = mavoiture instanceof Object;  // retourne true
+</pre>
+
+<h3 id="Attention_à_la_précédence_des_opérateurs">Attention à la précédence des opérateurs</h3>
+
+<p>Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test <code>!(monObj instanceof Constructor)</code>. Toutefois, attention à ne pas écrire <code>!monObj instanceof Constructor</code> car <code>!monObj</code> serait traité en priorité et on testerait donc <code>false instanceof Constructor</code> qui sera toujours faux.</p>
+
+<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-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4.</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.instanceof")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}</li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..63be303c4c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,110 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Opérateurs/new.target
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>La syntaxe<strong> <code>new.target</code></strong> est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec <code>new</code>. Dans les constructeurs, il fait référence au constructeur invoqué par <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. Dans les appels de fonction « normaux », <code>new.target</code> vaut {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La syntaxe <code>new.target</code> se compose du mot-clé <code>new</code>, suivi d'un point puis d'un nom de propriété (ici <code>target</code>). Généralement et par ailleurs, <code>new.</code> est utilisé comme contexte pour accéder à une propriété. Ici, <code>new.</code> ne fait pas réellement référence à un objet. Dans les appels de constructeurs, <code>new.target</code> fait référence au constructeur qui a été appelé par <code>new</code>. Cette syntaxe permet donc de récupérer cette valeur.</p>
+
+<p><code>new.target</code> est une méta-propriété, disponible pour toutes les fonctions. Dans <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>, <code>new.target</code> fait référence au <code>new.target</code> de la fonction englobante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_new.target_dans_les_appels_de_fonction">Utilisation de <code>new.target</code> dans les appels de fonction</h3>
+
+<p>Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), <code>new.target</code> vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new">new</a></code> :</p>
+
+<pre class="brush: js">function Toto(){
+  if (!new.target) throw "Toto() doit être appelé avec new"
+  console.log("Toto instancié avec new");
+}
+
+new Toto(); // affiche "Toto instancié avec new" dans la console
+Toto(); // lève l'exception avec "Toto doit être appelé avec new"
+</pre>
+
+<h3 id="Utilisation_de_new.target_dans_les_constructeurs">Utilisation de <code>new.target</code> dans les constructeurs</h3>
+
+<p>Utilisés dans les appels de constructeurs de classe, <code>new.target</code> fait référence au constructeur utilisé directement avec <code>new</code>. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // affiche "A"
+var b = new B(); // affiche "B"
+
+class C {
+  constructor() {
+    console.log(new.target);
+  }
+}
+
+class D extends C {
+  constructor() {
+    super();
+  }
+}
+
+var c = new C(); // function C()
+var d = new D(); // function D()
+</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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.new_target")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code></li>
+ <li><a href="https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage">Cet article sur les classes traduit en français</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/new/index.html b/files/fr/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..b82a898dc9
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,200 @@
+---
+title: L'opérateur new
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p>
+
+<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p>
+
+<ol>
+ <li>Il crée un nouvel objet à partir de zéro</li>
+ <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li>
+ <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li>
+ <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li>
+</ol>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>constructeur</code></dt>
+ <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La création d'un objet personnalisé se fait en deux étapes :</p>
+
+<ol>
+ <li>Définition du type d'objet en écrivant une fonction.</li>
+ <li>Création d'une instance de l'objet avec <code>new</code>.</li>
+</ol>
+
+<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p>
+
+<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p>
+
+<ol>
+ <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li>
+ <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li>
+ <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li>
+</ol>
+
+<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p>
+
+<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p>
+
+<pre class="brush: js">function Voiture() {}
+voiture1 = new Voiture();
+voiture2 = new Voiture();
+
+console.log(voiture1.couleur);            // undefined
+
+Voiture.prototype.couleur = "couleur standard";
+console.log(voiture1.couleur);            // couleur standard
+
+voiture1.couleur = "noir";
+console.log(voiture1.couleur);            // noir
+
+console.log(voiture1.__proto__.couleur);  // couleur standard
+console.log(voiture2.__proto__.couleur);  // couleur standard
+console.log(voiture1.couleur);            // noir
+console.log(voiture2.couleur);            // couleur standard
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3>
+
+<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p>
+
+<pre class="brush: js">function Voiture(marque, modèle, année) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+}
+</pre>
+
+<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p>
+
+<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
+</pre>
+
+<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p>
+
+<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p>
+
+<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3>
+
+<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p>
+
+<pre class="brush: js">function Personne(nom, age, surnom) {
+   this.nom = nom;
+   this.age = age;
+   this.surnom = surnom;
+}
+</pre>
+
+<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p>
+
+<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy");
+ken = new Personne("Ken Jones", 39, "Kenny");
+</pre>
+
+<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p>
+
+<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+   this.propriétaire = propriétaire;
+}
+</pre>
+
+<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p>
+
+<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
+voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p>
+
+<pre class="brush: js">voiture2.propriétaire.nom
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</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.new")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..06de88d2b1
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html
@@ -0,0 +1,151 @@
+---
+title: Opérateur de coalescence des nuls (Nullish coalescing operator)
+slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator
+tags:
+  - Coalescence
+  - JavaScript
+  - Opérateur
+  - Reference
+  - falsy
+  - nullish
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p>L'<strong>opérateur de coalescence des nuls</strong> (<code>??</code>), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut <code>{{jsxref("null")}}</code> ou <code>{{jsxref("undefined")}}</code> et qui renvoie son opérande de gauche sinon.</p>
+
+<p>Contrairement à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">l'opérateur logique OU (<code>||</code>)</a>, l'opérande de gauche sera renvoyé s'il s'agit d'une <a href="/fr/docs/Glossaire/Falsy">valeur équivalente à <code>false</code></a> <strong>qui n'est ni</strong> <code>null</code><strong>, ni</strong> <code>undefined</code>. En d'autres termes, si vous utilisez <code>||</code> pour fournir une valeur par défaut à une variable <code>foo</code>, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs <em>falsy</em> comme utilisables (par exemple une chaine vide <code>''</code> ou <code>0</code>). Voir ci-dessous pour plus d'exemples.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_lopérateur_de_coalescence_des_nuls">Utilisation de l'opérateur de coalescence des nuls</h3>
+
+<p>Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que <code>null</code> ou <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">const valeurNulle = null;
+const texteVide = ""; // falsy
+const unNombre = 42;
+
+const valA = valeurNulle ?? "valeur par défaut pour A";
+const valB = texteVide ?? "valeur par défaut pour B";
+const valC = unNombre ?? 0;
+
+console.log(valA); // "valeur par défaut pour A"
+console.log(valB); // "" (car la chaine vide n'est ni `<code>null`</code> ni `<code>undefined`</code>)
+console.log(valC); // 42</pre>
+
+<h3 id="Affectation_dune_valeur_par_défaut_à_une_variable">Affectation d'une valeur par défaut à une variable</h3>
+
+<p>Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (<code>||</code>) :</p>
+
+<pre class="brush: js notranslate">let toto;
+
+// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
+let unTexteBateau = toto || 'Coucou !';</pre>
+
+<p>Cependant, parce que <code>||</code> est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur <em>falsy</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer <code>0</code>, <code>''</code> ou <code>NaN</code> comme des valeurs valides.</p>
+
+<pre class="brush: js notranslate">let compteur = 0;
+let texte = "";
+
+let qté = compteur || 42;
+let message = texte || "Coucou !";
+console.log(qté);     // 42 et non 0
+console.log(message); // "Coucou !" et non ""
+</pre>
+
+<p>L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut <code>null</code> ou <code>undefined</code> (mais pas d'autres valeurs <em>falsy</em>) :</p>
+
+<pre class="brush: js notranslate">let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
+
+let notFalsyText = monTexte || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = monTexte ?? 'Salut le voisin';
+console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
+</pre>
+
+<h3 id="Court-circuitage">Court-circuitage</h3>
+
+<p>À l'instar des opérateurs logiques OR (<code>||</code>) et AND (<code>&amp;&amp;</code>), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni <code>null</code> ni <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">function A() { console.log('A a été appelée'); return undefined; }
+function B() { console.log('B a été appelée'); return false; }
+function C() { console.log('C a été appelée'); return "toto"; }
+
+console.log( A() ?? C() );
+// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
+// puisque : A() retourne undefined, les deux expressions sont donc évaluées
+
+console.log( B() ?? C() );
+// Inscrit "B a été appelée" puis false
+// puisque : B() retourne false (et non null ou undefined) et
+// l'opérande de droite n'est pas évaluée
+</pre>
+
+<h3 id="Pas_de_chaînage_possible_avec_les_opérateurs_AND_ou_OR">Pas de chaînage possible avec les opérateurs AND ou OR</h3>
+
+<p>Il n'est pas possible de combiner les opérateurs AND (<code>&amp;&amp;</code>) ou OR (<code>||</code>) directement avec l'opérateur de coalescence des nuls (<code>??</code>). Un tel cas lèverait une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code>.</p>
+
+<pre class="brush: js example-bad notranslate">null || undefined ?? "toto"; // soulève une SyntaxError
+true || undefined ?? "toto"; // soulève une SyntaxError</pre>
+
+<p>Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :</p>
+
+<pre class="brush: js example-good notranslate">(null || undefined) ?? "toto"; // Renvoie "toto"
+</pre>
+
+<h3 id="Relation_avec_lopérateur_de_chaînage_optionnel_.">Relation avec l'opérateur de chaînage optionnel (<code>?.</code>)</h3>
+
+<p>Tout comme l'opérateur de coalescence des nuls, l'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">opérateur de chaînage optionnel (?.)</a> traite les valeurs <code>null</code> et <code>undefined</code> comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être <code>null</code> ou <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let toto = { uneProprieteToto: "coucou" };
+
+console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
+console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="Progression_de_limplantation">Progression de l'implantation</h3>
+
+<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a class="external external-icon" href="https://github.com/tc39/test262" rel="noopener">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p>
+
+<p>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Glossaire/Falsy"><em>Falsy values</em> (Valeurs équivalentes à <code>false</code> dans un contexte booléen)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">Opérateur de chaînage optionnel (<em>optional chaining</em>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR">Opérateur logique OU (<code>||</code>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeurs par défaut des arguments</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..6aa4d3121f
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,305 @@
+---
+title: Initialisateur d'objet
+slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>Il est possible d'initialiser un objet en utilisant les notations <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object"><code>new Object()</code></a>,<code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create()</a></code>, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (<code>{}</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.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="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var o = {};
+var o = { a: "toto", b: 42, c: {} };
+
+var a = "toto", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  <var>property: function </var>(<var>paramètres</var>) {},
+  get property() {},
+  set property(<var>valeur</var>) {}
+};
+</pre>
+
+<h3 id="Nouvelles_notations_ECMAScript_2015_(ES6)">Nouvelles notations ECMAScript 2015 (ES6)</h3>
+
+<p>ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.</p>
+
+<pre class="brush: js">// Raccourcis pour les noms de propriétés (ES2015)
+var a = "toto", b = 42, c = {};
+var o = { a, b, c };
+
+// Raccourcis pour les noms de méthodes(ES2015)
+var o = {
+  <var>property</var>(<var>paramètres</var>) {}
+};
+
+// Noms calculés pour les propriétés (ES2015)
+var prop = "toto";
+var o = {
+  [prop]: "hey",
+  ["tr" + "uc"]: "ho",
+};</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">types de données primitifs</a> ou à partir d'autres objets.</p>
+
+<h3 id="Créer_des_objets">Créer des objets</h3>
+
+<p>On peut créer un objet sans aucune propriété grâce à l'expression suivante :</p>
+
+<pre class="brush: js">var objet = {};</pre>
+
+<p>Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés <code>"toto"</code>, <code>"âge"</code> et <code>"machin"</code>. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères <code>"truc"</code>, le nombre <code>42</code> et un autre objet.</p>
+
+<pre class="brush: js">var object = {
+  toto: 'truc',
+  âge: 42,
+  machin: { maProp: 12 },
+}</pre>
+
+<h3 id="Accéder_à_des_propriétés">Accéder à des propriétés</h3>
+
+<p>Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> pour plus d'information.</p>
+
+<pre class="brush: js">object.toto; // "truc"
+object['âge']; // 42
+
+object.toto = 'machin';
+</pre>
+
+<h3 id="Définir_des_propriétés">Définir des propriétés</h3>
+
+<p>On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :</p>
+
+<pre class="brush: js">var a = 'toto',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p>Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :</p>
+
+<pre class="brush: js">var a = 'toto',
+    b = 42,
+    c = {};
+
+// Raccourcis sur les noms de propriétés (ES2015)
+var o = { a, b, c };
+
+// Autrement dit
+console.log((o.a === { a }.a)); // true
+</pre>
+
+<h4 id="Les_duplicatas_et_les_noms_de_propriétés">Les duplicatas et les noms de propriétés</h4>
+
+<p>Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :</p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+</pre>
+
+<p>Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.</p>
+
+<pre class="brush: js">function vérifierSémantiqueES2015(){
+  'use strict';
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
+    return true;
+  } catch (e) {
+    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
+    return false;
+  }
+}</pre>
+
+<h3 id="Définitions_de_méthodes">Définitions de méthodes</h3>
+
+<p>Une propriété d'un objet peut être une <a href="/fr/docs/Web/JavaScript/Reference/Functions">function</a>, un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> ou un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> :</p>
+
+<pre class="brush: js">var o = {
+  <var>property: function </var>(<var>paramètres</var>) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>valeur</var>) {}
+};</pre>
+
+<p>Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "<code>function</code>".</p>
+
+<pre class="brush: js">// Raccourci pour les noms de méthodes (ES2015)
+var o = {
+  <var>property</var>(<em>paramètres</em>) {},
+  *<var>generator</var>() {}
+};</pre>
+
+<p>Ou encore :</p>
+
+<pre class="brush: js">var o = {
+  *generator() {
+    ...
+  }
+};</pre>
+
+<p>En utilisant uniquement ECMAScript 5, on aurait écrit :</p>
+
+<p><em>(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :</em></p>
+
+<pre class="brush: js">var o = {
+  generator: function* (){}
+};
+</pre>
+
+<p>Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les<a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions"> définitions de méthode</a>.</p>
+
+<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
+
+<p>Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets <code>[]</code>, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :</p>
+
+<pre class="brush: js">// Calcul des noms de propriétés (ES2015)
+var i = 0;
+var a = {
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i
+};
+
+console.log(a.toto1); // 1
+console.log(a.toto2); // 2
+console.log(a.toto3); // 3
+
+var param = 'taille';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { taille: 12, mobileTaille: 4 }</pre>
+
+<h3 id="Décomposition_des_propriétés">Décomposition des propriétés</h3>
+
+<p>La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.</p>
+
+<p>Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { toto: 'truc', x: 42 };
+var obj2 = { toto: 'bidule', y: 13 };
+
+var clone = { ...obj1 };
+// Object { toto: 'truc', x: 42 }
+
+var fusion = { ...obj1, ...obj2 };
+// Object { toto: 'bidule', x: 42, y: 13 };
+</pre>
+
+<p>On notera que la méthode {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas de l'opérateur de décomposition.</p>
+
+<h3 id="Changement_de_prototype">Changement de prototype</h3>
+
+<p>Définir une propriété avec la syntaxe <code>__proto__: valeur</code> ou <code>"__proto__": valeur</code> ne permet pas de créer une propriété avec le nom <code>__proto__</code>. Si la valeur fournie est un objet ou est <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/null"><code>null</code></a>, cela modifie le <code>[[Prototype]]</code> de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { '__proto__': protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.</p>
+
+<p>Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.</p>
+
+<pre class="brush: js">var __proto__ = 'variable';
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = { __proto__() { return 'hello'; } };
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = { ['__prot' + 'o__']: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Notation_littérale_et_JSON">Notation littérale et JSON</h2>
+
+<p>La notation utilisant un littéral objet n'est pas identique à celle utilisée par la <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/fr/docs/JSON">JSON</a>). Bien que ces notations se ressemblent, il existe certaines différences :</p>
+
+<ul>
+ <li>JSON ne permet de définir des propriétés qu'en utilisant la syntaxe <code>"propriété": valeur</code>. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.</li>
+ <li>En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, <code>true</code>, <code>false</code>, <code>null</code>, ou tout autre objet (JSON).</li>
+ <li>Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.</li>
+ <li>Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.</li>
+</ul>
+
+<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.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Functions/get">Ajout des <em>getter</em> et </a><em><a href="/fr/docs/Web/JavaScript/Reference/Functions/set">setter</a></em> (accesseur/mutateur).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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.object_initializer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriétés</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Définitions de méthode</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a> de JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html
new file mode 100644
index 0000000000..1aac441b77
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.html
@@ -0,0 +1,359 @@
+---
+title: Précédence des opérateurs
+slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+  - precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>précédence des opérateurs</strong> détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.</p>
+
+<p>Ainsi, l'opérateur de multiplication (« <code>*</code> ») (ayant une précédence plus haute que l'opérateur d'addition (« <code>+</code> »)) est évalué en premier et l'expression <code>6 * 4 + 2</code> renverra 26 (et pas 36).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.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="Associativité">Associativité</h2>
+
+<p>L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :</p>
+
+<pre class="syntaxbox">a OP b OP c
+</pre>
+
+<p>Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme <code>(a OP b) OP c</code>, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme <code>a OP (b OP c)</code>. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :</p>
+
+<pre class="brush:js">a = b = 5;
+</pre>
+
+<p>avec le résultat attendu que <code>a</code> et <code>b</code> obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, <code>b</code> est défini à la valeur 5. Ensuite, <code>a</code> est défini avec la valeur renvoyée par <code>b = 5</code> qui est 5.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
+// renvoie true
+
+3 &gt; 2 &gt; 1
+// renvoie false car 3 &gt; 2 vaut true et que true &gt; 1 vaut false
+// En ajoutant des parenthèses, on y voit plus clair (3 &gt; 2) &gt; 1
+</pre>
+
+<h2 id="Tableau">Tableau</h2>
+
+<p>Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Précédence</th>
+   <th>Type d'opérateur</th>
+   <th>Associativité</th>
+   <th>Opérateurs individuels</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement">Groupement</a></td>
+   <td>Non applicable</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">1</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point">Accès à un membre</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">Accès à un membre calculé</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (avec une liste d'arguments)</td>
+   <td>Non applicable</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Chaînage optionnel</a></td>
+   <td>Gauche à droite</td>
+   <td><code>?.</code></td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (sans liste d'arguments)</td>
+   <td>Droite à gauche</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">3</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation suffixe</a></td>
+   <td>Non applicable</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation suffixe</a></td>
+   <td>Non applicable</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">4</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29">NON logique</a></td>
+   <td>Droite à gauche</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">NON binaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)">Plus unaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)">Négation unaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation préfixe</a></td>
+   <td>Droite à gauche</td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation préfixe</a></td>
+   <td>Droite à gauche</td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">void</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await">await</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">5</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Exponentiation</a></td>
+   <td>Droite à gauche</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)">Multiplication</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)">Division</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)">Reste</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">6</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">Addition</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)">Soustraction</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">7</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite non-signé</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">8</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(&lt;)">Inférieur strict</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(&lt;.3D)">Inférieur ou égal</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)">Supérieur strict</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)">Supérieur ou égal</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td>
+   <td>Gauche à droite</td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof">instanceof</a></code></td>
+   <td>Gauche à droite</td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">9</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité faible</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité faible</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&amp;_.28ET_binaire.29">ET binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>11</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29">OU exclusif (<em>XOR</em>) binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>12</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" title="JavaScript/Reference/Operators/Bitwise_Operators">OU binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>13</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&amp;&amp;.29">ET logique</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>14</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)">OU logique</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>15</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Opérateur conditionnel ternaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">16</td>
+   <td rowspan="13"><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation">Affectation</a></td>
+   <td rowspan="13">Droite à gauche</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">17</td>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*">yield*</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>18</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">Décomposition</a></td>
+   <td>Non applicable</td>
+   <td><code>...</code> …</td>
+  </tr>
+  <tr>
+   <td>19</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule">Virgule</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..9885b6d8ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,196 @@
+---
+title: Chaînage optionnel (optional chaining)
+slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining
+tags:
+  - Chaînage
+  - Chaînage optionnel
+  - Coalescence
+  - JavaScript
+  - Operator
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur de <strong>chaînage optionnel</strong> <strong><code>?.</code></strong> permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. <span class="seoSummary">L'opérateur <code>?.</code> fonctionne de manière similaire à l'opérateur de chaînage <code>.</code>, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec <code>undefined</code> pour valeur de retour.</span> Quand il est utilisé avec des appels de fonctions, il retourne <code>undefined</code> si la fonction donnée n'existe pas.</p>
+
+<p>Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.</p>
+
+<p>Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type <code>if (typeof a == "undefined")</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr?.[index]</em>
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit <code>undefined</code> ou <code>null</code>.</p>
+
+<p>Par exemple, considérant un objet <code>obj</code> qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj.premier &amp;&amp; obj.premier.second;</pre>
+
+<p>La valeur de <code>obj.premier</code> est confirmée comme n'étant pas <code>null</code> (ni <code>undefined</code>) avant que d'accéder à la valeur de <code>obj.premier.second</code>. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement <code>obj.premier.second</code> directement sans vérifier <code>obj.premier</code>.</p>
+
+<p>Avec l'opérateur de chaînage optionnel (<code>?.</code>), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de <code>obj.premier</code> avant que d'accéder à <code>obj.premier.second</code> :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj.<code>premier</code>?.second;</pre>
+
+<p>En utilisant l'opérateur <code>?.</code> au lieu de l'opérateur <code>.</code>, JavaScript sait implicitement qu'il doit vérifier <code>obj.premier</code> pour être certain qu'il ne soit <code>null</code> ou <code>undefined</code> avant que de tenter d'accéder à <code>obj.first.second</code>. Si <code>obj.premier</code> est <code>null</code> ou <code>undefined</code>, l'expression se court-circuite automatiquement et retourne <code>undefined</code>.</p>
+
+<p>C'est équivalent à : </p>
+
+<pre class="brush: js notranslate">let temp = obj.<code>premier</code>;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+</pre>
+
+<h3 id="Chaînage_optionnel_avec_des_appels_de_fonctions">Chaînage optionnel avec des appels de fonctions</h3>
+
+<p>Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.</p>
+
+<p>Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur <code>undefined</code> pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :</p>
+
+<pre class="brush: js notranslate">let result = uneInterface.uneMéthode?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser <code>?.</code> jètera aussi une exception {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="Réaliser_des_fonctions_de_rappel_optionnelles_ou_des_écouteurs_dévènements">Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements</h4>
+
+<p>Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">une affectation par décomposition</a>, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant <code>?.</code>, vous pourriez vous passer de cette vérification supplémentaire :</p>
+
+<pre class="brush: js notranslate">// ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    if (onError) { // vérifier que onError existe réellement
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js notranslate">// Utiliser le chaînage optionnel avec les appels de fonctions
+function doSomething(onContent, onError) {
+  try {
+   // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    onError?.(err.message); // pas d'exception si onError n'est pas défini
+  }
+}
+</pre>
+
+<h3 id="Chaînage_optionnel_avec_les_expressions">Chaînage optionnel avec les expressions</h3>
+
+<p>Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notation avec crochets des accesseurs de propriétés</a> :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj?.['propName'];
+</pre>
+
+<h3 id="Chaînage_optionnel_invalide_depuis_le_côté_gauche_dune_affectation">Chaînage optionnel invalide depuis le côté gauche d'une affectation</h3>
+
+<pre class="notranslate"><code>let objet = {};
+objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre>
+
+<h3 id="Accès_aux_éléments_de_tableau_avec_le_chaînage_optionnel">Accès aux éléments de tableau avec le chaînage optionnel</h3>
+
+<pre class="notranslate">let élément = arr?.[42];</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_basique">Exemple basique</h3>
+
+<p>Cet exemple cherche la valeur de la propriété <code>name</code> dans un objet stocké comme propriété de nom <code>bar</code> d'un objet Map alors que cet objet <code>bar</code> n'existe pas. Le résultat est donc <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let monMap = new Map();
+monMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = monMap.get("bar")?.name;</pre>
+
+<h3 id="Court-circuiter_une_évaluation">Court-circuiter une évaluation</h3>
+
+<p>Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est <code>null</code> ou <code>undefined</code>, l'expression ne sera par évaluée. Par exemple :</p>
+
+<pre class="brush: js notranslate">let objetPotentiellementNul = null;
+let x = 0;
+let prop = objetPotentiellementNul?.[x++];
+
+console.log(x); // 0 car x n'a pas été incrémenté
+</pre>
+
+<h3 id="Empiler_les_opérateurs_de_chaînage_optionnel">Empiler les opérateurs de chaînage optionnel</h3>
+
+<p>Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :</p>
+
+<pre class="brush: js notranslate">let client = {
+  nom: "Carl",
+  details: {
+    age: 82,
+    localisation: "Paradise Falls"
+    // adresse détaillée inconnue
+  }
+};
+let villeDuClient = client.details?.adresse?.ville;
+
+// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
+let durée = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Combinaison_avec_lopérateur_de_coalescence_des_nuls_Nullish_coalescing_operator">Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)</h3>
+
+<p>L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :</p>
+
+<pre class="notranslate">let client = {
+  nom: "Carl",
+  details: { age: 82 }
+};
+const villeDuClient = client?.ville ?? "Ville Inconnue";
+console.log(villeDuClient); // Ville inconnue</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><span>Compatibilité des navigateurs</span></h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+
+<h3 id="Progression_de_limplantation">Progression de l'implantation</h3>
+
+<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a href="https://github.com/tc39/test262">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p>
+
+<p>{{EmbedTest262ReportResultsTable("optional-chaining")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/pipeline_operator/index.html b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html
new file mode 100644
index 0000000000..2763987971
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html
@@ -0,0 +1,72 @@
+---
+title: Tube
+slug: Web/JavaScript/Reference/Opérateurs/Tube
+tags:
+  - Experimental
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>L'opérateur expérimental tube (ou <em>pipeline</em> en anglais) <strong><code>|&gt;</code></strong> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :</p>
+
+<pre class="brush: js">let url = "%21%" |&gt; decodeURI;</pre>
+
+<p>qui correspond exactement à :</p>
+
+<pre class="brush: js">let url = decodeURI("%21%");</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">expression |&gt; function</pre>
+
+<p>La valeur de <code>expression</code> est passé à <code>function</code> comme unique paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Enchaîner_des_appels_de_fonction">Enchaîner des appels de fonction</h3>
+
+<p>L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.</p>
+
+<pre class="brush: js">const doubler = (n) =&gt; n * 2;
+const incrementer = (n) =&gt; n + 1;
+
+// Sans l'opérateur tube
+doubler(incrementer(doubler(10))); // 42
+
+// Avec l'opérateur tube
+10 |&gt; doubler |&gt; incrementer |&gt; doubler; // 42
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Brouillon de spécification pour la proposition de l'opérateur tube</a></td>
+   <td>Niveau 1</td>
+   <td>Ne fait actuellement pas partie de la spécification ECMAScript.</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.pipeline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposals">Les propositions au TC39</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..e78aae110d
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,154 @@
+---
+title: Accesseurs de propriétés
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Les <strong>accesseurs de propriété</strong> permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">objet.propriété
+objet["propriété"]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets peuvent être vus comme des tableaux associatifs (<em>map</em>, dictionnaires, table de hachage, annuaire, etc.). Les <em>clés</em> (<em>keys</em>) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).</p>
+
+<p>Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.</p>
+
+<h3 id="Notation_avec_point">Notation avec point</h3>
+
+<pre class="brush: js">obtenir = objet.propriété;
+objet.propriété = définir;
+</pre>
+
+<p><code>propriété</code> doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« <code>_</code> ») et signes dollar (« <code>$</code> »), qui ne peut commencer par un nombre. Par exemple, <code>objet.$1</code> est valide, mais <code>objet.1</code> ne l'est pas.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>Ici, la méthode <code>createElement</code> est obtenue depuis l'objet <code>document</code> et est appelée.</p>
+
+<p>Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :</p>
+
+<pre class="brush: js">77 .toExponential();
+// ou
+77
+.toExponential();
+// ou, mieux pour la lisibilité
+(77).toExponential();
+// ou encore
+77.0.toExponential();
+// 77. correspond à 77.0 et là il n'y a aucun doute
+</pre>
+
+<h3 id="Notation_avec_crochets">Notation avec crochets</h3>
+
+<pre class="brush: js">obtenir = objet[nom_de_propriété];
+objet[nom_de_propriété] = définir;
+</pre>
+
+<p><code>nom_de_propriété</code> est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple <code>"1foo"</code>, <code>"!bar!"</code> ou même <code>" "</code> (une espace).</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>Cette ligne fait exactement la même chose que l'exemple précédent.</p>
+
+<h3 id="Noms_de_propriétés">Noms de propriétés</h3>
+
+<p>Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString"><code>toString</code></a>.</p>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: js">var objet = {};
+objet['1'] = 'valeur';
+console.log(objet[1]);
+</pre>
+
+<p>Ceci affichera « valeur », étant donné que le nombre <code>1</code> sera converti en une chaîne <code>"1"</code>.</p>
+
+<pre class="brush: js">var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
+objet[toto] = 'valeur';
+console.log(objet[truc]);
+</pre>
+
+<p>Ce code affichera également « valeur », étant donné que <code>toto</code> et <code>truc</code> seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript <a href="fr/SpiderMonkey">SpiderMonkey</a>, cette chaîne serait <code>"['object Object']"</code>.</p>
+
+<h3 id="Liaison_de_méthodes">Liaison de méthodes</h3>
+
+<p>Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, <code>this</code> n'est pas défini dans une méthode, c'est-à-dire que <code>this</code> ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, <code>this</code> est « passé » par l'appel de la fonction.</p>
+
+<p>Pour plus d'informations, consultez la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes">l'opérateur <code>this</code> et les liaisons de méthodes</a>.</p>
+
+<h3 id="Note_concernant_eval">Note concernant <code>eval</code></h3>
+
+<p>Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.</p>
+
+<pre class="brush: js">x = eval('document.formulaire.' + controle + '.value');
+</pre>
+
+<p><code>eval</code> est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :</p>
+
+<pre class="brush: js">x = document.formulaire[controle].value;
+</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-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</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.property_accessors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">L'affectation par décomposition</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..75f97a972f
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,262 @@
+---
+title: Syntaxe de décomposition
+slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - Syntaxe
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>syntaxe de décomposition</strong> permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à 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="Syntaxe">Syntaxe</h2>
+
+<p>Pour l'utilisation de la décomposition dans les appels de fonction :</p>
+
+<pre class="syntaxbox notranslate">f(...objetIterable);
+</pre>
+
+<p>Pour les littéraux de tableaux :</p>
+
+<pre class="syntaxbox notranslate">[...objetIterable, 4, 5, 6]</pre>
+
+<p>Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :</p>
+
+<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_décomposition_dans_les_appels_de_fonction">Utiliser la décomposition dans les appels de fonction</h3>
+
+<h4 id="Améliorer_la_fonction_apply">Améliorer la fonction <code>apply()</code></h4>
+
+<p>Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :</p>
+
+<pre class="brush: js notranslate">function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);</pre>
+
+<p>avec la décomposition, on peut désormais écrire :</p>
+
+<pre class="brush: js notranslate">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<p>Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.</p>
+
+<pre class="brush: js notranslate">function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Utiliser_apply_avec_lopérateur_new">Utiliser <code>apply()</code> avec l'opérateur <code>new</code></h4>
+
+<p>Avec ES5, il n'est pas possible d'utiliser <code>new</code> avec <code>apply</code> (selon ES5 <code>apply</code> effectue un appel <code>[[Call]]</code> et pas un appel <code>[[Construct]]</code>). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :</p>
+
+<pre class="brush: js notranslate">var champsDate = lireChampsDate(maBaseDeDonnées);
+var d = new Date(...champsDate);</pre>
+
+<p>Afin d'utiliser <code>new</code> avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function monConstructeur () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var mesArguments = ["bi", "bop", "bup", null];
+var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
+
+console.log(new monConstructeurAvecArguments);
+// (log fourni par monConstructeur):           arguments.length: 4
+// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
+// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
+</pre>
+
+<h3 id="Utiliser_la_décomposition_dans_les_littéraux_de_tableau">Utiliser la décomposition dans les littéraux de tableau</h3>
+
+<h4 id="Améliorer_les_littéraux_de_tableau">Améliorer les littéraux de tableau</h4>
+
+<p>À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :</p>
+
+<pre class="brush: js notranslate">var articulations = ['épaules', 'genoux'];
+var corps = ['têtes', ...articulations, 'bras', 'pieds'];
+// ["têtes", "épaules", "genoux", "bras", "pieds"]
+</pre>
+
+<p>Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.</p>
+
+<h4 id="Copier_un_tableau">Copier un tableau</h4>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+var arr2 = [...arr];
+arr2.push(4);
+
+console.log(arr2); // [1, 2, 3, 4]
+console.log(arr);  // [1, 2, 3] (inchangé)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).</p>
+</div>
+
+<pre class="brush: js notranslate">var a = [[1], [2], [3]];
+var b = [...a]; // b vaut [[1], [2], [3]]
+
+b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
+</pre>
+
+<h4 id="Une_meilleure_façon_de_concaténer_des_tableaux">Une meilleure façon de concaténer des tableaux</h4>
+
+<p>{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute les éléments de arr2 après ceux de arr1
+var nouveauTableau = arr1.concat(arr2);</pre>
+
+<p>Avec ES2015 et la décomposition, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute tous les éléments
+// de arr2 au début de arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]</pre>
+
+<p>Avec ES2015 et la décomposition, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [4, 5, 6];
+var arr2 = [1, 2, 3];
+arr1 = [...arr2, ...arr1];
+// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Il y a une différence avec <code>unshift()</code> : ici, on crée un nouveau tableau qui est affecté à <code>arr1</code>, le tableau original de <code>arr1</code> n'est pas modifié "sur place".</p>
+</div>
+
+<h3 id="Utiliser_la_décomposition_avec_les_littéraux_objet">Utiliser la décomposition avec les littéraux objet</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)</a> vise à ajouter la décomposition des propriétés pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">les littéraux objets</a>. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.</p>
+
+<p>Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+var clone = { ...profil };
+// Object { prenom: 'Sarah', profilComplet: false }
+
+var fusion = { ...profil, ...profilMisAJour };
+// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };</pre>
+
+<p>On notera que {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas pour la syntaxe de décomposition.</p>
+
+<p>Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :</p>
+
+<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+const fusionner = ( ...objets) =&gt; {...objets};
+var nouveauProfil = fusionner(profil, profilMisAJour);
+// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
+
+var autreNouveauProfil = fusion({}, obj1, obj2);
+// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
+</pre>
+
+<p>Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.</p>
+
+<h3 id="La_décomposition_ne_sapplique_quaux_itérables">La décomposition ne s'applique qu'aux itérables</h3>
+
+<p>Pour rappel : la syntaxe de décomposition ne s'applique qu'<a href="/fr/docs/Web/JavaScript/Guide/iterable">aux objets itérables</a> :</p>
+
+<pre class="brush: js notranslate">var obj = {"clé1" : "valeur1"};
+function maFonction(x) {
+  console.log(x); // undefined
+}
+maFonction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0</pre>
+
+<h3 id="Utiliser_la_décomposition_avec_de_nombreuses_valeurs">Utiliser la décomposition avec de nombreuses valeurs</h3>
+
+<p>Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.</p>
+
+<h2 id="Les_paramètres_du_reste">Les paramètres du reste</h2>
+
+<p>La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définie dans plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">initialisateur de tableau</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">listes d'argument</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Définie dans la section sur les <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">initialisateurs d'objet.</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</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.spread")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">Le billet de ES6 en détails sur la décomposition</a></li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..05a40df1fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Opérateurs/super
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <code><strong>super</strong></code> est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.</p>
+
+<p>Les expressions de la forme <code>super.propriété</code> et <code>super[expr]</code> sont valides pour n'importe quelle <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">définition de méthode</a>, que ce soit au sein d'une <a href="/fr/docs/Web/JavaScript/Reference/Classes">classe</a> ou d'un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">littéral objet</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">super([arguments]); // Le constructeur parent est appelé
+super.functionOnParent([arguments]);</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'il est utilisé dans un constructeur, le mot-clé <code>super</code> est utilisé seul et doit apparaître avant le mot-clé <code>this</code>. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_super_avec_les_classes">Utiliser <code>super</code> avec les classes</h3>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> :</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(hauteur, largeur) {
+    this.name = 'Rectangle';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+  coucou(){
+    console.log('Coucou, je suis un ' + this.name + '.');
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set aire(valeur) {
+    this.hauteur = Math.sqrt(valeur);
+    this.largeur = Math.sqrt(valeur);
+  }
+}
+
+class Carré extends Rectangle {
+  constructor(longueur) {
+
+    // Ici, on appelle le constructeur de Rectangle
+    // qui est l'objet « parent » de Carré
+    super(longueur, longueur);
+
+    // Pour les classes dérivées, super() doit être appelé
+    // avant d'utiliser 'this' sinon cela entraînera une
+    // exception ReferenceError.
+    this.name = 'Carré';
+  }
+}</pre>
+
+<h3 id="Utiliser_super_pour_appeler_des_méthodes_statiques">Utiliser super pour appeler des méthodes statiques</h3>
+
+<p>Il est possible d'utiliser super pour invoquer des méthodes <a href="/fr/docs/Web/JavaScript/Reference/Classes/static">statiques</a> :</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbCotes() {
+    return "J'ai 4 côtés";
+  }
+}
+
+class Carre extends Rectangle {
+  constructor(){}
+  static logDescription() {
+    return super.logNbCotes() + ' qui sont tous égaux';
+  }
+}
+Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
+</pre>
+
+<h3 id="Supprimer_des_propriétés_parentes_lèvera_une_exception">Supprimer des propriétés parentes lèvera une exception</h3>
+
+<p>Il n'est pas possible d'utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete">delete</a></code> sur <code>super.prop</code> ou <code>super[expr]</code> pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  toto() {}
+}
+
+class Dérivée extends Base {
+  constructor() {}
+  delete() {
+    delete super.toto;
+  }
+}
+
+new Dérivée().delete();
+// ReferenceError : suppression invalide avec 'super'</pre>
+
+<h3 id="Super.prop_ne_peut_pas_surcharger_les_propriétés_non_modifiables"><code>Super.prop</code> ne peut pas surcharger les propriétés non modifiables</h3>
+
+<p>Lorsque des propriétés sont définies sans accès en écriture (<em>non-writable</em>), par exemple avec {{jsxref("Object.defineProperty")}}, <code>super</code> ne peut pas surcharger les valeurs de ces propriétés.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+class Y extends X {
+  constructor() {
+    super();
+  }
+  toto(){
+    super.prop = 2; // Impossible de surcharger
+  }
+}
+var y = new Y();
+y.toto(); // TypeError "prop" is read-only
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="Utiliser_super.prop_sur_les_littéraux_objets">Utiliser <code>super.prop</code> sur les littéraux objets</h3>
+
+<p><code>super</code> peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise <code>super</code> pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("Object.setPrototypeOf()")}} avec lequel on définit que le prototype de <code>obj2</code> est <code>obj1</code>. De cette façon, super peut parcourir la chaîne de prototypes et trouver <code>méthode1</code> dans <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  méthode1() {
+    console.log("méthode 1");
+  }
+}
+
+var obj2 = {
+  méthode2() {
+    super.méthode1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.méthode2(); // affiche "méthode 1" dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></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.super")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/this/index.html b/files/fr/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..a5b23ca81d
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,420 @@
+---
+title: L'opérateur this
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>En JavaScript, <strong>le mot-clé <code>this</code></strong> se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> ou le mode non-strict.</p>
+
+<p>Dans la plupart des cas, la valeur de <code>this</code> sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour <a href="#bind">définir la valeur de <code>this</code> pour une fonction, indépendamment de la façon dont elle est appelée</a>. ECMAScript 2015 (ES6) a ajouté <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> dans lesquelles <code>this</code> correspond à la valeur du contexte englobant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.</p>
+
+<h2 id="Dans_le_contexte_global">Dans le contexte global</h2>
+
+<p>Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), <code>this</code> fait référence à l'objet global (qu'on utilise ou non le mode strict).</p>
+
+<pre class="brush:js">// Si l'environnement de script est un navigateur,
+// l'objet window sera l'objet global
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b); // "MDN"
+console.log(b);        // "MDN"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.</p>
+</div>
+
+<h2 id="Dans_le_contexte_dune_fonction">Dans le contexte d'une fonction</h2>
+
+<p>S'il est utilisé dans une fonction, la valeur de <code>this</code> dépendra de la façon dont la fonction a été appelée.</p>
+
+<h3 id="Avec_un_appel_simple">Avec un appel simple</h3>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+// Dans un navigateur
+f1() === window; // true (objet global)
+
+// Côté serveur (ex. Node)
+f1() === global; // true
+</pre>
+
+<p>Dans cet exemple, la valeur de <code>this</code> n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, <code>this</code> doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // on utilise le mode strict
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<p>En mode strict, la valeur de <code>this</code> est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste <code>undefined</code>. Il pourrait être défini avec n'importe quelle autre valeur, telle que <code>null</code> ou <code>42</code> ou <code>"Je ne suis pas this"</code>.</p>
+
+<div class="note"><strong>Note :</strong> Dans ce deuxième exemple,<code>this</code> vaut {{jsxref("undefined")}} car <code>f2</code> a été appelé sans « base » (ex. : <code>window.f2()</code>). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet <code>window</code>.</div>
+
+<h3 id="call_et_apply"><code>call</code> et <code>apply</code></h3>
+
+<p>Pour passer <code>this</code> d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :</p>
+
+<pre class="brush: js">// Un objet peut être passé en premier argument
+// de call ou de apply
+var obj = { a: "Toto" };
+
+// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
+var a = "Global";
+
+function whatsThis(arg) {
+  // La valeur de this ici dépend de la façon
+  // dont la fonction est appelée
+  return this.a;
+}
+
+whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
+whatsThis.call(obj);  // "Toto"
+whatsThis.apply(obj); // "Toto"
+</pre>
+
+<p>Lorsque le mot-clé <code>this</code> est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier <code>this</code> à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.</p>
+
+<pre class="brush:js">function ajout(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', les paramètres suivants sont les arguments
+// à utiliser dans l'appel de la fonction
+ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', le second paramètre est le tableau dont les
+// les éléments sont les arguments à passer à la fonction
+ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+</pre>
+
+<p>Note : En mode non-strict, si la valeur à lier à <code>this</code>, passée à <code>call</code> ou <code>apply</code>, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne <code>ToObject</code>. Si la valeur est d'un type primitif autre qu'objet, <code>7</code> ou <code>'toto'</code> par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre <code>7</code> converti en un objet grâce à <code>new Number(7)</code> et la chaîne <code>'toto'</code> convertie en objet grâce à <code>new String('toto')</code>.</p>
+
+<pre class="brush:js">function truc() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+truc.call(7);     // [object Number]
+truc.call('foo'); // [object String]
+</pre>
+
+<h3 id="La_méthode_bind">La méthode <code>bind</code></h3>
+
+<p>Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle <code>f.bind(unObjet)</code>, on crée une nouvelle fonction qui possède le même corps et la même portée que <code>f</code>, mais où <code>this</code> sera lié, de façon permanente, au premier argument passé à <code>bind</code>, quelle que soit la façon dont la méthode est utilisée.</p>
+
+<pre class="brush:js">function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
+console.log(h()); // azerty
+
+var o = {a:37, f:f, g:g, h:h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
+</pre>
+
+<h3 id="Avec_les_fonctions_fléchées">Avec les fonctions fléchées</h3>
+
+<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, <code>this</code> correspond à la valeur de <code>this</code> utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, <code>this</code> sera l'objet global :</p>
+
+<pre class="brush: js">var objetGlobal = this;
+var toto = (() =&gt; this);
+console.log(toto() === objetGlobal); // true</pre>
+
+<p>Peu importe la façon dont <code>toto</code> sera appelée, <code>this</code> sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement <code>this</code> correspond à l'objet courant) ou lorsque <code>call</code>, <code>apply</code> ou <code>bind</code> sont utilisés :</p>
+
+<pre class="brush: js">// Appelé comme la méthode d'un objet
+var obj = {toto: toto};
+console.log(obj.toto() === objetGlobal); // true
+
+// Ici on utilise call
+console.log(toto.call(obj) === objetGlobal); // true
+// Là on utilise bind
+toto = toto.bind(obj);
+console.log(toto() === objetGlobal); // true</pre>
+
+<p>Quelle que soit la méthode utilisée le <code>this</code> de <code>toto</code> sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : <code>this</code> prendra la valeur de <code>this</code> dans le contexte englobant.</p>
+
+<pre class="brush: js">// On crée un objet obj qui a une méthode truc
+// qui renvoie une fonction qui renvoie la
+// valeur de this.
+// La fonction qui est renvoyée est créée sous
+// la forme d'une fonction fléchée. this est
+// donc fixé de façon permanente avec la valeur
+// de this du contexte englobant.
+var obj = { truc : function() {
+                    var x = (() =&gt; this);
+                    return x;
+                  }
+          };
+// On appelle truc comme une méthode d'obj, this
+// vaudra donc obj. On récupère la fonction
+// renvoyée par truc et on en stocke une référence
+// avec la variable fn
+var fn = obj.truc();
+
+// On appelle fn sans définir this, par défaut
+// en mode strict cela correspondrait à l'objet
+// global ou à undefined
+console.log(fn() === obj); // true
+
+// Attention à ne pas référence la méthode d'obj
+// sans l'appeler
+var fn2 = obj.truc;
+// Appeler le this de la fonction fléchée dans ce contexte
+// renverra window car c'est le this associé à fn2 (qui
+// correspond au contexte global)
+console.log(fn2()() == window); // true</pre>
+
+<p>Dans l'exemple précédent, la fonction affectée à <code>obj.truc</code> renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, <code>this</code> vaut toujours <code>obj.truc</code> lorsque la fonction est appelée. Lorsque la fonction est renvoyée, <code>this</code> continue de correspondre à la valeur initiale. Dans ce code, <code>this</code> vaut <code>obj</code> et garde cette valeur, même lorsqu'il est appelé plus tard.</p>
+
+<h3 id="En_tant_que_méthode_dun_objet">En tant que méthode d'un objet</h3>
+
+<p>Lorsqu'une fonction est appelée comme méthode d'un objet, <code>this</code> correspondra à l'objet possédant la méthode qu'on appelle.</p>
+
+<p>Ainsi, dans l'exemple suivant, lorsqu'on appelle <code>o.f()</code>, le <code>this</code> contenu à l'intérieur de la fonction correspond à l'objet <code>o</code>.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de <code>o</code> plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function indépendante() {
+  return this.prop;
+}
+
+o.f = indépendante;
+
+console.log(o.f()); // 37
+</pre>
+
+<p>On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de <code>o</code>.</p>
+
+<p>De la même façon, <code>this</code> n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction <code>o.b.g</code>, on appelle la méthode <code>g</code> de l'objet <code>o.b</code>. Ainsi, au moment de l'exécution, <code>this</code> fera référence à <code>o.b</code>. Le fait que cet objet soit une propriété de <code>o</code> n'a aucun impact : seule la référence objet la plus proche compte.</p>
+
+<pre class="brush:js">o.b = {g: indépendante, prop: 42};
+console.log(o.b.g()); // 42
+</pre>
+
+<h4 id="this_sur_la_chaîne_de_prototypes_de_lobjet"><code>this</code> sur la chaîne de prototypes de l'objet</h4>
+
+<p>Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, <code>this</code> fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).</p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>Dans cet exemple, l'objet qui est affecté à la variable <code>p</code> ne possède pas directement la propriété <code>f</code>, il en hérite de par son prototype. Cela n'impacte en rien la détermination de <code>this</code> car la recherche de la propriété <code>f</code> remonte le long de la chaîne de prototype et s'arrête à <code>o</code>. Au début de cette recherche, on a une référence à <code>p.f</code>, aussi <code>this</code> fera référence à l'objet représenté par <code>p</code>. Autrement dit <code>f</code> étant appelé comme une méthode de <code>p</code>, <code>this</code> fera ici référence à <code>p</code>. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.</p>
+
+<h4 id="this_dans_un_getter_ou_setter"><code>this</code> dans un <em>getter</em> ou <em>setter</em></h4>
+
+<p>Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (<em>getter</em>) ou d'un mutateur (<em>setter</em>). Une fonction utilisée comme accesseur ou mutateur verra son <code>this</code> lié à l'objet à partir duquel on souhaite accéder/changer la propriété.</p>
+
+<pre class="brush:js">function moduleRéel(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'moduleRéel', {
+    get: moduleRéel, enumerable:true, configurable:true});
+
+console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
+</pre>
+
+<h3 id="En_tant_que_constructeur">En tant que constructeur</h3>
+
+<p>Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le <code>this</code> correspondant sera lié au nouvel objet en train d'être construit.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Par défaut, un constructeur renverra l'objet auquel <code>this</code> fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de <code>this</code>).</p>
+</div>
+
+<pre class="brush:js">/*
+ * Les constructeurs fonctionnent de la façon suivante :
+ *
+ * function MonConstructeur(){
+ *   // le corps de la fonction
+ *   // on crée des propriétés sur |this|
+ *   // par exemple
+ *   this.fum = "nom";
+ *   // etc.
+ *
+ *   // Si la fonction utilise une instruction de
+ *   // retour (return) et renvoie un objet
+ *   // ce sera cet objet qui sera le résultat de
+ *   // l'expression |new|.
+ *   // Sinon, le résultat sera l'objet
+ *   // lié à |this|
+ *   // (ce second cas est celui qu'on rencontre
+ *   // fréquemment).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+</pre>
+
+<p>Dans le dernier exemple (<code>C2</code>), on renvoie un objet lors de la construction. L'objet qui était lié <code>this</code> est alors abandonné. (L'instruction "<code>this.a = 37;</code>" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)</p>
+
+<h3 id="En_tant_que_gestionnaire_dévénement_DOM">En tant que gestionnaire d'événement DOM</h3>
+
+<p>Lorsqu'une fonction est utilisée comme gestionnaire d'événement (<em>event handler</em>), le <code>this</code> correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p>
+
+<pre class="brush:js">// Lorsque cette fonction est appelée
+// comme listener, l'élément associé
+// sera coloré en bleu
+function bluify(e){
+  // Cette proposition est toujours vraie
+  console.log(this === e.currentTarget);
+
+  // true lorsque currentTarget et target correspondent
+  // au même objet
+  console.log(this === e.target);
+
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// On obtient une liste de tous les éléments
+// contenus dans le document
+var elements = document.getElementsByTagName('*');
+
+// On ajout le listener bluify pour réagier au clic
+// Quand on clique sur un élément, il deviendra bleu
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="En_tant_que_gestionnaire_dévénements_in-line">En tant que gestionnaire d'événements <em>in-line</em></h3>
+
+<p>Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (<em>in-line</em>), la valeur de <code>this</code> correspondra à l'élément du DOM sur lequel on a placé le <em>listener</em>. Ainsi :</p>
+
+<pre class="brush:js">&lt;button onclick="console.log(this.tagName.toLowerCase());"&gt;
+  Afficher this
+&lt;/button&gt;
+</pre>
+
+<p>montrera le texte <code>button</code> lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de <code>this</code> affectée de cette façon :</p>
+
+<pre class="brush:js">&lt;button onclick="console.log((function(){return this})());"&gt;
+  Afficher le this interne
+&lt;/button&gt;
+</pre>
+
+<p>Ici, on utilise <code>this </code>à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet <code>window</code> pour un navigateur avec du code non-strict).</p>
+
+<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-this-keyword', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</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.this")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">this &amp; les prototypes objet</a> de Kyle Simpson sur GitHub (en anglais)</li>
+ <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Un article explicatif sur <code>this</code> (en anglais)</a></li>
+ <li>La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global <code>this</code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..e65d9a6db2
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,273 @@
+---
+title: L'opérateur typeof
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>typeof</code></strong> renvoie une chaîne qui indique le type de son opérande.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.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="Syntaxe">Syntaxe</h2>
+
+<p>L'opérateur <code>typeof</code> est suivi de son opérande :</p>
+
+<pre class="syntaxbox">typeof <em>operande</em></pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<p><code><em>operande</em></code> est une expression qui représente la valeur dont on souhaite obtenir le type.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le tableau qui suit liste les résultats possibles de l'opérateur <code>typeof</code>. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types et structures de données JavaScript</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>indéfini</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>nul</td>
+   <td><code>"object" </code>(voir ci-après)</td>
+  </tr>
+  <tr>
+   <td>booléen</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>nombre</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>grand entier</td>
+   <td><code>"bigint"</code></td>
+  </tr>
+  <tr>
+   <td>chaîne de caractère</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>symbole (nouveauté d'ECMAScript 6 / 2015)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)</td>
+   <td><em>Résultat différent selon l'implémentation</em></td>
+  </tr>
+  <tr>
+   <td>Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>Tout autre objet</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">// Pour les nombres
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
+typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
+
+// Grand entier
+typeof 42n === 'bigint';
+
+// Les chaînes de caractères
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
+typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
+typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
+
+
+// Les booléens
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
+typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
+
+
+// Les symboles
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Indéfini
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // pour une variable indéfinie
+
+
+// Les objets
+typeof {a:1} === 'object';
+
+// Utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/isArray">Array.isArray</a> ou Object.prototype.toString.call
+// afin de différencier les objets des tableaux
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
+
+// Les expressions suivantes sont source de confusion
+// à ne pas utiliser sous cette forme
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Les fonctions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h2 id="Informations_supplémentaires">Informations supplémentaires</h2>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// Cela est valable depuis les commencements de JavaScript
+typeof null === 'object';
+</pre>
+
+<p>Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. <code>null</code> était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de <code>null</code> valait 0, d'où le comportement de <code>typeof</code> (<a href="https://www.2ality.com/2013/10/typeof-null.html">source</a>).</p>
+
+<p>Un correctif fut proposé pour ECMAScript mais il fut <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">refusé</a>. Avec cette version, on aurait eu <code>typeof null === 'null'</code>.</p>
+
+<h3 id="Utiliser_l'opérateur_new">Utiliser l'opérateur <code>new</code></h3>
+
+<pre class="brush: js">// Tous les constructeurs doivent être employés
+// avec le mot-clé "new"
+var maChaine = new String("toto");
+var monNombre = new Number(100);
+
+typeof maChaine;  // renverra "object"
+typeof monNombre; // renverra "object"
+
+// En revanche avec le constructeur Function,
+// on aura :
+var maFonction = new Function();
+typeof maFonction; // renverra "function"</pre>
+
+<h3 id="Utilisation_des_parenthèses">Utilisation des parenthèses</h3>
+
+<pre class="brush: js">// Les parenthèses peuvent s'avérer utile pour
+// déterminer le type de données d'une expression
+// complète
+
+var maDonnee = 99;
+
+typeof maDonnee + 'Toto';   // renverra 'number Toto'
+typeof (maDonnee + 'Toto'); // renverra 'string'
+</pre>
+
+<h3 id="Expressions_rationnelles">Expressions rationnelles</h3>
+
+<p>Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
+typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
+</pre>
+
+<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)</h3>
+
+<p>Avant ECMAScript 2015 (ES6), <code>typeof</code> retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant <code>typeof</code>.</p>
+
+<p>Avec l'apparition des opérateurs <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, si on utilise <code>typeof</code> sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise <code>typeof</code> sur une variable déclarée avec <code>var</code> avant la déclaration, cela renverra <code>undefined</code>. Les variables déclarées avec <code>let</code> et <code>const</code> sont en fait placées dans une <em><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporaire </a></em>entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.</p>
+
+<pre class="brush: js">typeof variableGlobaleNonDeclaree === "undefined";
+
+typeof variableLet; // ReferenceError
+let variableLet;
+
+typeof constante;   // ReferenceError
+const constante = "coucou";
+
+typeof maClasse; // ReferenceError
+class maClasse{};</pre>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est <code>"undefined"</code>.</p>
+
+<pre class="brush: js">typeof document.all === "undefined";</pre>
+
+<p>Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de <code>document.all</code> représente une violation « volontaire » du standard ECMAScript original.</p>
+
+<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-typeof-operator', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.1.</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.typeof")}}</p>
+
+<h2 id="Notes_spécifiques_à_IE">Notes spécifiques à IE</h2>
+
+<p>Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}</li>
+ <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Discussion es-discuss sur l'évolution de <code>typeof</code> avec ECMAScript 2015 et <code>let</code></a></li>
+ <li><a href="https://github.com/tc39/ecma262/issues/668">À propos du non-respect volontaire du standard avec le type de <code>document.all</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/void/index.html b/files/fr/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..e15eb1ed76
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,122 @@
+---
+title: L'opérateur void
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>void</code></strong> permet d'évaluer une <em>expression</em> donnée et de renvoyer <code>undefined</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>expression</em></pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.</p>
+
+<p>L'opérateur <code>void</code> est souvent utilisé pour obtenir la valeur <code>undefined</code>, généralement avec "<code>void(0)</code>" (qui est l'équivalent de "<code>void 0</code>"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.</p>
+
+<p>Attention à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a> et notamment de celle de <code>void</code>, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :</p>
+
+<pre class="brush: js">void 2 == '2';    // renvoie false
+void (2 === '2'); // renvoie undefined</pre>
+
+<h2 id="Expressions_de_fonction_appelées_immédiatement">Expressions de fonction appelées immédiatement</h2>
+
+<p>Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, <code>void</code> peut être utilisé pour que le mot-clé <code>function</code> soit traité comme une expression plutôt que comme une déclaration.</p>
+
+<pre class="brush: js">void function iife() {
+    var toto = function () {};
+    var machin = function () {};
+    var truc = function () {
+        toto();
+        machin();
+     };
+    var bidule = function () {};
+
+    truc();
+    bidule();
+}();
+</pre>
+
+<h2 id="Les_URI_JavaScript">Les URI JavaScript</h2>
+
+<p>Lorsqu'un navigateur utilise une URI avec <code>javascript:</code>, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur <code>void</code> peut alors être utilisé pour renvoyer cette valeur. Par exemple :</p>
+
+<pre>&lt;a href="javascript:void(0);"&gt;
+  Cliquer ici (sans effet)
+&lt;/a&gt;
+
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  Cliquer ici pour rendre le fond vert
+&lt;/a&gt;</pre>
+
+<p>Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole <code>javascript:</code>, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.</p>
+
+<h2 id="Fonctions_fléchées_sans_valeur_de_retour">Fonctions fléchées sans valeur de retour</h2>
+
+<p>Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.</p>
+
+<p>Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur <code>void</code> :</p>
+
+<pre class="brush: js">button.onclick = () =&gt; void faireQQc();</pre>
+
+<p>Ainsi, la valeur de retour de la fonction <code>faireQQc</code> sera bloquée par <code>void</code> et c'est <code>undefined</code> qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de <code>faireQQc</code> par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1</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.void")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..f6a5de53e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,127 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Opérateurs/yield
+tags:
+  - ECMAScript 2015
+  - Générateurs
+  - Itérateur
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <code>yield</code> est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou <a href="/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">une fonction génératrice historique</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yield.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox language-html"><em>[[rv =]]</em> yield [[<em>expression</em>]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Définit la valeur à retourner depuis la fonction génératrice via <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»">le protocole itérateur</a>. Si omise, <code>undefined</code> sera retournée à la place.</dd>
+ <dt><code>rv</code></dt>
+ <dd>Retourne la valeur optionnelle passée à la méthode <code>next()</code> pour reprendre son exécution.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Le mot-clé <code>yield</code> suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé <code>yield</code> est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé <code>return</code>.</p>
+
+<p>Le mot-clé <code>yield</code> ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des <em>callbacks</em>.</p>
+
+<p>Le mot-clé <code>yield</code> retourne en fait un objet <code>IteratorResult</code> ayant deux propriétés, <code>value</code> et <code>done.</code> La propriété <code>value</code> est le résultat de l'évaluation de l'expression <code>yield</code>, et <code>done</code> est <code>false</code>, indiquant que la fonction génératrice n'est pas complètement terminée.</p>
+
+<p>Une fois suspendue sur une expression <code>yield</code>, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode <code>next()</code> du générateur soit appelée. Chaque fois que la méthode <code>next()</code> du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :</p>
+
+<ul>
+ <li>
+  <p>un <code>yield</code>, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que <code>next()</code> sera appelé, l'exécution reprendra à l'instruction immédiatement après le <code>yield</code> ;</p>
+ </li>
+ <li>
+  <p>{{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;</p>
+ </li>
+ <li>
+  <p>la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et <code>done</code> est <code>true</code> ;</p>
+ </li>
+ <li>
+  <p>une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant dans lequel la <code>value</code> est la valeur spécifiée par l'instruction <code>return</code> et <code>done</code> vaut <code>true</code>.</p>
+ </li>
+</ul>
+
+<p>Si une valeur optionnelle est passée à la méthode <code>next()</code> du générateur, cette valeur devient la valeur retournée par l'opération <code>yield</code> en cours du générateur.</p>
+
+<p>Entre le chemin de code du générateur, ses opérateurs <code>yield</code>, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est la déclaration d'un exemple de fonction génératrice :</p>
+
+<pre><code>function* compteVentesPommes () {
+  var listeVentes = [3, 7, 5];
+  for (var i = 0; i &lt; listeVentes.length; i++) {
+    yield listeVentes[i];
+  }
+}</code></pre>
+
+<p>Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.</p>
+
+<pre><code>var magasinPommes = compteVentesPommes(); // Générateur { }
+console.log(magasinPommes.next()); // { value: 3, done: false }
+console.log(magasinPommes.next()); // { value: 7, done: false }
+console.log(magasinPommes.next()); // { value: 5, done: false }
+console.log(magasinPommes.next()); // { value: undefined, done: true }</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<ul>
+ <li>À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet <code>IteratorResult</code> tel que <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}):
+  <ul>
+   <li>L'expression après le mot-clé <code>yield</code> est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : <code>function* compteVentesPommes() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..3235d87dc1
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,162 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Opérateurs/yield*
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterable
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Une <strong>expression <code>yield*</code></strong> est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.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="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox language-html"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>L'expression qui renvoie un objet itérable.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'expression <code>yield*</code> itère sur l'opérande et génère chaque valeur générée par l'opérande.</p>
+
+<p>La valeur de l'expression <code>yield*</code> est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété <code>done</code> vaut <code>true</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Délégation_de_la_génération">Délégation de la génération</h3>
+
+<p>Dans le code suivant, les valeurs générées par <code>g1()</code> sont renvoyées grâce aux appels à la fonction <code>next()</code>, comme pour celles renvoyées par <code>g2()</code>.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Les_autres_objets_itérables">Les autres objets itérables</h3>
+
+<p><code>yield*</code> peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }</pre>
+
+<h3 id="La_valeur_de_l'expression_yield*">La valeur de l'expression <code>yield*</code></h3>
+
+<p><code>yield*</code> est une expression et non une instruction, elle est donc évaluée et fournit une valeur :</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return "toto";
+}
+
+var résultat;
+
+function* g5() {
+  résultat = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() renvoie{ value: "toto", done: true } at this point
+
+console.log(résultat);          // "toto"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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.yield_star")}}</p>
+
+<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
+
+<ul>
+ <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) :
+
+  <ul>
+   <li>La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}:
+    <pre class="brush: js">function* toto() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
+ <li>L'instruction {{jsxref("Instruction/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
+</ul>