aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/javascript/reference/functions
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-08-03 08:03:23 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-03 08:08:25 +0200
commitbf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch)
treec101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/functions
parent844f5103992238c0c23203286dad16a466e89c97 (diff)
downloadtranslated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/functions')
-rw-r--r--files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md65
-rw-r--r--files/fr/web/javascript/reference/functions/arguments/callee/index.md167
-rw-r--r--files/fr/web/javascript/reference/functions/arguments/index.md262
-rw-r--r--files/fr/web/javascript/reference/functions/arguments/length/index.md98
-rw-r--r--files/fr/web/javascript/reference/functions/arrow_functions/index.md349
-rw-r--r--files/fr/web/javascript/reference/functions/default_parameters/index.md158
-rw-r--r--files/fr/web/javascript/reference/functions/get/index.md181
-rw-r--r--files/fr/web/javascript/reference/functions/index.md999
-rw-r--r--files/fr/web/javascript/reference/functions/method_definitions/index.md177
-rw-r--r--files/fr/web/javascript/reference/functions/rest_parameters/index.md163
-rw-r--r--files/fr/web/javascript/reference/functions/set/index.md150
11 files changed, 1306 insertions, 1463 deletions
diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md
index 406eb7bcdc..e6f4715714 100644
--- a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md
+++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md
@@ -11,19 +11,20 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
original_slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.</p>
+La valeur initiale de la propriété **`@@iterator`** est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
+ arguments[Symbol.iterator]()
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Utiliser_une_boucle_for...of">Utiliser une boucle <code>for...of</code></h3>
+### Utiliser une boucle `for...of`
-<pre class="brush: js">function f() {
+```js
+function f() {
// votre environnement doit supporter les
// boucles for..of et les variables
// définies avec let dans les boucles
@@ -32,47 +33,21 @@ original_slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator
}
}
f('w', 'y', 'k', 'o', 'p');
-</pre>
+```
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
-<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('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. |
+| {{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} |   |
+| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}} | {{Spec2('ESDraft')}} |   |
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
+{{Compat("javascript.functions.arguments.@@iterator")}}
-<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
+## Voir aussi
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.values()")}}</li>
-</ul>
+- {{jsxref("Array.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.md b/files/fr/web/javascript/reference/functions/arguments/callee/index.md
index 4f69ce4490..bb8c7d6fa3 100644
--- a/files/fr/web/javascript/reference/functions/arguments/callee/index.md
+++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.md
@@ -11,45 +11,52 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/arguments/callee
original_slug: Web/JavaScript/Reference/Fonctions/arguments/callee
---
-<div>{{jsSidebar("Functions")}}{{deprecated_header}}</div>
+{{jsSidebar("Functions")}}{{deprecated_header}}
-<p>La propriété <strong><code>arguments.callee</code></strong> contient la fonction en cours d'exécution.</p>
+La propriété **`arguments.callee`** contient la fonction en cours d'exécution.
-<h2 id="Description">Description</h2>
+## Description
-<p><code>callee</code> est une propriété de l'objet <code>arguments</code>. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).</p>
+`callee` est une propriété de l'objet `arguments`. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).
-<div class="warning"><p><strong>Attention :</strong> En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, ECMAScript 5 interdit la fonction <code>arguments.callee()</code>. Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.</p></div>
+> **Attention :** En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), ECMAScript 5 interdit la fonction `arguments.callee()`. Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.
-<h3 id="Pourquoi_arguments.callee_a-t-il_été_retiré_du_mode_strict_ES5">Pourquoi <code>arguments.callee</code> a-t-il été retiré du mode strict ES5 ?</h3>
+### Pourquoi `arguments.callee` a-t-il été retiré du mode strict ES5 ?
-<p>(adapté d'une réponse<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288"> Stack Overflow par olliej</a>)</p>
+(adapté d'une réponse[ Stack Overflow par olliej](http://stackoverflow.com/a/235760/578288 "http://stackoverflow.com/a/235760/578288"))
-<p>Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.</p>
+Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.
-<p>Cette syntaxe produisait le résultat escompté :</p>
+Cette syntaxe produisait le résultat escompté :
-<pre class="brush: js">function factorielle (n) {
- return !(n &gt; 1) ? 1 : factorielle(n - 1) * n;
+```js
+function factorielle (n) {
+ return !(n > 1) ? 1 : factorielle(n - 1) * n;
}
-[1,2,3,4,5].map(factorielle);</pre>
+[1,2,3,4,5].map(factorielle);
+```
-<p>mais :</p>
+mais :
-<pre class="brush: js">[1,2,3,4,5].map(function (n) {
- return !(n &gt; 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
-});</pre>
+```js
+[1,2,3,4,5].map(function (n) {
+ return !(n > 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
+});
+```
-<p>ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta <code>arguments.callee</code> :</p>
+ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta `arguments.callee` :
-<pre class="brush: js">[1,2,3,4,5].map(function (n) {
- return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
-});</pre>
+```js
+[1,2,3,4,5].map(function (n) {
+ return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
+});
+```
-<p>Cependant, ce fut une mauvaise solution (avec <code>caller</code> également) car elle rendit impossible l'<a href="https://fr.wikipedia.org/wiki/Extension_inline">extension inline</a> et la <a href="https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale">récursion terminale</a> de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur <code>this</code> :</p>
+Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` :
-<pre class="brush: js">var global = this;
+```js
+var global = this;
var fonctionTruc = function (recursed) {
if (!recursed) { return arguments.callee(true); }
@@ -60,51 +67,57 @@ var fonctionTruc = function (recursed) {
}
}
-fonctionTruc();</pre>
+fonctionTruc();
+```
-<p>ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :</p>
+ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :
-<pre class="brush: js">[1,2,3,4,5].map(function factorielle (n) {
- return !(n &gt; 1) ? 1 : factorielle(n - 1)*n;
-});</pre>
+```js
+[1,2,3,4,5].map(function factorielle (n) {
+ return !(n > 1) ? 1 : factorielle(n - 1)*n;
+});
+```
-<p>Cette méthode possède plusieurs avantages :</p>
+Cette méthode possède plusieurs avantages :
-<ul>
- <li>La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code</li>
- <li>Cela ne crée pas une variable dans la portée extérieure (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">sauf pour IE 8 et les versions antérieures</a>)</li>
- <li>Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet <code>arguments</code></li>
-</ul>
+- La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code
+- Cela ne crée pas une variable dans la portée extérieure ([sauf pour IE 8 et les versions antérieures](http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope))
+- Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet `arguments`
-<p>Une autre fonctionnalité qui a été déprécié est : <code>arguments.callee.caller</code>, ou plus précisément <code>Function.caller</code>. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction <code>f</code> n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (<em>call site</em>) qui aurait pu être développé inline très simplement devra subir de nombreux tests :</p>
+Une autre fonctionnalité qui a été déprécié est : `arguments.callee.caller`, ou plus précisément `Function.caller`. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction `f` n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (_call site_) qui aurait pu être développé inline très simplement devra subir de nombreux tests :
-<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre>
+```js
+function f (a, b, c, d, e) { return a ? b * c : d * e; }
+```
-<p>Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.</p>
+Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Utiliser_arguments.callee_pour_une_fonction_anonyme_récursive">Utiliser <code>arguments.callee</code> pour une fonction anonyme récursive</h3>
+### Utiliser `arguments.callee` pour une fonction anonyme récursive
-<p>Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">expression de fonction</a> ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser <code>arguments.callee</code>.</p>
+Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une [expression de fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function) ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser `arguments.callee`.
-<p>L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">nommées</a>).</p>
+L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être [nommées](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function)).
-<pre class="brush: js">function créer() {
+```js
+function créer() {
return function(n) {
- if (n &lt;= 1)
+ if (n <= 1)
return 1;
return n * arguments.callee(n - 1);
};
}
-var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)</pre>
+var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)
+```
-<h3 id="Une_utilisation_d'arguments.callee_qui_ne_possède_pas_de_solution_de_remplacement">Une utilisation d'<code>arguments.callee</code> qui ne possède pas de solution de remplacement</h3>
+### Une utilisation d'`arguments.callee` qui ne possède pas de solution de remplacement
-<p>Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour <code>arguments.callee</code>, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):</p>
+Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour `arguments.callee`, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):
-<pre class="brush: js">function créerPersonne (sIdentité) {
+```js
+function créerPersonne (sIdentité) {
var oPersonne = new Function("alert(arguments.callee.identité);");
oPersonne.identité = sIdentité;
return oPersonne;
@@ -112,46 +125,22 @@ var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)</pre>
var jean = créerPersonne("Jean Biche");
-jean();</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- <tr>
- <td>{{SpecName('ES1')}}</td>
- <td>{{Spec2('ES1')}}</td>
- <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arguments.callee")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
-</ul>
+jean();
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} |   |
+| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} |   |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments.callee")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
diff --git a/files/fr/web/javascript/reference/functions/arguments/index.md b/files/fr/web/javascript/reference/functions/arguments/index.md
index c996b904d3..84b1939b72 100644
--- a/files/fr/web/javascript/reference/functions/arguments/index.md
+++ b/files/fr/web/javascript/reference/functions/arguments/index.md
@@ -10,238 +10,228 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/arguments
original_slug: Web/JavaScript/Reference/Fonctions/arguments
---
-<div>{{jsSidebar("Fonctions")}}</div>
+{{jsSidebar("Fonctions")}}
-<p>L'objet <strong><code>arguments</code></strong> est un objet, <strong>semblable</strong> à un tableau, correspondant aux arguments passés à une fonction.</p>
+L'objet **`arguments`** est un objet, **semblable** à un tableau, correspondant aux arguments passés à une fonction.
-<div class="note">
-<p><strong>Note :</strong> Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
-</div>
+> **Note :** Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste).
-<div class="note">
-<p><strong>Note :</strong> Par « objet semblable à un tableau », on indique que l'objet <code>arguments</code> possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.</p>
-</div>
+> **Note :** Par « objet semblable à un tableau », on indique que l'objet `arguments` possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.
-<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
+> **Note :** « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)
+## Syntaxe
-<div class="note">
-<p><strong>Note :</strong> « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)</p>
-</div>
+ arguments
-<h2 id="Syntaxe">Syntaxe</h2>
+## Description
-<pre class="syntaxbox">arguments</pre>
+L'objet `arguments` est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)).
-<h2 id="Description">Description</h2>
+Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :
-<p>L'objet <code>arguments</code> est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>).</p>
-
-<p>Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet <code>arguments</code>. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :</p>
-
-<pre class="brush: js">arguments[0]
+```js
+arguments[0]
arguments[1]
-arguments[2]</pre>
+arguments[2]
+```
-<p>Les arguments peuvent aussi être modifiés :</p>
+Les arguments peuvent aussi être modifiés :
-<pre class="brush: js">arguments[1] = 'nouvelle valeur';</pre>
+```js
+arguments[1] = 'nouvelle valeur';
+```
-<h3 id="Type_de_l'objet_arguments_et_liens_avec_Array">Type de l'objet <code>arguments</code> et liens avec <code>Array</code></h3>
+### Type de l'objet `arguments` et liens avec `Array`
-<p>L'objet <code>arguments</code> n'est pas un {{jsxref("Array")}}. Il est similaire à un <code>Array</code>, mais il n'a pas les propriétés d'un <code>Array,</code> exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type <code>Array</code> :</p>
+L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` :
-<pre class="brush: js">console.log(typeof arguments); // 'object'
+```js
+console.log(typeof arguments); // 'object'
var args = Array.prototype.slice.call(arguments);
// Avec ECMAScript 2015 / ES6
var args = Array.from(arguments);
-</pre>
-
-<h3 id="Utilisation_de_la_décomposition_avec_les_arguments">Utilisation de la décomposition avec les arguments</h3>
+```
-<p>On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">l'opérateur de décomposition</a> afin de convertir cet objet en un <em>vrai</em> <code>Array</code> :</p>
+### Utilisation de la décomposition avec les arguments
-<pre class="brush: js">var args = Array.from(arguments);
-var args = [...arguments];</pre>
+On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore [l'opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition) afin de convertir cet objet en un _vrai_ `Array` :
-<div class="warning">
-<p><strong>Attention :</strong> Il est déconseillé d'utiliser <code>slice</code> sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">cette page</a> sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser <code>Array.apply</code> :</p>
+```js
+var args = Array.from(arguments);
+var args = [...arguments];
+```
-<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre>
-</div>
+> **Attention :** Il est déconseillé d'utiliser `slice` sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir [cette page](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments) sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser `Array.apply` :
+>
+> ```js
+> var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+> ```
-<p>L'objet <code>arguments</code> est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet <code>arguments</code> en dehors de la déclaration d'une fonction renvoie une erreur.</p>
+L'objet `arguments` est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet `arguments` en dehors de la déclaration d'une fonction renvoie une erreur.
-<p>Vous pouvez utiliser l'objet <code>arguments</code> si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet <code>arguments</code>. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)</p>
+Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)
-<h3 id="Utiliser_typeof_sur_arguments">Utiliser <code>typeof</code> sur <code>arguments</code></h3>
+### Utiliser `typeof` sur `arguments`
-<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie <code>"object"</code> lorsqu'on l'utilise sur <code>arguments</code></p>
+L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie `"object"` lorsqu'on l'utilise sur `arguments`
-<pre class="brush: js">console.log(typeof arguments); // "object"</pre>
+```js
+console.log(typeof arguments); // "object"
+```
-<p>On peut tout à fait utiliser <code>typeof</code> sur chacun des arguments afin de connaître leur type respectif</p>
+On peut tout à fait utiliser `typeof` sur chacun des arguments afin de connaître leur type respectif
-<pre class="brush: js">console.log(typeof arguments[0]); // renvoie le type du premier argument</pre>
+```js
+console.log(typeof arguments[0]); // renvoie le type du premier argument
+```
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
-<dl>
- <dt>{{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}</dt>
- <dd>Référence à la fonction en cours d'exécution.</dd>
- <dt>{{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}</dt>
- <dd>Référence à la fonction appelante.</dd>
- <dt>{{jsxref("Fonctions/arguments/length", "arguments.length")}}</dt>
- <dd>Référence au nombre d'arguments passés à la fonction.</dd>
- <dt>{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}</dt>
- <dd>Renvoie un nouvel <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">itérateur</a> qui contient les valeurs pour chaque indice d'<code>arguments</code>.</dd>
-</dl>
+- {{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}
+ - : Référence à la fonction en cours d'exécution.
+- {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}
+ - : Référence à la fonction appelante.
+- {{jsxref("Fonctions/arguments/length", "arguments.length")}}
+ - : Référence au nombre d'arguments passés à la fonction.
+- {{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}
+ - : Renvoie un nouvel [itérateur](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs) qui contient les valeurs pour chaque indice d'`arguments`.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Définir_une_fonction_de_concaténation_d'un_nombre_variable_de_chaînes">Définir une fonction de concaténation d'un nombre variable de chaînes</h3>
+### Définir une fonction de concaténation d'un nombre variable de chaînes
-<p>Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :</p>
+Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :
-<pre class="brush:js">function myConcat(separateur) {
+```js
+function myConcat(separateur) {
var args = Array.prototype.slice.call(arguments, 1);
return args.join(separateur);
-}</pre>
+}
+```
-<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.</p>
+Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.
-<pre class="brush:js">// renvoie "rouge, orange, bleu"
+```js
+// renvoie "rouge, orange, bleu"
myConcat(", ", "rouge", "orange", "bleu");
// renvoie "éléphant ; giraffe ; lion ; guépard"
myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
-</pre>
+```
-<h3 id="Définir_une_fonction_de_création_de_listes_HTML">Définir une fonction de création de listes HTML</h3>
+### Définir une fonction de création de listes HTML
-<p>Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "<code>u</code>" (unordered), si la liste doit être sans numérotation (avec des puces), ou "<code>o</code>" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :</p>
+Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :
-<pre class="brush:js">function liste(type) {
- var resultat = "&lt;" + type + "l&gt;&lt;li&gt;";
+```js
+function liste(type) {
+ var resultat = "<" + type + "l><li>";
var args = Array.prototype.slice.call(arguments, 1);
- resultat += args.join("&lt;/li&gt;&lt;li&gt;");
- resultat += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list
+ resultat += args.join("</li><li>");
+ resultat += "</li></" + type + "l>"; // end list
return resultat;
-}</pre>
+}
+```
-<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :</p>
+Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :
-<pre class="brush:js">var listeHTML = liste("u", "Un", "Deux", "Trois");
+```js
+var listeHTML = liste("u", "Un", "Deux", "Trois");
/* listeHTML vaut  :
-"&lt;ul&gt;&lt;li&gt;Un&lt;/li&gt;&lt;li&gt;Deux&lt;/li&gt;&lt;li&gt;Trois&lt;/li&gt;&lt;/ul&gt;"
+"<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>"
-*/</pre>
+*/
+```
-<h3 id="Paramètres_du_reste_paramètres_par_défaut_et_décomposition">Paramètres du reste, paramètres par défaut et décomposition</h3>
+### Paramètres du reste, paramètres par défaut et décomposition
-<p>L'objet <code>arguments</code> peut être utilisé en combinaison avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">les paramètres décomposés</a>.</p>
+L'objet `arguments` peut être utilisé en combinaison avec [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste), [les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) ou [les paramètres décomposés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition).
-<pre class="brush: js">function toto(...args) {
+```js
+function toto(...args) {
return args;
}
toto(1, 2, 3); // [1, 2, 3]
-</pre>
+```
-<p>Toutefois, pour les fonctions utilisées en mode non-strict, un<strong> objet <code>arguments</code></strong> n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a>, pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a> ou de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">paramètre décomposé</a>. Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :</p>
+Toutefois, pour les fonctions utilisées en mode non-strict, un **objet `arguments`** n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste), pas de [paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) ou de [paramètre décomposé](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition). Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :
-<pre class="brush: js">function truc(a=1) {
+```js
+function truc(a=1) {
arguments[0] = 100;
return a;
}
truc(10); // 10
-</pre>
+```
-<p>Si l'objet <code>arguments</code> est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">paramètres du reste</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">décomposition</a>, le résultat sera 100 :</p>
+Si l'objet `arguments` est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste), ni [paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments), ni [décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition), le résultat sera 100 :
-<pre class="brush: js">fonction truc(a) {
+```js
+fonction truc(a) {
arguments[0] = 100;
return a;
}
-truc(10); // 100</pre>
+truc(10); // 100
+```
-<p>En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet <code>arguments</code>. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans <code>arguments</code> et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'<code>arguments</code>. Par exemple</p>
+En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet `arguments`. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans `arguments` et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'`arguments`. Par exemple
-<pre class="brush: js">function func(a, b) {
+```js
+function func(a, b) {
arguments[0] = 99;
arguments[1] = 99;
console.log(a + " " +b);
}
func(1, 2); // 99 99
-</pre>
+```
-<p>ou encore :</p>
+ou encore :
-<pre class="brush: js">function func(a, b) {
+```js
+function func(a, b) {
a = 9;
b = 99;
console.log(arguments[0] + " " + arguments[1]);
}
func(3, 4); // 9 99
-</pre>
+```
-<p>En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :</p>
+En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :
-<pre class="brush: js">function func(a, b, c = 9) {
+```js
+function func(a, b, c = 9) {
arguments[0] = 99;
arguments[1] = 98;
console.log(a + " " + b);
}
func(3, 4); // 3 4
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- <tr>
- <td>{{SpecName('ES1')}}</td>
- <td>{{Spec2('ES1')}}</td>
- <td>Définition initiale. Implémentée par JavaScript 1.1</td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arguments")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Les paramètres du reste</a></li>
- <li><a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">Contraintes d'optimisations sous V8 en relation avec <code>arguments</code></a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- |
+| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} |   |
+| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}} |   |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- [Les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste)
+- [Contraintes d'optimisations sous V8 en relation avec `arguments`](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments)
diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.md b/files/fr/web/javascript/reference/functions/arguments/length/index.md
index 495b0e6f20..7deb32f457 100644
--- a/files/fr/web/javascript/reference/functions/arguments/length/index.md
+++ b/files/fr/web/javascript/reference/functions/arguments/length/index.md
@@ -10,82 +10,56 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/arguments/length
original_slug: Web/JavaScript/Reference/Fonctions/arguments/length
---
-<div>{{jsSideBar("Functions")}}</div>
+{{jsSideBar("Functions")}}
-<p>La propriété <strong><code>arguments.length</code></strong> contient le nombre d'arguments passés à la fonction.</p>
+La propriété **`arguments.length`** contient le nombre d'arguments passés à la fonction.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">arguments.length</pre>
+ arguments.length
-<h2 id="Description">Description</h2>
+## Description
-<p>La propriété <code>arguments.length</code> fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).</p>
+La propriété `arguments.length` fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).
-<h2 id="Exemple">Exemple</h2>
+## Exemple
-<h3 id="Utiliser_arguments.length">Utiliser <code>arguments.length</code></h3>
+### Utiliser `arguments.length`
-<p>Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.</p>
+Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.
-<pre class="brush: js">function somme(x /*, y, z, ...*/) {
+```js
+function somme(x /*, y, z, ...*/) {
x = Number(x);
- for (var i = 1; i &lt; arguments.length; i++) {
+ for (var i = 1; i < arguments.length; i++) {
x += Number(arguments[i]);
}
return x;
}
-</pre>
+```
-<pre class="brush: js">résultat = somme(3, 4, 5); // renvoie 12
+```js
+résultat = somme(3, 4, 5); // renvoie 12
résultat = somme(3, 4); // renvoie 7
résultat = somme(103, 104, 105); // renvoie 312
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> <code>arguments.length</code> ne doit pas être confondu avec {{jsxref("Function.length")}}.</p>
-</div>
-
-<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. Implémentée par JavaScript 1.1</td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-<p>{{Compat("javascript.functions.arguments.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Function.length")}}</li>
-</ul>
+```
+
+> **Note :** `arguments.length` ne doit pas être confondu avec {{jsxref("Function.length")}}.
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- |
+| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} |   |
+| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} |   |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments.length")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- {{jsxref("Function.length")}}
diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.md b/files/fr/web/javascript/reference/functions/arrow_functions/index.md
index 8beaaa3098..c40336f008 100644
--- a/files/fr/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.md
@@ -9,66 +9,62 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
original_slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>Une <strong>expression de fonction fléchée</strong> (<em>arrow function</em> en anglais) permet d’avoir une syntaxe plus courte que <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">les expressions de fonction</a> et ne possède pas ses propres valeurs pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/super">super</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target">new.target</a></code>. Les fonctions fléchées sont souvent <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/name">anonymes</a> et ne sont pas destinées à être utilisées pour déclarer des méthodes.</p>
+Une **expression de fonction fléchée** (_arrow function_ en anglais) permet d’avoir une syntaxe plus courte que [les expressions de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function) et ne possède pas ses propres valeurs pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/super), ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target). Les fonctions fléchées sont souvent [anonymes](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/name) et ne sont pas destinées à être utilisées pour déclarer des méthodes.
-<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">([param] [, param]) =&gt; {
- instructions
-}
+ ([param] [, param]) => {
+ instructions
+ }
-(param1, param2, …, param2) =&gt; expression
-// équivalent à
-(param1, param2, …, param2) =&gt; {
- return expression;
-}
+ (param1, param2, …, param2) => expression
+ // équivalent à
+ (param1, param2, …, param2) => {
+ return expression;
+ }
-// Parenthèses non nécessaires quand il n'y a qu'un seul argument
-param =&gt; expression
+ // Parenthèses non nécessaires quand il n'y a qu'un seul argument
+ param => expression
-// Une fonction sans paramètre peut s'écrire avec un couple
-// de parenthèses
-() =&gt; {
- instructions
-}
+ // Une fonction sans paramètre peut s'écrire avec un couple
+ // de parenthèses
+ () => {
+ instructions
+ }
-// Gestion des <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">paramètres du reste</a> et <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paramètres par défaut</a>
-(param1, param2, ...reste) =&gt; {
- instructions
-}
-(param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) =&gt; {
- instructions
-}
+ // Gestion des paramètres du reste et paramètres par défaut
+ (param1, param2, ...reste) => {
+ instructions
+ }
+ (param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) => {
+ instructions
+ }
-// Gestion de la décomposition pour la liste des paramètres
-let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
-f();
-</pre>
+ // Gestion de la décomposition pour la liste des paramètres
+ let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+ f();
-<dl>
- <dt><code>param</code></dt>
- <dd>Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses <code>()</code>. S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : <code>toto =&gt; 1</code>).</dd>
- <dt><code>instructions</code> ou <code>expression</code></dt>
- <dd>Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.</dd>
-</dl>
+- `param`
+ - : Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses `()`. S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : `toto => 1`).
+- `instructions` ou `expression`
+ - : Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.
-<h2 id="Description">Description</h2>
+## Description
-<p>Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de <code>this</code> spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).</p>
+Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).
-<div class="note">
-<p><strong>Note :</strong> Voir aussi l’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</p>
-</div>
+> **Note :** Voir aussi l’article sur les fonctions fléchées présent sur <https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees> (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)).
-<h3 id="Syntaxe_plus_courte">Syntaxe plus courte</h3>
+### Syntaxe plus courte
-<p>Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :</p>
+Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :
-<pre class="brush: js">var a = [
+```js
+var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
@@ -80,22 +76,22 @@ var a2 = a.map(function (s) { return s.length });
// [31, 30, 31, 31]
// Avec, on a quelque chose de plus concis
-var a3 = a.map( s =&gt; s.length);
-// [31, 30, 31, 31]</pre>
+var a3 = a.map( s => s.length);
+// [31, 30, 31, 31]
+```
-<h3 id="Pas_de_this_lié_à_la_fonction">Pas de <code>this</code> lié à la fonction</h3>
+### Pas de `this` lié à la fonction
-<p>Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :</p>
+Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :
-<ul>
- <li>un nouvel objet dans le cas d’un constructeur</li>
- <li><code>undefined</code> dans les appels de fonctions en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a></li>
- <li>l’objet courant si la fonction est appelée comme une méthode, etc.</li>
-</ul>
+- un nouvel objet dans le cas d’un constructeur
+- `undefined` dans les appels de fonctions en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+- l’objet courant si la fonction est appelée comme une méthode, etc.
-<p>Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.</p>
+Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.
-<pre class="brush: js">function Personne () {
+```js
+function Personne () {
// Le constructeur Personne() définit `this` comme lui-même.
this.age = 0;
@@ -107,11 +103,13 @@ var a3 = a.map( s =&gt; s.length);
}, 1000);
}
-var p = new Personne();</pre>
+var p = new Personne();
+```
-<p>Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de <code>this</code> à une autre variable :</p>
+Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable :
-<pre class="brush: js">function Personne () {
+```js
+function Personne () {
var that = this;
that.age = 0;
@@ -120,46 +118,52 @@ var p = new Personne();</pre>
// qui est le contexte souhaité
that.age++;
}, 1000);
-}</pre>
+}
+```
-<p>Autrement, on aurait pu utiliser une <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind">fonction de liaison</a> afin que la bonne valeur <code>this</code> soit passée à la fonction <code>grandir</code>.</p>
+Autrement, on aurait pu utiliser une [fonction de liaison](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind) afin que la bonne valeur `this` soit passée à la fonction `grandir`.
-<p>Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur <code>this</code> de leur contexte. Aussi, si le mot-clé <code>this</code> est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le <code>this</code> utilisé dans <code>setInterval</code> est le <code>this</code>de la portée de <code>Personne</code> :</p>
+Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur `this` de leur contexte. Aussi, si le mot-clé `this` est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le `this` utilisé dans `setInterval` est le `this`de la portée de `Personne` :
-<pre class="brush: js">function Personne () {
+```js
+function Personne () {
this.age = 0;
- setInterval(() =&gt; {
+ setInterval(() => {
this.age++;
// |this| fait bien référence à l'objet personne
}, 1000);
}
-var p = new Personne();</pre>
+var p = new Personne();
+```
-<h4 id="Liens_avec_le_mode_strict">Liens avec le mode strict</h4>
+#### Liens avec le mode strict
-<p>Ici <code>this</code> provient du contexte englobant, les règles du <a href="/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/Strict_mode">mode strict</a> sont donc ignorées pour ce qui concerne <code>this</code>.</p>
+Ici `this` provient du contexte englobant, les règles du [mode strict](/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/Strict_mode) sont donc ignorées pour ce qui concerne `this`.
-<pre class="brush: js">var f = () =&gt; {'use strict'; return this};
-f() === window; // ou l'objet global</pre>
+```js
+var f = () => {'use strict'; return this};
+f() === window; // ou l'objet global
+```
-<p>Le reste des règles du mode strict sont appliquées normalement.</p>
+Le reste des règles du mode strict sont appliquées normalement.
-<h4 id="Appel_via_jsxref(Function.prototype.call())_ou_jsxref(Function.prototype.apply())">Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}</h4>
+#### Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}
-<p>Étant donné que <code>this</code> provient du contexte englobant, si on invoque une fonction via la méthode <code>call</code> ou <code>apply</code>, cela ne passera que des arguments mais n’aura aucun effet sur <code>this</code> :</p>
+Étant donné que `this` provient du contexte englobant, si on invoque une fonction via la méthode `call` ou `apply`, cela ne passera que des arguments mais n’aura aucun effet sur `this` :
-<pre class="brush: js">var ajouter = {
+```js
+var ajouter = {
base: 1,
add : function (a) {
- var f = v =&gt; v + this.base;
+ var f = v => v + this.base;
return f(a);
},
addViaCall: function (a) {
- var f = v =&gt; v + this.base;
+ var f = v => v + this.base;
var b = {
base: 2
};
@@ -172,42 +176,47 @@ console.log(ajouter.add(1));
console.log(ajouter.addViaCall(1));
// Cela affichera toujours 2
-</pre>
+```
-<h4 id="Pas_de_liaison_pour_arguments">Pas de liaison pour <code>arguments</code></h4>
+#### Pas de liaison pour `arguments`
-<p>Les fonctions fléchées n’exposent pas d’objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> : <code>arguments.length</code>, <code>arguments[0]</code>, <code>arguments[1]</code>, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas <code>arguments</code> est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :</p>
+Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :
-<pre class="brush: js">var arguments = [1, 2, 3];
-var arr = () =&gt; arguments[0];
+```js
+var arguments = [1, 2, 3];
+var arr = () => arguments[0];
arr(); // 1
function toto () {
- var f = (i) =&gt; arguments[0] + i;
+ var f = (i) => arguments[0] + i;
// lien implicite avec arguments de toto
return f(2);
}
-toto(3); // 5</pre>
+toto(3); // 5
+```
-<p>Les fonctions fléchées n’ont donc pas leur propre objet <code>arguments</code>, mais dans la plupart des cas, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> représentent une bonne alternative :</p>
+Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative :
-<pre class="brush: js">function toto () {
- var f = (...args) =&gt; args[0];
+```js
+function toto () {
+ var f = (...args) => args[0];
return f(2);
}
-toto(1); // 2</pre>
+toto(1); // 2
+```
-<h4 id="Les_fonctions_fléchées_comme_méthodes">Les fonctions fléchées comme méthodes</h4>
+#### Les fonctions fléchées comme méthodes
-<p>Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point</p>
+Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point
-<pre class="brush: js">'use strict';
+```js
+'use strict';
var objet = {
i: 10,
- b: () =&gt; console.log(this.i, this),
+ b: () => console.log(this.i, this),
c: function() {
console.log(this.i, this);
}
@@ -217,95 +226,106 @@ objet.b();
// affiche undefined, Window (ou l'objet global de l'environnement)
objet.c();
-// affiche 10, Object {...}</pre>
+// affiche 10, Object {...}
+```
-<h4 id="Utiliser_prototype">Utiliser <code>prototype</code></h4>
+#### Utiliser `prototype`
-<p>Les fonctions fléchées ne possèdent pas de prototype :</p>
+Les fonctions fléchées ne possèdent pas de prototype :
-<pre class="brush: js">var Toto = () =&gt; {};
+```js
+var Toto = () => {};
console.log(Toto.prototype);
-</pre>
+```
-<h4 id="Utiliser_le_mot-clé_yield">Utiliser le mot-clé <code>yield</code></h4>
+#### Utiliser le mot-clé `yield`
-<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code> ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.</p>
+Le mot-clé [`yield`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield) ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.
-<h4 id="Utiliser_le_mot-clé_new">Utiliser le mot-clé <code>new</code></h4>
+#### Utiliser le mot-clé `new`
-<p>Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé <code>new</code>.</p>
+Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé `new`.
-<pre class="brush: js">var Toto = () =&gt; {};
+```js
+var Toto = () => {};
var toto = new Toto();
-// TypeError: Toto is not a constructor</pre>
+// TypeError: Toto is not a constructor
+```
-<h2 id="Gestion_du_corps_de_la_fonction">Gestion du corps de la fonction</h2>
+## Gestion du corps de la fonction
-<p>Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction <code>return</code>.</p>
+Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction `return`.
-<pre class="brush: js">// méthode concise, retour implicite
-var fonction = x =&gt; x * x;
+```js
+// méthode concise, retour implicite
+var fonction = x => x * x;
// bloc classique, retour explicite
-var fonction = (x, y) =&gt; { return x + y; }
-</pre>
+var fonction = (x, y) => { return x + y; }
+```
-<h2 id="Renvoyer_des_littéraux_objets">Renvoyer des littéraux objets</h2>
+## Renvoyer des littéraux objets
-<p>Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :</p>
+Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :
-<pre class="brush: js">// fonction() renverra undefined !
-var fonction = () =&gt; { toto: 1 };
+```js
+// fonction() renverra undefined !
+var fonction = () => { toto: 1 };
// SyntaxError
-var fonction2 = () =&gt; { toto: function () {} };
-</pre>
+var fonction2 = () => { toto: function () {} };
+```
-<p>En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :</p>
+En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :
-<pre class="brush: js">var fonction = () =&gt; ({ toto: 1 });</pre>
+```js
+var fonction = () => ({ toto: 1 });
+```
-<h2 id="Sauts_de_ligne">Sauts de ligne</h2>
+## Sauts de ligne
-<p>Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.</p>
+Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.
-<pre class="brush: js">var func = ()
- =&gt; 1; // SyntaxError: expected expression,
- // got '=&gt;'
-</pre>
+```js
+var func = ()
+ => 1; // SyntaxError: expected expression,
+ // got '=>'
+```
-<h2 id="Ordre_syntaxique">Ordre syntaxique</h2>
+## Ordre syntaxique
-<p>La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :</p>
+La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :
-<pre class="brush: js">let fonctionRappel;
+```js
+let fonctionRappel;
fonctionRappel = fonctionRappel || function () {};
// OK
-fonctionRappel = fonctionRappel || () =&gt; {};
+fonctionRappel = fonctionRappel || () => {};
// SyntaxError: invalid arrow-function arguments
-fonctionRappel = fonctionRappel || (() =&gt; {});
+fonctionRappel = fonctionRappel || (() => {});
// OK
-</pre>
+```
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<pre class="brush: js">// Une fonction fléchée vide renvoie undefined
-let vide = () =&gt; {};
+```js
+// Une fonction fléchée vide renvoie undefined
+let vide = () => {};
-(() =&gt; "tototruc")()
+(() => "tototruc")()
// exemple d'une fonction immédiatement
// invoquée (IIFE en anglais) qui renvoie
// "tototruc"
-var simple = a =&gt; a &gt; 15 ? 15 : a;
+var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10
-var complexe = (a, b) =&gt; {
- if (a &gt; b) {
+var complexe = (a, b) => {
+ if (a > b) {
return a;
} else {
return b;
@@ -314,61 +334,44 @@ var complexe = (a, b) =&gt; {
var arr = [5, 6, 13, 0, 1, 18, 23];
-var sum = arr.reduce((a, b) =&gt; a + b);
+var sum = arr.reduce((a, b) => a + b);
// 66
-var even = arr.filter(v =&gt; v % 2 == 0);
+var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]
-var double = arr.map(v =&gt; v * 2);
+var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]
// On peut aussi construire des chaînes
// de promesses plus concises
-promise.then(a =&gt; {
+promise.then(a => {
// ...
-}).then(b =&gt; {
+}).then(b => {
// ...
});
// Cela permet de visualiser les
// fonctions sans paramètres
-setTimeout( () =&gt; {
+setTimeout( () => {
console.log("Et voilà");
- setTimeout( () =&gt; {
+ setTimeout( () => {
console.log("ensuite…");
}, 1);
}, 1);
-</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-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arrow_functions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org">https ://tech.mozfr.org</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ES2015')}} | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ESDraft')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arrow_functions")}}
+
+## Voir aussi
+
+- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)).
diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.md b/files/fr/web/javascript/reference/functions/default_parameters/index.md
index abcdcae567..92a5187cf6 100644
--- a/files/fr/web/javascript/reference/functions/default_parameters/index.md
+++ b/files/fr/web/javascript/reference/functions/default_parameters/index.md
@@ -9,28 +9,26 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/Default_parameters
original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.</p>
+Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.
+{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+## Syntaxe
-<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
+ function [nom]([param1[ = valeurParDéfaut1 ][, ..., paramN[ = valeurParDéfautN ]]]) {
+ instructions
+ }
-<h2 id="Syntaxe">Syntaxe</h2>
+## Description
-<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[ = valeurParDéfaut1 ][, ..., <em>paramN</em>[ = valeurParDéfautN ]]]) {
- instructions
-}
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>En JavaScript, par défaut, la valeur des paramètres d'une fonction sera <code>undefined</code>. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.</p>
+En JavaScript, par défaut, la valeur des paramètres d'une fonction sera `undefined`. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.
-<p>Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait <code>undefined</code> et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre <code>b</code> n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé <code>undefined</code> dans la multiplication, la valeur retournée aurait été <code>NaN</code>. Aussi, dans la deuxième ligne du code, on prévoit ce cas :</p>
+Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait `undefined` et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre `b` n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé `undefined` dans la multiplication, la valeur retournée aurait été `NaN`. Aussi, dans la deuxième ligne du code, on prévoit ce cas :
-<pre class="brush: js">function multiplier(a, b) {
+```js
+function multiplier(a, b) {
var b = (typeof b !== 'undefined') ? b : 1;
return a * b;
@@ -39,26 +37,29 @@ original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_argume
multiplier(5, 2); // 10
multiplier(5, 1); // 5
multiplier(5); // 5
-</pre>
+```
-<p>Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :</p>
+Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :
-<pre class="brush: js">function multiplier(a, b = 1) {
+```js
+function multiplier(a, b = 1) {
return a * b;
}
multiplier(5, 2); // 10
multiplier(5, 1); // 5
multiplier(5, undefined); // 5
-multiplier(5); // 5</pre>
+multiplier(5); // 5
+```
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Passer_undefined_en_paramètre">Passer <code>undefined</code> en paramètre</h3>
+### Passer `undefined` en paramètre
-<p>Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à <code>undefined</code>. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour <code>null</code> ou les autres valeurs équivalentes à <code>false</code> dans un contexte booléen).</p>
+Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à `undefined`. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour `null` ou les autres valeurs équivalentes à `false` dans un contexte booléen).
-<pre class="brush: js">function test(num = 1) {
+```js
+function test(num = 1) {
console.log(typeof num);
}
@@ -66,38 +67,40 @@ test(); // number (num vaut 1)
test(undefined); // number (num vaut 1 également)
test(""); // string (num vaut "")
test(null); // object (num vaut null)
-</pre>
+```
-<h3 id="Évaluation_à_l'appel">Évaluation à l'appel</h3>
+### Évaluation à l'appel
-<p>L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.</p>
+L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.
-<pre class="brush: js">function append(valeur, tableau = []) {
+```js
+function append(valeur, tableau = []) {
tableau.push(valeur);
return tableau;
}
append(1); //[1]
append(2); //[2], et non [1, 2]
+```
-</pre>
+Cela est également valable pour les fonctions et les variables
-<p>Cela est également valable pour les fonctions et les variables</p>
-
-<pre class="brush: js">function appelQqc(truc = qqc()) { return truc }
+```js
+function appelQqc(truc = qqc()) { return truc }
appelQqc(); //lève une ReferenceError
-let qqc = () =&gt; "machin"
+let qqc = () => "machin"
appelQqc(); // "machin"
-</pre>
+```
-<h3 id="Les_paramètres_par_défaut_sont_disponibles_à_la_suite">Les paramètres par défaut sont disponibles à la suite</h3>
+### Les paramètres par défaut sont disponibles à la suite
-<p>Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :</p>
+Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :
-<pre class="brush: js">function salutation(nom, salut, message = salut + ' ' + nom){
+```js
+function salutation(nom, salut, message = salut + ' ' + nom){
return [nom, salut, message];
}
@@ -105,11 +108,13 @@ salutation('David', 'Coucou');
// ["David", "Coucou", "Coucou David"]
salutation('David', 'Coucou', 'Bon anniversaire !');
-// ["David", "Coucou", "Bon anniversaire !"]</pre>
+// ["David", "Coucou", "Bon anniversaire !"]
+```
-<p>On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :</p>
+On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :
-<pre class="brush: js">function go() {
+```js
+function go() {
return ":P"
}
@@ -144,68 +149,55 @@ avecDéfaut.call({value:"=^_^="});
sansDéfaut.call({value:"=^_^="});
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-</pre>
+```
-<h3 id="Les_fonctions_définies_dans_le_corps_d'une_fonction">Les fonctions définies dans le corps d'une fonction</h3>
+### Les fonctions définies dans le corps d'une fonction
-<p>À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.</p>
+À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.
-<pre class="brush: js">// Ne fonctionnera pas, entraîne une ReferenceError.
+```js
+// Ne fonctionnera pas, entraîne une ReferenceError.
function f(a = go()) {
function go(){return ":P"}
}
-</pre>
+```
-<h3 id="Utilisation_de_paramètres_sans_valeur_par_défaut_après_les_paramètres_par_défaut">Utilisation de paramètres sans valeur par défaut après les paramètres par défaut</h3>
+### Utilisation de paramètres sans valeur par défaut après les paramètres par défaut
-<p>Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :</p>
+Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :
-<pre class="brush: js">function f(x=1, y) {
+```js
+function f(x=1, y) {
return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]
-</pre>
+```
-<h3 id="Paramètre_par_défaut_et_décomposition_des_paramètres">Paramètre par défaut et décomposition des paramètres</h3>
+### Paramètre par défaut et décomposition des paramètres
-<p>Il est possible d'utiliser les valeurs par défaut avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">la syntaxe de décomposition</a> :</p>
+Il est possible d'utiliser les valeurs par défaut avec [la syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition) :
-<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+```js
+function f([x, y] = [1, 2], {z: z} = {z: 3}) {
return x + y + z;
}
-f(); // 6</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-function-definitions', 'Function Definitions')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.default_parameters")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">La proposition originale sur ecmascript.org</a></li>
-</ul>
+f(); // 6
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ES2015')}} | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ESDraft')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.default_parameters")}}
+
+## Voir aussi
+
+- [La proposition originale sur ecmascript.org](https://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values)
diff --git a/files/fr/web/javascript/reference/functions/get/index.md b/files/fr/web/javascript/reference/functions/get/index.md
index b999d2d36a..76fa285ff7 100644
--- a/files/fr/web/javascript/reference/functions/get/index.md
+++ b/files/fr/web/javascript/reference/functions/get/index.md
@@ -10,49 +10,46 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/get
original_slug: Web/JavaScript/Reference/Fonctions/get
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>La syntaxe <strong><code>get</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.</p>
+La syntaxe **`get`** permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.
-<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">{get <em>prop</em>() { ... } }
-{get [<em>expression</em>]() { ... } }</pre>
+ {get prop() { ... } }
+ {get [expression]() { ... } }
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété à lier à la fonction.</dd>
- <dt><code>expression</code></dt>
- <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.</dd>
-</dl>
+- `prop`
+ - : Le nom de la propriété à lier à la fonction.
+- `expression`
+ - : Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
-<h2 id="Description">Description</h2>
+## Description
-<p>Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un <em>accesseur</em>. Il n'est pas possible d'avoir simultanément un <em>accesseur</em> assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un <em>accesseur</em> et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.</p>
+Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un _accesseur_. Il n'est pas possible d'avoir simultanément un _accesseur_ assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un _accesseur_ et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.
-<p>On notera que l'opérateur <code>get</code> :</p>
+On notera que l'opérateur `get` :
-<ul>
- <li>peut être identifié par un nombre ou une chaîne de caractères</li>
- <li>ne doit pas posséder de paramètre (lire la page <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Changement <abbr title="ECMAScript 5th edition">ES5</abbr> : les fonctions <em>d'accession</em> et <em>de mutation</em> littérales doivent avoir maintenant zéro ou un paramètre.</a> <em>(en anglais)</em> pour plus d'informations)</li>
- <li>ne doit pas apparaître dans un littéral objet avec un autre <code>get</code> ou une autre propriété avec le même identifiant (les codes suivants : <code>{ get x() { }, get x() { } }</code> et <code>{ x: ..., get x() { } }</code> sont interdits).</li>
-</ul>
+- peut être identifié par un nombre ou une chaîne de caractères
+- ne doit pas posséder de paramètre (lire la page [Changement ES5 : les fonctions _d'accession_ et _de mutation_ littérales doivent avoir maintenant zéro ou un paramètre.](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) _(en anglais)_ pour plus d'informations)
+- ne doit pas apparaître dans un littéral objet avec un autre `get` ou une autre propriété avec le même identifiant (les codes suivants : `{ get x() { }, get x() { } }` et `{ x: ..., get x() { } }` sont interdits).
-<p>Un <em>accesseur</em> peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
+Un _accesseur_ peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Définir_un_accesseur_avec_l'opérateur_get">Définir un accesseur avec l'opérateur <code>get</code></h3>
+### Définir un accesseur avec l'opérateur `get`
-<p>Ce code va créer une pseudo-propriété <code>dernier</code> de l'objet <code>o</code> qui va retourner la dernière entrée du tableau <code>o.journal </code>:</p>
+Ce code va créer une pseudo-propriété `dernier` de l'objet `o` qui va retourner la dernière entrée du tableau `o.journal `:
-<pre class="brush: js">var o = {
+```js
+var o = {
get dernier() {
- if (this.journal.length &gt; 0) {
+ if (this.journal.length > 0) {
return this.journal[this.journal.length - 1];
}
else {
@@ -62,65 +59,71 @@ original_slug: Web/JavaScript/Reference/Fonctions/get
journal: ["toto","actu"]
}
console.log(o.dernier); // "actu"
-</pre>
+```
-<p>Notez qu'essayer d'assigner à <code>dernier</code> une valeur ne le modifiera pas.</p>
+Notez qu'essayer d'assigner à `dernier` une valeur ne le modifiera pas.
-<h3 id="Supprimer_un_accesseur_avec_l'opérateur_delete">Supprimer un accesseur avec l'opérateur <code>delete</code></h3>
+### Supprimer un accesseur avec l'opérateur `delete`
-<pre class="brush: js">delete o.dernier;
-</pre>
+```js
+delete o.dernier;
+```
-<h3 id="Définir_un_accesseur_sur_des_objets_existants_grâce_à_defineProperty">Définir un accesseur sur des objets existants grâce à <code>defineProperty</code></h3>
+### Définir un accesseur sur des objets existants grâce à `defineProperty`
-<p>Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p>
+Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.
-<pre class="brush: js">var o = { a:0 }
+```js
+var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
-console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)</pre>
+console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
+```
-<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
+### Utiliser un nom de propriété calculé
-<pre class="brush: js">var expr = "toto";
+```js
+var expr = "toto";
var obj = {
get [expr]() { return "truc"; }
};
-console.log(obj.toto); // "truc"</pre>
+console.log(obj.toto); // "truc"
+```
-<h3 id="Accesseurs_mémoïsés">Accesseurs mémoïsés</h3>
+### Accesseurs mémoïsés
-<p>Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).</p>
+Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).
-<p>Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser <strong>des accesseurs intelligents « <a href="https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation">mémoïsés</a> »</strong>. La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :</p>
+Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser **des accesseurs intelligents « [mémoïsés](https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation) »**. La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :
-<ul>
- <li>Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux <em>threads</em>, il utilise des fichiers distants, etc.).</li>
- <li>Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.</li>
- <li>Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.</li>
-</ul>
+- Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux _threads_, il utilise des fichiers distants, etc.).
+- Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.
+- Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.
-<p>Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.</p>
+Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.
-<p>Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :</p>
+Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :
-<pre class="brush: js">get notifier() {
+```js
+get notifier() {
delete this.notifier;
return this.notifier = document.getElementById("bookmarked-notification-anchor");
-},</pre>
+},
+```
-<p>Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction <code><a href="/fr/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
+Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction [`defineLazyGetter()`](</fr/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()>).
-<h3 id="get_ou_defineProperty"><code>get</code> ou <code>defineProperty</code> ?</h3>
+### `get` ou `defineProperty` ?
-<p>Bien que le mot-clé <code>get</code> et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">les classes</a>.</p>
+Bien que le mot-clé `get` et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise [les classes](/fr/docs/Web/JavaScript/Reference/Instructions/class).
-<p>Lorsqu'on utilise <code>get</code>, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.</p>
+Lorsqu'on utilise `get`, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.
-<pre class="brush: js">class Exemple {
+```js
+class Exemple {
get coucou() {
return 'monde';
}
@@ -132,46 +135,26 @@ console.log(obj.coucou);
console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
// undefined
console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
-// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }</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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td>Définition initiale</td>
- </tr>
- <tr>
- <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Ajout des noms de propriétés calculés.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code></li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
- <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et mutateurs</a>, un chapitre du Guide JavaScript</li>
-</ul>
+// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------------- |
+| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | Définition initiale |
+| {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}} | Ajout des noms de propriétés calculés. |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.get")}}
+
+## Voir aussi
+
+- [`set`](/fr/docs/Web/JavaScript/Reference/Fonctions/set)
+- {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineGetter", "__defineGetter__")}}
+- {{jsxref("Object.defineSetter", "__defineSetter__")}}
+- [Définir des accesseurs et mutateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters), un chapitre du Guide JavaScript
diff --git a/files/fr/web/javascript/reference/functions/index.md b/files/fr/web/javascript/reference/functions/index.md
index cfdd7e95b1..90e9f5aa72 100644
--- a/files/fr/web/javascript/reference/functions/index.md
+++ b/files/fr/web/javascript/reference/functions/index.md
@@ -8,23 +8,24 @@ tags:
translation_of: Web/JavaScript/Reference/Functions
original_slug: Web/JavaScript/Reference/Fonctions
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le <em>corps de la fonction</em>. Il est parfois possible de <em>passer</em> des valeurs à une fonction et une fonction peut éventuellement <em>retourner </em>(ou <em>renvoyer</em>) une valeur.</p>
+De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le _corps de la fonction_. Il est parfois possible de _passer_ des valeurs à une fonction et une fonction peut éventuellement _retourner_ (ou _renvoyer_) une valeur.
-<p>En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.</p>
+En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.
-<p>Pour plus d'informations et d'exemples, on pourra également consulter le <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">chapitre du Guide JavaScript sur les fonctions.</a></p>
+Pour plus d'informations et d'exemples, on pourra également consulter le [chapitre du Guide JavaScript sur les fonctions.](/fr/docs/Web/JavaScript/Guide/Fonctions)
-<h2 id="Description">Description</h2>
+## Description
-<p>Toute fonction JavaScript est en fait un objet <code>Function</code>. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.</p>
+Toute fonction JavaScript est en fait un objet `Function`. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.
-<p>Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor">constructeur</a> qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.</p>
+Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un [constructeur](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor) qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.
-<p>Les paramètres donnés lors de l'appel d'une fonction sont appelés les <em>arguments</em> de la fonction. Les arguments sont passés <em>par valeur</em> (<em>by value </em>en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les <em>références</em> d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :</p>
+Les paramètres donnés lors de l'appel d'une fonction sont appelés les _arguments_ de la fonction. Les arguments sont passés _par valeur_ (_by value_ en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les _références_ d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :
-<pre class="brush: js"> /* Déclaration de la fonction 'maFonction' */
+```js
+ /* Déclaration de la fonction 'maFonction' */
function maFonction(monObjet)
{
monObjet.marque = "Toyota";
@@ -52,268 +53,249 @@ original_slug: Web/JavaScript/Reference/Fonctions
* de l'objet. C'est ce que la fonction a changé.
*/
console.log(mavoiture.marque);
-</pre>
+```
-<p>Le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this"><code>this</code></a> ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets <code>Function</code> par leurs noms, et ce même au sein du corps de la fonction.</p>
+Le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets `Function` par leurs noms, et ce même au sein du corps de la fonction.
-<h2 id="Définir_des_fonctions">Définir des fonctions</h2>
+## Définir des fonctions
-<p>Il y a plusieurs façons de définir des fonctions</p>
+Il y a plusieurs façons de définir des fonctions
-<h3 id="Déclarer_une_fonction_linstruction_function">Déclarer une fonction (l'instruction <code>function</code>)</h3>
+### Déclarer une fonction (l'instruction `function`)
-<p>Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :</p>
+Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :
-<pre class="syntaxbox">function <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
- <em>instructions</em>
-}
-</pre>
+ function nom([param[, param[, ... param]]]) {
+ instructions
+ }
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
+- `nom`
+ - : Le nom de la fonction.
+- `param`
+ - : Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).
+- `instructions`
+ - : Les instructions qui forment le corps de la fonction.
-<h3 id="Utiliser_une_expression_de_fonction_lexpression_function">Utiliser une expression de fonction (l'expression <code>function</code>)</h3>
+### Utiliser une expression de fonction (l'expression `function`)
-<p>L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :</p>
+L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :
-<pre class="syntaxbox">function [<em>nom</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
- <em>instructions</em>
-}
-</pre>
+ function [nom]([param] [, param] [..., param]) {
+ instructions
+ }
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
+- `nom`
+ - : Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.
+- `param`
+ - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+ - : Les instructions qui forment le corps de la fonction.
-<p>Voici un exemple d'expression de fonction <strong>anonyme</strong> (il n'y a pas de nom utilisé) :</p>
+Voici un exemple d'expression de fonction **anonyme** (il n'y a pas de nom utilisé) :
-<pre class="brush: js">var maFonction = function() {
+```js
+var maFonction = function() {
/* instructions */
-}</pre>
+}
+```
-<p>Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction <strong>nommée</strong> :</p>
+Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** :
-<pre class="brush: js">var maFonction = function fonctionNommée(){
+```js
+var maFonction = function fonctionNommée(){
/* instructions */
}
-</pre>
+```
-<p>L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.</p>
+L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.
-<p>Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé <code>function</code>. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec <code>function</code> sont des expressions de fonction.</p>
+Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé `function`. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec `function` sont des expressions de fonction.
-<p>Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une <a href="/fr/docs/Glossaire/IIFE">« expression de fonction immédiatement invoquée » (ou plus généralement appelée <em>IIFE</em> pour <em>Immediately Invokable Function Expression</em> en anglais)</a>.</p>
+Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une [« expression de fonction immédiatement invoquée » (ou plus généralement appelée _IIFE_ pour _Immediately Invokable Function Expression_ en anglais)](/fr/docs/Glossaire/IIFE).
-<pre class="brush: js">(function() {
+```js
+(function() {
/* instruction */
-})();</pre>
+})();
+```
-<p>Les <em>IIFE</em> sont des expressions de fonction appelées dès que la fonction est déclarée.</p>
+Les _IIFE_ sont des expressions de fonction appelées dès que la fonction est déclarée.
-<h3 id="Utiliser_une_déclaration_de_fonction_génératrice_linstruction_function*">Utiliser une déclaration de fonction génératrice (l'instruction <code>function*</code>)</h3>
+### Utiliser une déclaration de fonction génératrice (l'instruction `function*`)
-<p>Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :</p>
+Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :
-<pre class="syntaxbox">function* <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}</pre>
+ function* nom([param[, param[, ... param]]]) {
+    instructions
+ }
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
+- `nom`
+ - : Le nom de la fonction.
+- `param`
+ - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+ - : Les instructions qui forment le corps de la fonction.
-<h3 id="Utiliser_une_expression_de_générateur_lexpression_function*">Utiliser une expression de générateur (l'expression <code>function*</code>)</h3>
+### Utiliser une expression de générateur (l'expression `function*`)
-<p>Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :</p>
+Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :
-<pre class="syntaxbox">function* [<em>nom</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}</pre>
+ function* [nom]([param[, param[, ... param]]]) {
+    instructions
+ }
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.</dd>
- <dt><code>param</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>
+- `nom`
+ - : Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.
+- `param`
+ - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+ - : Les instructions qui composent le corps de la fonction.
-<h3 id="Utiliser_une_expression_de_fonction_fléchée_>">Utiliser une expression de fonction fléchée (=&gt;)</h3>
+### Utiliser une expression de fonction fléchée (=>)
-<p>Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour plus de détails) :</p>
+Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) pour plus de détails) :
-<pre class="syntaxbox">([param[, param]]) =&gt; {
- instructions
-}
+ ([param[, param]]) => {
+ instructions
+ }
-param =&gt; expression
-</pre>
+ param => expression
-<dl>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par <code>()</code>.  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  <code>toto =&gt; 1</code>).</dd>
- <dt><code>instructions </code>ou<code> expression</code></dt>
- <dd>S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.</dd>
-</dl>
+- `param`
+ - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`.  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  `toto => 1`).
+- `instructions `ou` expression`
+ - : S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.
-<h3 id="Le_constructeur_Function">Le constructeur <code>Function</code></h3>
+### Le constructeur `Function`
-<div class="note">
-<p><strong>Note :</strong> L'utilisation du constructeur <code>Function</code> afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
-</div>
+> **Note :** L'utilisation du constructeur `Function` afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.
-<p>Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
+Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur `new` :
-<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsDeLaFonction</em>)
-</pre>
+ new Function (arg1, arg2, ... argN, corpsDeLaFonction)
-<dl>
- <dt><code>arg1, arg2, ... argN</code></dt>
- <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>laValeur</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsDeLaFonction</code></dt>
- <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
-</dl>
+- `arg1, arg2, ... argN`
+ - : Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "`x`", "`laValeur`", ou "`a,b`".
+- `corpsDeLaFonction`
+ - : Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
-<p>L'invocation du constructeur <code>Function</code> en tant que fonction (sans utiliser l'opérateur <code>new</code>) a le même effet que son invocation en tant que constructeur.</p>
+L'invocation du constructeur `Function` en tant que fonction (sans utiliser l'opérateur `new`) a le même effet que son invocation en tant que constructeur.
-<h3 id="Le_constructeur_GeneratorFunction">Le constructeur <code>GeneratorFunction</code></h3>
+### Le constructeur `GeneratorFunction`
-<div class="note">
-<p><strong>Note :</strong> <code>GeneratorFunction</code> n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).</p>
-</div>
+> **Note :** `GeneratorFunction` n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).
-<div class="note">
-<p><strong>Note :</strong> Le constructeur <code>GeneratorFunction</code> ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
-</div>
+> **Note :** Le constructeur `GeneratorFunction` ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.
-<p>Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
+Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur `new` :
-<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsFonction</em>)</pre>
+ new GeneratorFunction (arg1, arg2, ... argN, corpsFonction)
-<dl>
- <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
- <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>theValue</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsFonction</code></dt>
- <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
-</dl>
+- `arg1, arg2, ... argN`
+ - : Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "`x`", "`theValue`", ou "`a,b`".
+- `corpsFonction`
+ - : Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
-<h2 id="Les_paramètres_dune_fonction">Les paramètres d'une fonction</h2>
+## Les paramètres d'une fonction
-<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3>
+### Les paramètres par défaut
-<p>Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent <code>undefined</code>. Pour plus de détails, voir la page de la référence sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a>.</p>
+Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent `undefined`. Pour plus de détails, voir la page de la référence sur [les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments).
-<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3>
+### Les paramètres du reste
-<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">les paramètres du reste</a>.</p>
+Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste).
-<h2 id="Lobjet_arguments">L'objet <code>arguments</code></h2>
+## L'objet `arguments`
-<p>Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet <code>arguments</code>. Consulter la page <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a> pour plus d'informations.</p>
+Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet `arguments`. Consulter la page [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) pour plus d'informations.
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}} : La fonction en cours d'exécution.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length">arguments.length</a></code> : Le nombre d'arguments passés à la fonction.</li>
-</ul>
+- [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.
+- [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee) {{Deprecated_inline}} : La fonction en cours d'exécution.
+- [`arguments.caller`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/caller) {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.
+- [`arguments.length`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length) : Le nombre d'arguments passés à la fonction.
-<h2 id="Récursion">Récursion</h2>
+## Récursion
-<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :</p>
+Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :
-<ol>
- <li>le nom de la fonction</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li>
- <li>une variable interne faisant référence à la fonction</li>
-</ol>
+1. le nom de la fonction
+2. [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee)
+3. une variable interne faisant référence à la fonction
-<p>Avec l'exemple suivant :</p>
+Avec l'exemple suivant :
-<pre class="brush: js">var truc = function toto() {
+```js
+var truc = function toto() {
// instructions
};
-</pre>
+```
-<p>Ce qui suit sera équivalent au sein de la fonction :</p>
+Ce qui suit sera équivalent au sein de la fonction :
-<ol>
- <li><code>toto()</code></li>
- <li><code>arguments.callee()</code></li>
- <li><code>truc()</code></li>
-</ol>
+1. `toto()`
+2. `arguments.callee()`
+3. `truc()`
-<p>Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :</p>
+Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :
-<pre class="brush: js">var x = 0;
-// "x &lt; 10" est la condition de la boucle
-while (x &lt; 10) {
+```js
+var x = 0;
+// "x < 10" est la condition de la boucle
+while (x < 10) {
// faire des choses
x++;
}
-</pre>
+```
-<p>peut être convertie en une fonction récursive et un appel à cette fonction :</p>
+peut être convertie en une fonction récursive et un appel à cette fonction :
-<pre class="brush: js">function boucle(x) {
- // "x &gt;= 10" est la condition de sortie
- // (et équivaut à "!(x &lt; 10)")
- if (x &gt;= 10)
+```js
+function boucle(x) {
+ // "x >= 10" est la condition de sortie
+ // (et équivaut à "!(x < 10)")
+ if (x >= 10)
return;
// faire des choses
boucle(x + 1); // l'appel récursif
}
boucle(0);
-</pre>
+```
-<p>Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.</p>
+Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.
-<pre class="brush: js">function parcoursArbre(noeud) {
+```js
+function parcoursArbre(noeud) {
if (noeud == null) //
return;
// faire quelque chose avec le noeud
- for (var i = 0; i &lt; noeud.childNodes.length; i++) {
+ for (var i = 0; i < noeud.childNodes.length; i++) {
parcoursArbre(noeud.childNodes[i]);
}
}
-</pre>
+```
-<p>Par rapport à la fonction <code>boucle</code>, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.</p>
+Par rapport à la fonction `boucle`, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.
-<p>Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.</p>
+Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.
-<p>La comportement de la récursion en tant que pile peut être observée avec cet exemple :</p>
+La comportement de la récursion en tant que pile peut être observée avec cet exemple :
-<pre class="brush: js">function truc(i) {
- if (i &lt; 0)
+```js
+function truc(i) {
+ if (i < 0)
return;
console.log('début :' + i);
toto(i - 1);
console.log('fin :' + i);
}
truc(3);
-</pre>
+```
-<p>Elle produira le résultat suivant :</p>
+Elle produira le résultat suivant :
-<pre class="brush: js">début :3
+```js
+début :3
début :2
début :1
début :0
@@ -321,29 +303,28 @@ fin :0
fin :1
fin :2
fin :3
-</pre>
+```
-<h2 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h2>
+## Fonctions imbriquées et fermetures
-<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (<em>closure</em> en anglais).</p>
+Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (_closure_ en anglais).
-<p>Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).</p>
+Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).
-<p>Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.</p>
+Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.
-<p>Pour résumer :</p>
+Pour résumer :
-<ul>
- <li>on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,</li>
-</ul>
+- on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,
-<ul>
- <li>la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.</li>
-</ul>
+<!---->
-<p>L'exemple suivant, montre le cas de fonctions imbriquées :</p>
+- la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.
-<pre class="brush: js">function ajouteCarres(a,b) {
+L'exemple suivant, montre le cas de fonctions imbriquées :
+
+```js
+function ajouteCarres(a,b) {
function carre(x) {
return x * x;
}
@@ -352,11 +333,12 @@ fin :3
var a = ajouteCarres(2,3); // renvoie 13
var b = ajouteCarres(3,4); // renvoie 25
var c = ajouteCarres(4,5); // renvoie 41
-</pre>
+```
-<p>Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :</p>
+Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :
-<pre class="brush: js">function externe(x) {
+```js
+function externe(x) {
function interne(y) {
return x + y;
}
@@ -366,21 +348,22 @@ var fn_interne = externe(3);
var resultat = fn_interne(5); // renvoie 8
var resultat1 = externe(3)(5); // renvoie 8
-</pre>
+```
-<h3 id="Conservation_des_variables">Conservation des variables</h3>
+### Conservation des variables
-<p>On voit alors que <code>x</code> est conservé lorsqu'<code>interne</code> est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque <code>inside</code> n'est plus accessible.</p>
+On voit alors que `x` est conservé lorsqu'`interne` est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque `inside` n'est plus accessible.
-<p>Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.</p>
+Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.
-<h3 id="Imbrication_multiple_de_fonctions">Imbrication multiple de fonctions</h3>
+### Imbrication multiple de fonctions
-<p>On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (<em>scope chaining</em> en anglais). (Cette dénomination sera expliquée par la suite.)</p>
+On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.)
-<p>On peut l'observer avec l'exemple suivant :</p>
+On peut l'observer avec l'exemple suivant :
-<pre class="brush: js">function A(x) {
+```js
+function A(x) {
function B(y) {
function C(z) {
console.log(x + y + z);
@@ -390,23 +373,22 @@ var resultat1 = externe(3)(5); // renvoie 8
B(2);
}
A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
-</pre>
+```
-<p>Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :</p>
+Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :
-<ol>
- <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code></li>
- <li><code>C</code> est une fermeture qui contient <code>B</code></li>
- <li>Étant donné que la fermeture de <code>B</code> contient <code>A</code> et que celle de <code>C</code> contient <code>B</code>, <code>C</code> peut accéder à la fois aux arguments et variables de <code>B</code> <em>et</em> <code>A</code>. Autrement dit, <code>C</code> <em>enchaîne les portées de </em> <code>B</code> et <code>A</code> dans cet ordre.</li>
-</ol>
+1. `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A`
+2. `C` est une fermeture qui contient `B`
+3. Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de*  `B` et `A` dans cet ordre.
-<p>La réciproque n'est pas vraie. <code>A</code> ne peut avoir accès à <code>C</code>, parce que <code>A</code> ne peut accéder ni aux variables ni aux arguments de <code>B</code>, or <code>C</code> est une variable de <code>B. C</code> est donc privé et seulement pour <code>B</code>.</p>
+La réciproque n'est pas vraie. `A` ne peut avoir accès à `C`, parce que `A` ne peut accéder ni aux variables ni aux arguments de `B`, or `C` est une variable de `B. C` est donc privé et seulement pour `B`.
-<h3 id="Conflits_de_noms">Conflits de noms</h3>
+### Conflits de noms
-<p>Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un <em>conflit de noms</em>. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (<em>scope chain</em> en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :</p>
+Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un _conflit de noms_. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (_scope chain_ en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :
-<pre class="brush: js">function externe() {
+```js
+function externe() {
var x = 10;
function interne(x) {
return x;
@@ -414,275 +396,292 @@ A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
return interne;
}
resultat = externe()(20); // renvoie 20 et non pas 10
-</pre>
+```
-<p>Le conflit de nom apparaît avec l'instruction <code>return x</code> et vient de la dénomination commune de l'argument <code>x </code>de la fonction<code> interne</code> et la variable <code>x </code>de la fonction <code>externe</code>. La chaîne de portée est, pour cet exemple : {<code>interne</code>, <code>externe</code>, objet globalt}. On voit alors que le  <code>x</code> de la fonction interne l'emporte sur le <code>x </code>de la fonction externe. 20 (<code>x</code> de la fonction <code>interne</code>) est donc renvoyé plutôt que 10 (<code>x</code> de la fonction <code>externe</code>).</p>
+Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x `de la fonction` interne` et la variable `x `de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le  `x` de la fonction interne l'emporte sur le `x `de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`).
-<h2 id="Définition_des_méthodes">Définition des méthodes</h2>
+## Définition des méthodes
-<h3 id="Les_accesseurs_et_mutateurs_getter_et_setter">Les accesseurs et mutateurs (<em>getter</em> et <em>setter</em>)</h3>
+### Les accesseurs et mutateurs (_getter_ et _setter_)
-<p>Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les <em>getters</em> et <em>setters</em> est celle utilisée avec les littéraux objets.</p>
+Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les _getters_ et _setters_ est celle utilisée avec les littéraux objets.
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></dt>
- <dd>
- <p>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.</p>
- </dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></dt>
- <dd>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.</dd>
-</dl>
+- [get](/fr/docs/Web/JavaScript/Reference/Fonctions/get)
+ - : Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.
+- [set](/fr/docs/Web/JavaScript/Reference/Fonctions/set)
+ - : Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.
-<h3 id="Syntaxe_des_définitions_de_méthode_ECMAScript_2015">Syntaxe des définitions de méthode ECMAScript <strong>2015</strong></h3>
+### Syntaxe des définitions de méthode ECMAScript **2015**
-<p>Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">les définitions de méthodes</a> pour plus d'informations.</p>
+Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur [les définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode) pour plus d'informations.
-<pre class="brush: js">var obj = {
+```js
+var obj = {
toto() {},
  truc() {}
-};</pre>
+};
+```
-<h2 id="Constructeur_déclaration_expression">Constructeur, déclaration, expression ?</h2>
+## Constructeur, déclaration, expression ?
-<p>Comparons les exemples suivants :</p>
+Comparons les exemples suivants :
-<ol>
- <li>une fonction définie grâce au constructeur <code>Function</code> assignée à la variable <code>multiplier</code>
+1. une fonction définie grâce au constructeur `Function` assignée à la variable `multiplier`
- <pre class="brush: js">var multiplier = new Function("x", "y", "return x * y;");
-</pre>
- </li>
- <li>une déclaration de fonction d'une fonction appelée <code>multiplier</code>
- <pre class="brush: js">function multiplier(x, y) {
- return x * y;
-}
-</pre>
- </li>
- <li>une expression de fonction d'une fonction anonyme assignée à la variable <code>multiplier</code>
- <pre class="brush: js">var multiplier = function(x, y) {
- return x * y;
-};
-</pre>
- </li>
- <li>une expression de fonction d'une fonction nommée <code>fonction_nom</code> assignée à la variable <code>multiplier</code>
- <pre class="brush: js">var multiplier = function function_nom(x, y) {
- return x * y;
-};
-</pre>
- </li>
-</ol>
-
-<p>Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :</p>
-
-<ul>
- <li>Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée :
- <ul>
- <li>le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.</li>
- <li>le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou <code>undefined</code> si le nom de la fonction a été déclaré auparavant avec une instruction <code>var</code>). Ainsi :
- <pre class="brush: js">var y = function x() {};
-console.log(x); // renvoie une erreur
-</pre>
-
- <p>Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Function/toString">méthode toString de l'objet <code>Function</code></a>.</p>
-
- <p>La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.</p>
- </li>
- <li>Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.</li>
- </ul>
- </li>
- <li>Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie :
- <pre class="brush: js">function x() {}
-console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
-</pre>
-
- <p>L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :</p>
-
- <pre class="brush: js">function toto() {}
-console.log(toto); // message affichant la chaine de caractères "toto"
-var truc = toto;
-console.log(truc); // message affichant la chaine de caractères "toto"
-</pre>
- </li>
- <li>Une fonction définie grâce à « <code>new Function »</code> n'aura pas de nom de fonction. Cependant, le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code <code>console.log(new Function())</code> produira :
- <pre class="brush: js">function anonymous() {
-}
-</pre>
-
- <p>La fonction n'ayant pas de nom effectif, <code>anonymous</code> n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :</p>
-
- <pre class="brush: js">var toto = new Function("console.log(anonymous);");
-toto();
-</pre>
- </li>
- <li>À la différence des fonctions définies par les expressions de fonction ou par le constructeur <code>Function</code>, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi :
- <pre class="brush: js">toto(); // affichera TOTO !
-function toto() {
- console.log('TOTO !');
-}
-</pre>
- </li>
- <li>Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur <code>Function</code> n'héritent que de la portée globale (portée héritée par toutes les fonctions).</li>
- <li>Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur <code>Function</code> ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « <code>new Function(...)</code> ». Il faut donc éviter le constructeur <code>Function</code> autant que possible.<br>
- Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur <code>Function</code> ne sont analysées qu'une seule fois. On aura l'exemple suivant :
- <pre class="brush: js">var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
-toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.</pre>
- </li>
-</ul>
-
-<p>Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :</p>
-
-<ul>
- <li>elle fait partie d'une expression</li>
- <li>ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction.
- <pre class="brush: js">var x = 0; // élément source
-if (x === 0) { // élément source
- x = 10; // pas un élément source
- function titi() {} // pas un élément source
-}
-function toto() { // élément source
- var y = 20; // élément source
- function truc() {} // élément source
- while (y === 10) { // élément source
- function machin() {} // pas un élément source
- y++; // pas un élément source
- }
-}
-</pre>
- </li>
-</ul>
-
-<h3 id="Exemples">Exemples :</h3>
-
-<ul>
- <li>
- <pre class="brush: js">// déclaration de fonction
-function toto() {}
-
-// expression de fonction
-(function truc() {})
-
-// expression de fonction
-var x = function bonjour() {}</pre>
- </li>
- <li>
- <pre class="brush: js">if (x) {
- // expression de fonction
- function monde() {}
-}
-</pre>
- </li>
- <li>
- <pre class="brush: js">// déclaration de fonction
-function a() {
- // déclaration de fonction
- function b() {}
- if (0) {
- // expression de fonction
- function c() {}
- }
-}
-</pre>
- </li>
-</ul>
+ ```js
+ var multiplier = new Function("x", "y", "return x * y;");
+ ```
+
+2. une déclaration de fonction d'une fonction appelée `multiplier`
+
+ ```js
+ function multiplier(x, y) {
+ return x * y;
+ }
+ ```
+
+3. une expression de fonction d'une fonction anonyme assignée à la variable `multiplier`
+
+ ```js
+ var multiplier = function(x, y) {
+ return x * y;
+ };
+ ```
+
+4. une expression de fonction d'une fonction nommée `fonction_nom` assignée à la variable `multiplier`
+
+ ```js
+ var multiplier = function function_nom(x, y) {
+ return x * y;
+ };
+ ```
+
+Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :
+
+- Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée :
+
+ - le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.
+ - le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou `undefined` si le nom de la fonction a été déclaré auparavant avec une instruction `var`). Ainsi :
+
+ ```js
+ var y = function x() {};
+ console.log(x); // renvoie une erreur
+ ```
-<h2 id="Définir_une_fonction_de_façon_conditionnelle">Définir une fonction de façon conditionnelle</h2>
+ Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la [méthode toString de l'objet `Function`](/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Function/toString).
-<p>Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a>) soit le constructeur <code>Function</code>. Il faut noter que de telles instructions ne sont plus autorisées dans le standard <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">ES5 strict</a>. Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.</p>
+ La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.
-<p>Dans le script qui suit, la fonction <code>zero</code> n'est jamais définie et ne peut donc être appelée car le test « <code>if (0)</code> » est toujours faux :</p>
+ - Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.
-<pre class="brush: js">if (0) {
+- Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie :
+
+ ```js
+ function x() {}
+ console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
+ ```
+
+ L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :
+
+ ```js
+ function toto() {}
+ console.log(toto); // message affichant la chaine de caractères "toto"
+ var truc = toto;
+ console.log(truc); // message affichant la chaine de caractères "toto"
+ ```
+
+- Une fonction définie grâce à « `new Function »` n'aura pas de nom de fonction. Cependant, le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code `console.log(new Function())` produira :
+
+ ```js
+ function anonymous() {
+ }
+ ```
+
+ La fonction n'ayant pas de nom effectif, `anonymous` n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :
+
+ ```js
+ var toto = new Function("console.log(anonymous);");
+ toto();
+ ```
+
+- À la différence des fonctions définies par les expressions de fonction ou par le constructeur `Function`, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi :
+
+ ```js
+ toto(); // affichera TOTO !
+ function toto() {
+ console.log('TOTO !');
+ }
+ ```
+
+- Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur `Function` n'héritent que de la portée globale (portée héritée par toutes les fonctions).
+- Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur `Function` ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « `new Function(...)` ». Il faut donc éviter le constructeur `Function` autant que possible.
+ Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur `Function` ne sont analysées qu'une seule fois. On aura l'exemple suivant :
+
+ ```js
+ var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
+ toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.
+ ```
+
+Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :
+
+- elle fait partie d'une expression
+- ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction.
+
+ ```js
+ var x = 0; // élément source
+ if (x === 0) { // élément source
+ x = 10; // pas un élément source
+ function titi() {} // pas un élément source
+ }
+ function toto() { // élément source
+ var y = 20; // élément source
+ function truc() {} // élément source
+ while (y === 10) { // élément source
+ function machin() {} // pas un élément source
+ y++; // pas un élément source
+ }
+ }
+ ```
+
+### Exemples :
+
+- ```js
+ // déclaration de fonction
+ function toto() {}
+
+ // expression de fonction
+ (function truc() {})
+
+ // expression de fonction
+ var x = function bonjour() {}
+ ```
+
+- ```js
+ if (x) {
+ // expression de fonction
+ function monde() {}
+ }
+ ```
+
+- ```js
+ // déclaration de fonction
+ function a() {
+ // déclaration de fonction
+ function b() {}
+ if (0) {
+ // expression de fonction
+ function c() {}
+ }
+ }
+ ```
+
+## Définir une fonction de façon conditionnelle
+
+Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard [ECMA-262 Edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm)) soit le constructeur `Function`. Il faut noter que de telles instructions ne sont plus autorisées dans le standard [ES5 strict](https://bugzilla.mozilla.org/show_bug.cgi?id=609832). Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.
+
+Dans le script qui suit, la fonction `zero` n'est jamais définie et ne peut donc être appelée car le test « `if (0)` » est toujours faux :
+
+```js
+if (0) {
function zero() {
console.log("C'est zero.");
}
}
-</pre>
+```
-<p>Si le script est changé et que la condition devient « <code>if (1)</code> », la fonction <code>zero</code> sera alors définie.</p>
+Si le script est changé et que la condition devient « `if (1)` », la fonction `zero` sera alors définie.
-<p>Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).</p>
+Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).
-<div class="note">
-<p><strong>Note :</strong> À la différence de <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction <code>zero</code> et ce même avec la condition <code>if</code> valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :</p>
+> **Note :** À la différence de [SpiderMonkey](/fr/docs/SpiderMonkey), certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction `zero` et ce même avec la condition `if` valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :
+>
+> ```js
+> if (0) {
+> var zero = function() {
+> console.log("C'est zero");
+> }
+> }
+> ```
-<pre class="brush: js">if (0) {
- var zero = function() {
- console.log("C'est zero");
- }
-}
-</pre>
-</div>
-
-<h2 id="Les_fonctions_en_tant_que_gestionnaires_dévénements">Les fonctions en tant que gestionnaires d'événements</h2>
+## Les fonctions en tant que gestionnaires d'événements
-<p>En JavaScript, les gestionnaires d'événements <a href="/fr/docs/DOM">DOM</a> (<em>event handlers</em> en anglais) sont des fonctions (différentes des objets contenant une méthode <code>handleEvent</code> dans d'autres langages de liaison avec le DOM -<em>binding languages</em> en anglais). Les fontions ont l'objet <a href="/fr/docs/DOM/event">event</a> comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.</p>
+En JavaScript, les gestionnaires d'événements [DOM](/fr/docs/DOM) (_event handlers_ en anglais) sont des fonctions (différentes des objets contenant une méthode `handleEvent` dans d'autres langages de liaison avec le DOM -_binding languages_ en anglais). Les fontions ont l'objet [event](/fr/docs/DOM/event) comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.
-<p>Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : <code>window</code> (objets<code> Window</code>, y compris les objets frames), <code>document</code> (les objets <code>HTMLDocument</code>), et les éléments (les objets <code>Element</code>). Au sein du <a href="https://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML</a>, les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple <code>onfocus</code>). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les <a href="https://www.w3.org/TR/DOM-Level-2-Events/">événements DOM de niveau 2</a>.</p>
+Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : `window` (objets` Window`, y compris les objets frames), `document` (les objets `HTMLDocument`), et les éléments (les objets `Element`). Au sein du [DOM HTML](https://www.w3.org/TR/DOM-Level-2-HTML/), les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple `onfocus`). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les [événements DOM de niveau 2](https://www.w3.org/TR/DOM-Level-2-Events/).
-<p>Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)</p>
+Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)
-<p>L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».</p>
+L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».
-<pre class="brush: js">window.onfocus = function() {
+```js
+window.onfocus = function() {
document.body.style.backgroundColor = 'white';
};
-</pre>
+```
-<p>Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable <code>setBGColor</code>.</p>
+Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable `setBGColor`.
-<pre class="brush: js">var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
-</pre>
+```js
+var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+```
-<p>Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :</p>
+Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :
-<ol>
- <li>écrire dans les propriétés de l'évément DOM HTML
- <pre class="brush: js">document.form1.colorButton.onclick = setBGColor;
-</pre>
- </li>
- <li>l'attribut de l'événement HTML
- <pre class="brush: html">&lt;input type="button"
- value="Changer la couleur de fond"
- onclick="setBGColor();"/&gt;
-</pre>
+1. écrire dans les propriétés de l'évément DOM HTML
- <p>Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (<code>setBGColor()</code> et non pas <code>setBGColor</code>). Cela est équivalent à :</p>
+ ```js
+ document.form1.colorButton.onclick = setBGColor;
+ ```
- <pre class="brush: js">document.form1.colorButton.onclick = function onclick(event) {
- setBGColor();
-};
-</pre>
+2. l'attribut de l'événement HTML
+
+ ```html
+ <input type="button"
+ value="Changer la couleur de fond"
+ onclick="setBGColor();"/>
+ ```
+
+ Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (`setBGColor()` et non pas `setBGColor`). Cela est équivalent à :
+
+ ```js
+ document.form1.colorButton.onclick = function onclick(event) {
+ setBGColor();
+ };
+ ```
- <p>Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre <code>event</code>. Cela permet au code d'utiliser l'objet <code>Event</code> :</p>
+ Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre `event`. Cela permet au code d'utiliser l'objet `Event` :
- <pre class="brush: html">&lt;input ...
- onclick="console.log(event.target.tagName);"/&gt;
-</pre>
- </li>
-</ol>
+ ```html
+ <input ...
+ onclick="console.log(event.target.tagName);"/>
+ ```
-<p>Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et <code>this</code> ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle <code>onfocus</code> fait référence est appelée avec <code>this</code> qui a la valeur <code>window</code>.</p>
+Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et `this` ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle `onfocus` fait référence est appelée avec `this` qui a la valeur `window`.
-<pre class="brush: js">window.onfocus();
-</pre>
+```js
+window.onfocus();
+```
-<p>Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent<code> undefined </code>dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.</p>
+Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent` undefined `dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.
-<pre class="brush: js">document.form1.button1.onclick = setBGColor();
-</pre>
+```js
+document.form1.button1.onclick = setBGColor();
+```
-<p>Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :</p>
+Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :
-<pre class="brush: js">document.form1.button1.onclick = function() {
+```js
+document.form1.button1.onclick = function() {
setBGColor('une valeur');
};
-</pre>
+```
-<h2 id="Les_fonctions_de_bloc">Les fonctions de bloc</h2>
+## Les fonctions de bloc
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..</p>
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..
-<pre class="brush: js">'use strict';
+```js
+'use strict';
function f() {
return 1;
@@ -697,129 +696,105 @@ function f() {
f() === 1; // true
// f() === 2 en mode non-strict
-</pre>
+```
-<h3 id="Les_fonctions_de_bloc_dans_du_code_non-strict">Les fonctions de bloc dans du code non-strict</h3>
+### Les fonctions de bloc dans du code non-strict
-<p>Non.</p>
+Non.
-<p>Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :</p>
+Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :
-<pre class="brush: js">if (onDevraitDéfinirZéro) {
+```js
+if (onDevraitDéfinirZéro) {
function zéro() { // DANGER: risque de compatibilité
console.log("Voici zéro.");
}
}
-</pre>
+```
-<p>ES2015 indique que si <code>onDevraitDéfinirZéro</code> vaut <code>false</code>, <code>zéro</code> ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent <code>zéro</code> que le bloc soit exécuté ou non.</p>
+ES2015 indique que si `onDevraitDéfinirZéro` vaut `false`, `zéro` ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent `zéro` que le bloc soit exécuté ou non.
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : <code>zéro</code> est uniquement défini si <code>onDevraitDéfinirZéro</code> vaut <code>true</code> et uniquement dans la portée du bloc induit par <code>if</code>.</p>
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : `zéro` est uniquement défini si `onDevraitDéfinirZéro` vaut `true` et uniquement dans la portée du bloc induit par `if`.
-<p>Une méthode plus sûre est d'utiliser des expressions de fonction :</p>
+Une méthode plus sûre est d'utiliser des expressions de fonction :
-<pre class="brush: js">var zéro;
+```js
+var zéro;
if (0) {
zéro = function() {
console.log("Voici zéro.");
};
}
-</pre>
+```
-<h2 id="Exemples_2">Exemples</h2>
+## Exemples
-<h3 id="Renvoyer_un_nombre_formaté">Renvoyer un nombre formaté</h3>
+### Renvoyer un nombre formaté
-<p>La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.</p>
+La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.
-<pre class="brush: js">// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
+```js
+// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
function padZeros(num, totalLen) {
var numStr = num.toString(); // On initialise la valeur à renvoyer en chaîne de caractères
var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
- for (var i = 1; i &lt;= numZeros; i++) {
+ for (var i = 1; i <= numZeros; i++) {
numStr = "0" + numStr;
}
return numStr;
}
-</pre>
+```
-<p>Les instructions qui suivent utilisent cette fonction</p>
+Les instructions qui suivent utilisent cette fonction
-<pre class="brush: js">var resultat;
+```js
+var resultat;
resultat = padZeros(42,4); // renvoie "0042"
resultat = padZeros(42,2); // renvoie "42"
resultat = padZeros(5,4); // renvoie "0005"
-</pre>
+```
-<h3 id="Déterminer_si_une_fonction_existe">Déterminer si une fonction existe</h3>
+### Déterminer si une fonction existe
-<p>Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur <code>typeof</code>. Dans l'exemple qui suit, on teste pour savoir si l'objet<code> window</code> possède une propriété appelé <code>noFunc</code> qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.</p>
+Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur `typeof`. Dans l'exemple qui suit, on teste pour savoir si l'objet` window` possède une propriété appelé `noFunc` qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.
-<pre class="brush: js"> if ('function' === typeof window.noFunc) {
+```js
+ if ('function' === typeof window.noFunc) {
// utilisation de noFunc()
} else {
// faire autre chose
}
-</pre>
-
-<p>Il est à noter que, dans le test <code>if</code>, on utilise une référence à <code>noFunc</code> - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.</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('ES1')}}</td>
- <td>{{Spec2('ES1')}}</td>
- <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td></td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste</td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#', 'function*')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}</li>
- <li>{{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}</li>
- <li>{{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}</li>
- <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
- <li>{{jsxref("Fonctions/get", "getter")}}</li>
- <li>{{jsxref("Fonctions/set", "setter")}}</li>
- <li>{{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Fonctions et portée des fonctions</a></li>
-</ul>
+```
+
+Il est à noter que, dans le test `if`, on utilise une référence à `noFunc` - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0 |
+| {{SpecName('ES5.1', '#sec-13', 'Function Definition')}} | {{Spec2('ES5.1')}} | |
+| {{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ES6')}} | Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste |
+| {{SpecName('ES6', '#', 'function*')}} | {{Spec2('ES6')}} | Définition initiale. |
+| {{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ES6')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("Function")}}
+- {{jsxref("GeneratorFunction")}}
+- {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}
+- {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}
+- {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}
+- L'objet {{jsxref("Fonctions/arguments", "arguments")}}
+- {{jsxref("Fonctions/get", "getter")}}
+- {{jsxref("Fonctions/set", "setter")}}
+- {{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}
+- [Fonctions et portée des fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.md b/files/fr/web/javascript/reference/functions/method_definitions/index.md
index 13c6fdf0fa..a0e36dc8e0 100644
--- a/files/fr/web/javascript/reference/functions/method_definitions/index.md
+++ b/files/fr/web/javascript/reference/functions/method_definitions/index.md
@@ -11,68 +11,70 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/Method_definitions
original_slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode
---
-<div>{{JsSidebar("Functions")}}</div>
+{{JsSidebar("Functions")}}
-<p>Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.</p>
+Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.
-<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">var obj = {
- <var>property</var>( <var>parameters…</var> ) {},
- *<var>generator</var>( <var>parameters…</var> ) {},
- async property( <var>parameters…</var> ) {},
- async* generator( <var>parameters…</var> ) {},
+ var obj = {
+ property( parameters… ) {},
+ *generator( parameters… ) {},
+ async property( parameters… ) {},
+ async* generator( parameters… ) {},
- // avec les noms calculés :
- [property]( <var>parameters…</var> ) {},
- *[generator]( <var>parameters…</var> ) {},
- async [property]( <var>parameters…</var> ) {},
+ // avec les noms calculés :
+ [property]( parameters… ) {},
+ *[generator]( parameters… ) {},
+ async [property]( parameters… ) {},
- // avec la syntaxe pour les accesseurs
- // mutateurs :
- get <var>property</var>() {},
- set <var>property</var>(<var>value</var>) {}
-};
-</pre>
+ // avec la syntaxe pour les accesseurs
+ // mutateurs :
+ get property() {},
+ set property(value) {}
+ };
-<h2 id="Description">Description</h2>
+## Description
-<p>La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseurs</a> et <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateurs</a>.</p>
+La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les [accesseurs](/fr/docs/Web/JavaScript/Reference/Fonctions/get) et [mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set).
-<p>Le code suivant :</p>
+Le code suivant :
-<pre class="brush: js">var obj = {
+```js
+var obj = {
toto: function() {
/* du code */
},
truc: function() {
/* du code */
}
-};</pre>
+};
+```
-<p>Peut désormais être raccourci en :</p>
+Peut désormais être raccourci en :
-<pre class="brush: js">var obj = {
+```js
+var obj = {
toto() {
/* du code */
},
  truc() {
/* du code */
}
-};</pre>
+};
+```
-<h3 id="Notation_raccourcie_pour_les_générateurs">Notation raccourcie pour les générateurs</h3>
+### Notation raccourcie pour les générateurs
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les générateurs</a> sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :</p>
+[Les générateurs](/fr/docs/Web/JavaScript/Reference/Instructions/function*) sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :
-<ul>
- <li>L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, <code>* g(){}</code> fonctionnera mais <code>g*(){}</code> ne fonctionnera pas.</li>
- <li>Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé <code>yield</code>. Cela signifie que <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">l'ancienne syntaxe pour les générateurs</a> ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser <code>yield</code> avec l'astérisque (<code>*</code>).</li>
-</ul>
+- L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, `* g(){}` fonctionnera mais `g*(){}` ne fonctionnera pas.
+- Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé `yield`. Cela signifie que [l'ancienne syntaxe pour les générateurs](/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique) ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser `yield` avec l'astérisque (`*`).
-<pre class="brush: js">// Notation utilisant une propriété nommée (avant-ES2015)
+```js
+// Notation utilisant une propriété nommée (avant-ES2015)
var obj2 = {
g: function*() {
var index = 0;
@@ -92,13 +94,15 @@ var obj2 = {
var it = obj2.g();
console.log(it.next().value); // 0
-console.log(it.next().value); // 1</pre>
+console.log(it.next().value); // 1
+```
-<h3 id="Méthodes_asynchrones_avec_notation_raccourcie">Méthodes asynchrones avec notation raccourcie</h3>
+### Méthodes asynchrones avec notation raccourcie
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les méthodes asynchrones</a> peuvent également être définies grâce à une syntaxe raccourcie.</p>
+[Les méthodes asynchrones](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) peuvent également être définies grâce à une syntaxe raccourcie.
-<pre class="brush: js">// On utilise une propriété nommée
+```js
+// On utilise une propriété nommée
var obj3 = {
f: async function () {
await une_promesse;
@@ -112,13 +116,14 @@ var obj3 = {
await une_promesse;
}
};
-</pre>
+```
-<h3 id="Méthodes_génératrices_asynchrones">Méthodes génératrices asynchrones</h3>
+### Méthodes génératrices asynchrones
-<p>Les méthodes génératrices peuvent également être asynchrones (cf. <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">async</a></code>) :</p>
+Les méthodes génératrices peuvent également être asynchrones (cf. [`async`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function)) :
-<pre class="brush: js">var obj4 = {
+```js
+var obj4 = {
f: async function* () {
yield 1;
yield 2;
@@ -134,13 +139,15 @@ var obj4 = {
yield 2;
yield 3;
}
-};</pre>
+};
+```
-<h3 id="Les_définitions_de_méthodes_ne_sont_pas_constructibles">Les définitions de méthodes ne sont pas constructibles</h3>
+### Les définitions de méthodes ne sont pas constructibles
-<p>Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.</p>
+Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.
-<pre class="brush: js">var obj = {
+```js
+var obj = {
méthode() {},
};
new obj.méthode; // TypeError: obj.méthode is not a constructor
@@ -149,24 +156,26 @@ var obj = {
* g() {}
};
new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
-</pre>
+```
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Cas_de_test">Cas de test</h3>
+### Cas de test
-<pre class="brush: js">var obj = {
+```js
+var obj = {
a : "toto",
b(){ return this.a; }
};
console.log(obj.b()); // "toto"
-</pre>
+```
-<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
+### Noms de propriétés calculés
-<p>Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.</p>
+Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.
-<pre class="brush: js">var bar = {
+```js
+var bar = {
toto0 : function (){return 0;},
toto1(){return 1;},
["toto" + 2](){return 2;},
@@ -174,43 +183,23 @@ console.log(obj.b()); // "toto"
console.log(bar.toto0()); // 0
console.log(bar.toto1()); // 1
-console.log(bar.toto2()); // 2</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-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ES2016')}}</td>
- <td>Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec <code>new</code>.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.method_definitions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_get">get</a></code></li>
- <li><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/Grammaire_lexicale">Grammaire lexicale de JavaScript</a></li>
-</ul>
+console.log(bar.toto2()); // 2
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}} | Définition initiale. |
+| {{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2016')}} | Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec `new`. |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} |   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.method_definitions")}}
+
+## Voir aussi
+
+- [`get`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_get)
+- [`set`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set)
+- [Grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
diff --git a/files/fr/web/javascript/reference/functions/rest_parameters/index.md b/files/fr/web/javascript/reference/functions/rest_parameters/index.md
index 90984a9267..6597da94f3 100644
--- a/files/fr/web/javascript/reference/functions/rest_parameters/index.md
+++ b/files/fr/web/javascript/reference/functions/rest_parameters/index.md
@@ -9,24 +9,26 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
original_slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.</p>
+Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.
-<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="brush: js">function f(a, b, ...lesArguments) {
+```js
+function f(a, b, ...lesArguments) {
// ...
}
-</pre>
+```
-<h2 id="Description">Description</h2>
+## Description
-<p>Si le dernier paramètre nommé fourni à la fonction est préfixé de <code>...</code> (trois points), il devient un tableau dont les éléments entre <code>0</code> (inclus) et <code>lesArguments.length</code> (exclus) sont fournis comme autres arguments à la fonction.</p>
+Si le dernier paramètre nommé fourni à la fonction est préfixé de `...` (trois points), il devient un tableau dont les éléments entre `0` (inclus) et `lesArguments.length` (exclus) sont fournis comme autres arguments à la fonction.
-<pre class="brush: js">function maFonction(a, b, ...plusDArguments) {
+```js
+function maFonction(a, b, ...plusDArguments) {
console.log("a", a);
console.log("b", b);
console.log("plusDArguments", plusDArguments);
@@ -36,23 +38,23 @@ maFonction("un", "deux", "trois", "quatre", "cinq");
// affichera ceci dans la console :
// a, "un"
// b, "deux"
-// plusDArguments, ["trois", "quatre", "cinq"]</pre>
+// plusDArguments, ["trois", "quatre", "cinq"]
+```
-<h3 id="Les_différences_entre_les_paramètres_du_reste_et_l'objet_arguments">Les différences entre les paramètres du reste et l'objet <code>arguments</code></h3>
+### Les différences entre les paramètres du reste et l'objet `arguments`
-<p>Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :</p>
+Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :
-<ul>
- <li>les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet <code>arguments</code> contient chaque argument passé à la fonction</li>
- <li>l'objet <code>arguments</code> n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}</li>
- <li>l'objet <code>arguments</code> possède des fonctionnalités spécifiques (comme, par exemple, la propriété <code>callee</code>)</li>
-</ul>
+- les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet `arguments` contient chaque argument passé à la fonction
+- l'objet `arguments` n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}
+- l'objet `arguments` possède des fonctionnalités spécifiques (comme, par exemple, la propriété `callee`)
-<h3 id="Convertir_arguments_en_un_tableau">Convertir <code>arguments</code> en un tableau</h3>
+### Convertir `arguments` en un tableau
-<p>Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.</p>
+Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.
-<pre class="brush: js">// Avant les paramètres du reste, on observait souvent ce style de code :
+```js
+// Avant les paramètres du reste, on observait souvent ce style de code :
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length);
// ou encore
@@ -71,36 +73,40 @@ function f(...args) {
var tabNormal = args;
var premier = tabNormal.shift();
}
-</pre>
+```
-<h3 id="La_décomposition_sur_les_paramètres_du_reste">La décomposition sur les paramètres du reste</h3>
+### La décomposition sur les paramètres du reste
-<p>On peut également décomposer les paramètres du reste en variables distinctes :</p>
+On peut également décomposer les paramètres du reste en variables distinctes :
-<pre class="brush: js">function f(...[a, b, c]) {
+```js
+function f(...[a, b, c]) {
return a + b + c;
}
f(1); // NaN (b et c valent undefined)
f(1, 2, 3); // 6
f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
-</pre>
+```
-<p>Vous pouvez également accéder aux éléments des paramètres du reste :</p>
+Vous pouvez également accéder aux éléments des paramètres du reste :
-<pre class="brush: js">function fun1(...lesArguments) {
+```js
+function fun1(...lesArguments) {
console.log("valeur", lesArguments[0][0]);
}
fun1([5, 2], [5, 4]); // 5
fun1([8, 2]); // 8
-fun1([9, 6, 7]); // 9</pre>
+fun1([9, 6, 7]); // 9
+```
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<p>S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :</p>
+S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :
-<pre class="brush: js">function maFonction(a, b, ...autres);
+```js
+function maFonction(a, b, ...autres);
console.log(a);
console.log(b);
console.log(autres);
@@ -111,11 +117,12 @@ maFonction("un", "deux", "trois");
// "un"
// "deux"
// ["trois"]
-</pre>
+```
-<p>De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :</p>
+De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :
-<pre class="brush: js">function maFonction(a, b, ...autres);
+```js
+function maFonction(a, b, ...autres);
console.log(a);
console.log(b);
console.log(autres);
@@ -125,22 +132,25 @@ maFonction("un", "deux");
// affichera ceci dans la console
// "un"
// "deux"
-// []</pre>
+// []
+```
-<p><code>lesArguments</code> est un tableau et dispose donc d'une propriété <code>length</code> permettant de compter ses éléments :</p>
+`lesArguments` est un tableau et dispose donc d'une propriété `length` permettant de compter ses éléments :
-<pre class="brush: js">function fun1(...lesArguments) {
+```js
+function fun1(...lesArguments) {
console.log(lesArguments.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
-</pre>
+```
-<p>Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :</p>
+Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :
-<pre class="brush: js">function multiplier(facteur, ...lesArguments) {
+```js
+function multiplier(facteur, ...lesArguments) {
return lesArguments.map(function (element) {
return facteur * element;
});
@@ -148,11 +158,12 @@ fun1(5, 6, 7); // 3
var arr = multiplier(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
-</pre>
+```
-<p>L'exemple qui suit illustre comment on peut utiliser des méthodes de <code>Array</code> sur le paramètre Rest mais pas sur l'objet <code>arguments</code> :</p>
+L'exemple qui suit illustre comment on peut utiliser des méthodes de `Array` sur le paramètre Rest mais pas sur l'objet `arguments` :
-<pre class="brush: js">function trierParamRest(...lesArguments) {
+```js
+function trierParamRest(...lesArguments) {
var argumentsTriés = lesArguments.sort();
return argumentsTriés;
}
@@ -166,51 +177,35 @@ function trierArguments() {
// renvoie une exception TypeError: arguments.sort n'est pas une function
console.log(trierArguments(5,3,7,1));
-</pre>
+```
-<p>Pour utiliser les méthodes propres aux instances d'<code>Array</code> sur l'objet <code>arguments</code>, il est nécessaire de le convertir.</p>
+Pour utiliser les méthodes propres aux instances d'`Array` sur l'objet `arguments`, il est nécessaire de le convertir.
-<pre class="brush: js">function trierAguments() {
+```js
+function trierAguments() {
var args = Array.from(arguments);
var argumentsTriés = args.sort();
return argumentsTriés;
}
console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
-</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('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Définition initiale.</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.rest_parameters")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Fonctions/arguments","arguments")}}</li>
- <li>{{jsxref("Array","Array")}}</li>
- <li>{{jsxref("Fonctions","Les fonctions et leurs portées","",1)}}</li>
- <li>{{jsxref("Opérateurs/Syntaxe_décomposition","L'opérateur de décomposition","",1)}}</li>
- <li><a class="external" href="https://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Proposition originale sur ecmascript.org</a> (en anglais)</li>
- <li><a class="external" href="https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a> (article en anglais)</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ES6')}} | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ESDraft')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.rest_parameters")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Fonctions/arguments","arguments")}}
+- {{jsxref("Array","Array")}}
+- {{jsxref("Fonctions","Les fonctions et leurs portées","",1)}}
+- {{jsxref("Opérateurs/Syntaxe_décomposition","L'opérateur de décomposition","",1)}}
+- [Proposition originale sur ecmascript.org](https://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters) (en anglais)
+- [JavaScript arguments object and beyond](https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/) (article en anglais)
diff --git a/files/fr/web/javascript/reference/functions/set/index.md b/files/fr/web/javascript/reference/functions/set/index.md
index 2e7778875e..4ef288d7bc 100644
--- a/files/fr/web/javascript/reference/functions/set/index.md
+++ b/files/fr/web/javascript/reference/functions/set/index.md
@@ -9,82 +9,81 @@ tags:
translation_of: Web/JavaScript/Reference/Functions/set
original_slug: Web/JavaScript/Reference/Fonctions/set
---
-<div>{{jsSidebar("Functions")}}</div>
+{{jsSidebar("Functions")}}
-<p>La syntaxe <strong><code>set</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.</p>
+La syntaxe **`set`** permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.
-<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div>
+{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . .}}
-{set [expression](<em>val</em>) { . . .}}</pre>
+ {set prop(val) { . . .}}
+ {set [expression](val) { . . .}}
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété à lier à la fonction.</dd>
- <dt><code>val</code></dt>
- <dd>Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à <code>prop.</code></dd>
- <dt><code>expression</code></dt>
- <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.</dd>
-</dl>
+- `prop`
+ - : Le nom de la propriété à lier à la fonction.
+- `val`
+ - : Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à `prop.`
+- `expression`
+ - : Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.
-<h2 id="Description">Description</h2>
+## Description
-<p>En JavaScript, un mutateur (ou <em>setter</em> en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (<em>getters</em>) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.</p>
+En JavaScript, un mutateur (ou _setter_ en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (_getters_) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.
-<p>On notera que <code>set</code> :</p>
+On notera que `set` :
-<div>
-<ul>
- <li>peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères</li>
- <li>doit avoir exactement un paramètre (voir l'article « <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> » (en anglais) pour plus d'informations)</li>
- <li>ne doit pas apparaître dans un littéral objet qui possède un autre <code>set</code> ou une autre propriété avec la même clé :<br>
- ( <code>{ set x(v) { }, set x(v) { } }</code> et <code>{ x: ..., set x(v) { } }</code> seront interdits)</li>
-</ul>
-</div>
+- peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères
+- doit avoir exactement un paramètre (voir l'article « [Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) » (en anglais) pour plus d'informations)
+- ne doit pas apparaître dans un littéral objet qui possède un autre `set` ou une autre propriété avec la même clé :
+ ( `{ set x(v) { }, set x(v) { } }` et `{ x: ..., set x(v) { } }` seront interdits)
-<p>On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
+On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Définir_un_mutateur_sur_de_nouveaux_objets_avec_un_littéral_objet">Définir un mutateur sur de nouveaux objets avec un littéral objet</h3>
+### Définir un mutateur sur de nouveaux objets avec un littéral objet
-<p>Dans l'exemple qui suit, on définit une pseudo-propriété <code>courant</code> pour un objet <code>o</code> qui, lorsqu'elle recevra une valeur, mettra à jour la propriété <code>log</code> avec la valeur reçue :</p>
+Dans l'exemple qui suit, on définit une pseudo-propriété `courant` pour un objet `o` qui, lorsqu'elle recevra une valeur, mettra à jour la propriété `log` avec la valeur reçue :
-<pre class="brush: js">var o = {
+```js
+var o = {
set courant (str) {
this.log[this.log.length] = str;
},
log: []
}
-</pre>
+```
-<p>On notera que <code>courant</code> n'est pas défini. Toute tentative pour y accéder renverra <code>undefined</code>.</p>
+On notera que `courant` n'est pas défini. Toute tentative pour y accéder renverra `undefined`.
-<h3 id="Supprimer_un_mutateur_grâce_à_l'opérateur_delete">Supprimer un mutateur grâce à l'opérateur <code>delete</code></h3>
+### Supprimer un mutateur grâce à l'opérateur `delete`
-<p>Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :</p>
+Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :
-<pre class="brush: js">delete o.courant;
-</pre>
+```js
+delete o.courant;
+```
-<h3 id="Définir_un_mutateur_sur_un_objet_existant_avec_defineProperty">Définir un mutateur sur un objet existant avec <code>defineProperty</code></h3>
+### Définir un mutateur sur un objet existant avec `defineProperty`
-<p>On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.</p>
+On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.
-<pre class="brush: js">var o = { a:0 };
+```js
+var o = { a:0 };
Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
-console.log(o.a) // 5</pre>
+console.log(o.a) // 5
+```
-<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
+### Utiliser un nom de propriété calculé
-<pre class="brush: js">var expr = "toto";
+```js
+var expr = "toto";
var obj = {
bidule: "truc",
@@ -94,46 +93,25 @@ var obj = {
console.log(obj.bidule); // "truc"
obj.toto = "bidule"; // le mutateur est utilisé
console.log(obj.bidule); // "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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td>Définition initiale</td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ES6')}}</td>
- <td>Ajout des noms de propriétés calculés</td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions/get","get")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
- <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et des mutateurs</a>, dans le Guide JavaScript</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------- |
+| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | Définition initiale |
+| {{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES6')}} | Ajout des noms de propriétés calculés |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.set")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions/get","get")}}
+- {{jsxref("Opérateurs/L_opérateur_delete","delete")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineGetter", "__defineGetter__")}}
+- {{jsxref("Object.defineSetter", "__defineSetter__")}}
+- [Définir des accesseurs et des mutateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters), dans le Guide JavaScript