diff options
Diffstat (limited to 'files/fr/web/javascript/reference/statements')
29 files changed, 2162 insertions, 2731 deletions
diff --git a/files/fr/web/javascript/reference/statements/async_function/index.md b/files/fr/web/javascript/reference/statements/async_function/index.md index 02131e514b..4c068e174e 100644 --- a/files/fr/web/javascript/reference/statements/async_function/index.md +++ b/files/fr/web/javascript/reference/statements/async_function/index.md @@ -10,59 +10,51 @@ tags: translation_of: Web/JavaScript/Reference/Statements/async_function original_slug: Web/JavaScript/Reference/Instructions/async_function --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>La déclaration <code><strong>async function</strong></code> définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.</p> +La déclaration **`async function`** définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour. -<div class="noinclude"> -<p>On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.</p> -</div> +On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}. -<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> +{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>instructions</em> -} -</pre> + async function name([param[, param[, ... param]]]) { + instructions + } + +### Paramètres -<h3 id="Paramètres">Paramètres</h3> +- `name` + - : Le nom de la fonction. +- `param` + - : Le nom d'un argument à passer à la fonction. +- `instructions` + - : Les instructions qui composent le corps de la fonction. -<dl> - <dt><code>name</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 composent le corps de la fonction.</dd> -</dl> +### Valeur de retour -<h3 id="Valeur_de_retour">Valeur de retour</h3> +Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone. -<p>Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.</p> +## Description -<h2 id="Description">Description</h2> +Une fonction `async` peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée `Promise`. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution. -<p>Une fonction <code>async</code> peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée <code>Promise</code>. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.<br> - <br> - Le mot-clé <code>await</code> est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.</p> +Le mot-clé `await` est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}. -<div class="blockIndicator note"> -<p><strong>Note :</strong> Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction <code>async</code>).</p> -</div> +> **Note :** Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction `async`). -<div class="note"> -<p><strong>Note :</strong> Le but des fonctions <code>async</code>/<code>await</code> est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des <em>callbacks</em> structurés, <code>async</code>/<code>await</code> est semblable à la combinaison des générateurs et des promesses.</p> -</div> +> **Note :** Le but des fonctions `async`/`await` est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des _callbacks_ structurés, `async`/`await` est semblable à la combinaison des générateurs et des promesses. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<pre class="brush: js">var resolveAfter2Seconds = function() { +```js +var resolveAfter2Seconds = function() { console.log("Initialisation de la promesse lente"); - return new Promise(resolve => { + return new Promise(resolve => { setTimeout(function() { resolve("lente"); console.log("La promesse lente est terminée"); @@ -72,7 +64,7 @@ original_slug: Web/JavaScript/Reference/Instructions/async_function var resolveAfter1Second = function() { console.log("Initialisation de la promesse rapide"); - return new Promise(resolve => { + return new Promise(resolve => { setTimeout(function() { resolve("rapide"); console.log("La promesse rapide est terminée"); @@ -104,7 +96,7 @@ var concurrentStart = async function() { var concurrentPromise = function() { console.log('==Début concurrentiel avec Promise.all=='); - return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { + return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { console.log(messages[0]); // lente console.log(messages[1]); // rapide }); @@ -115,8 +107,8 @@ var parallel = async function() { // Démarre 2 tâches en parallèle et on attend que les deux soient finies await Promise.all([ - (async()=>console.log(await resolveAfter2Seconds()))(), - (async()=>console.log(await resolveAfter1Second()))() + (async()=>console.log(await resolveAfter2Seconds()))(), + (async()=>console.log(await resolveAfter1Second()))() ]); } @@ -124,8 +116,8 @@ var parallel = async function() { // voir les avertissement ci-après ! var parallelPromise = function() { console.log('==Exécution parallèle avec Promise.then=='); - resolveAfter2Seconds().then((message)=>console.log(message)); - resolveAfter1Second().then((message)=>console.log(message)); + resolveAfter2Seconds().then((message)=>console.log(message)); + resolveAfter1Second().then((message)=>console.log(message)); } sequentialStart(); // après 2 secondes, "lente" est affichée, après une @@ -144,46 +136,48 @@ setTimeout(parallel, 10000); // réellement parallele : après 1 seconde, // on attend à nouveau setTimeout(parallelPromise, 13000); // identique à parallel -</pre> +``` -<h4 id="await_et_lexécution_parallèle"><code>await</code> et l'exécution parallèle</h4> +#### `await` et l'exécution parallèle -<p>Dans <code>sequentialStart</code>, l'exécution est arrêtée pendant deux secondes avant le premier <code>await</code> puis encore une autre seconde avant le deuxième <code>await</code>. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.</p> +Dans `sequentialStart`, l'exécution est arrêtée pendant deux secondes avant le premier `await` puis encore une autre seconde avant le deuxième `await`. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes. -<p>Avec <code>concurrentStart</code>, les deux minuteurs sont créés puis attendus derrière un <code>await</code> Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.<br> - Toutefois, les appels utilisant <code>await</code> sont exécutés séquentiellement et la deuxième instruction avec <code>await</code> attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier.</p> +Avec `concurrentStart`, les deux minuteurs sont créés puis attendus derrière un `await` Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes. +Toutefois, les appels utilisant `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier. -<p>Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser <code>await Promise.all([job1(), job2()])</code> comme illustré ci-avant avec <code>parallel</code>.</p> +Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`. -<h4 id="asyncawait_Promise.prototype.then_et_la_gestion_des_erreurs"><code>async</code>/<code>await</code>, <code>Promise.prototype.then()</code> et la gestion des erreurs</h4> +#### `async`/`await`, `Promise.prototype.then()` et la gestion des erreurs -<p>La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent <code>async</code> se prêtent mieux à la gestion des erreurs.</p> +La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent `async` se prêtent mieux à la gestion des erreurs. -<p><code>concurrentStart</code> et <code>concurrentPromise</code> sont fonctionnellement équivalentes.<br> - Avec <code>concurrentStart</code>, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.<br> - Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour <code>concurrentPromise</code> cela signifie qu'il faut renvoyer la promesse de <code>Promise.all([]).then()</code>.</p> +`concurrentStart` et `concurrentPromise` sont fonctionnellement équivalentes. +Avec `concurrentStart`, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite. +Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour `concurrentPromise` cela signifie qu'il faut renvoyer la promesse de `Promise.all([]).then()`. -<p>Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec <code>async</code>) qui gobent des erreurs involontairement. Si on considère la fonction <code>parallel</code> ci-avant, s'il n'y avait eu aucun <code>await</code> ou <code>return</code> pour le résultat de <code>Promise.all([])</code>, aucune erreur n'aurait été propagée.<br> - Bien que l'exemple <code>parallelPromise</code> paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un <code>return </code><code>Promise.all([])</code> analogue.</p> +Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec `async`) qui gobent des erreurs involontairement. Si on considère la fonction `parallel` ci-avant, s'il n'y avait eu aucun `await` ou `return` pour le résultat de `Promise.all([])`, aucune erreur n'aurait été propagée. +Bien que l'exemple `parallelPromise` paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un ` return ``Promise.all([])` analogue. -<h3 id="Réécrire_une_chaîne_de_promesses_avec_une_fonction_asynchrone">Réécrire une chaîne de promesses avec une fonction asynchrone</h3> +### Réécrire une chaîne de promesses avec une fonction asynchrone -<p>Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :</p> +Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches : -<pre class="brush: js">function getProcessedData(url) { +```js +function getProcessedData(url) { return downloadData(url) // renvoie une promesse - .catch(e => { + .catch(e => { return downloadFallbackData(url); // renvoie une promesse }) - .then(v => { + .then(v => { return processDataInWorker(v); // renvoie une promesse }); } -</pre> +``` -<p>Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :</p> +Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante : -<pre class="brush: js">async function getProcessedData(url) { +```js +async function getProcessedData(url) { let v; try { v = await downloadData(url); @@ -192,17 +186,18 @@ setTimeout(parallelPromise, 13000); // identique à parallel } return processDataInWorker(v); } -</pre> +``` -<p>On voit dans l'exemple précédent qu'il n'y a pas de <code>await</code> pour l'instruction <code>return</code> car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.</p> +On voit dans l'exemple précédent qu'il n'y a pas de `await` pour l'instruction `return` car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}. -<h3 id="Différences_entre_return_et_return_await">Différences entre <code>return</code> et <code>return await</code></h3> +### Différences entre `return` et `return await` -<p>La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que <code>return await valeurPromesse</code> sera équivalent à <code>return valeurPromesse</code>.</p> +La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que `return await valeurPromesse` sera équivalent à `return valeurPromesse`. -<p>Si on reprend l'exemple précédent et qu'on le réécrit avec <code>return await</code> et qu'on intercepte une éventuelle erreur de la promesse :</p> +Si on reprend l'exemple précédent et qu'on le réécrit avec `return await` et qu'on intercepte une éventuelle erreur de la promesse : -<pre class="brush: js">async function getProcessedData(url) { +```js +async function getProcessedData(url) { let v; try { v = await downloadData(url); @@ -214,45 +209,27 @@ setTimeout(parallelPromise, 13000); // identique à parallel } catch(e) { return null; } -}</pre> - -<p>Si on avait simplement écrit <code>return processDataInWorker(v);</code>, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur <code>null</code>.</p> - -<p>Lorsqu'on utilise <code>return toto;</code>, la valeur <code>toto</code> sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que <code>return await toto;</code> attendra la résolution de <code>toto</code> ou son échec et lèvera une exception si besoin <strong>avant de parvenir à renvoyer une valeur</strong>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ES8')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.async_function")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Operators/async_function", "async function expression")}}</li> - <li>{{jsxref("AsyncFunction")}} object</li> - <li>{{jsxref("Operators/await", "await")}}</li> - <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)</a></li> -</ul> +} +``` + +Si on avait simplement écrit `return processDataInWorker(v);`, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur `null`. + +Lorsqu'on utilise `return toto;`, la valeur `toto` sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que `return await toto;` attendra la résolution de `toto` ou son échec et lèvera une exception si besoin **avant de parvenir à renvoyer une valeur**. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES8', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES8')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.async_function")}} + +## Voir aussi + +- {{jsxref("Operators/async_function", "async function expression")}} +- {{jsxref("AsyncFunction")}} object +- {{jsxref("Operators/await", "await")}} +- [Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)](http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/) diff --git a/files/fr/web/javascript/reference/statements/block/index.md b/files/fr/web/javascript/reference/statements/block/index.md index 74780b7415..b2ad423120 100644 --- a/files/fr/web/javascript/reference/statements/block/index.md +++ b/files/fr/web/javascript/reference/statements/block/index.md @@ -6,112 +6,116 @@ tags: - Language feature - Reference - Statement -browser-compat: javascript.statements.block translation_of: Web/JavaScript/Reference/Statements/block original_slug: Web/JavaScript/Reference/Instructions/bloc +browser-compat: javascript.statements.block --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>Une <strong>instruction de bloc</strong> est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un <a href="/fr/docs/Web/JavaScript/Reference/Statements/label">label</a>.</p> +Une **instruction de bloc** est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un [label](/fr/docs/Web/JavaScript/Reference/Statements/label). -<div>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</div> +{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}} -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<h3 id="block_statement">Instruction de bloc</h3> +### Instruction de bloc -<pre class="brush: js">{ - <em>instruction_1</em>; - <em>instruction_2</em>; +```js +{ + instruction_1; + instruction_2; ... - <em>instruction_n</em>; + instruction_n; } -</pre> +``` -<h3 id="labelled_block_statement">Instruction de bloc étiquetée</h3> +### Instruction de bloc étiquetée -<pre class="brush: js">// ou, avec une étiquette : +```js +// ou, avec une étiquette : label: { - <em>instruction_1</em>; - <em>instruction_2</em>; + instruction_1; + instruction_2; ... - <em>instruction_n</em>; + instruction_n; } -</pre> +``` -<dl> - <dt><code>instruction_1</code>, <code>instruction_2</code>, <code>instruction_n</code></dt> - <dd>Les instructions qu'on souhaite regrouper au sein du bloc.</dd> - <dt><code>label</code> {{optional_inline}}</dt> - <dd>Une <a href="/fr/docs/Web/JavaScript/Reference/Statements/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/break">break</a></code>.</dd> -</dl> +- `instruction_1`, `instruction_2`, `instruction_n` + - : Les instructions qu'on souhaite regrouper au sein du bloc. +- `label` {{optional_inline}} + - : Une [étiquette](/fr/docs/Web/JavaScript/Reference/Statements/label) qui permet une identification visuelle de la cible d'une instruction [`break`](/fr/docs/Web/JavaScript/Reference/Statements/break). -<h2 id="description">Description</h2> +## Description -<p>Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. <a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else"><code>if…else</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a>). On verra ainsi :</p> +Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. [`if…else`](/fr/docs/Web/JavaScript/Reference/Statements/if...else), [`for`](/fr/docs/Web/JavaScript/Reference/Statements/for), [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while)). On verra ainsi : -<pre class="brush: js">while (x < 10) { +```js +while (x < 10) { x++; } -</pre> +``` -<p>On peut voir dans cet exemple que cette instruction se termine sans point-virgule.</p> +On peut voir dans cet exemple que cette instruction se termine sans point-virgule. -<p>L'instruction de bloc est souvent appelée <strong>instruction composée (<em>compound statement</em>)</strong> dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">instruction vide</a> pour ne rien faire là où JavaScript attend une instruction.</p> +L'instruction de bloc est souvent appelée **instruction composée (_compound statement_)** dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une [instruction vide](/fr/docs/Web/JavaScript/Reference/Statements/Empty) pour ne rien faire là où JavaScript attend une instruction. -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="block_scoping_rules_with_var_or_function_declaration_in_non-strict_mode">Règles de portée pour var ou les déclarations de fonction en mode non-strict</h3> +### Règles de portée pour var ou les déclarations de fonction en mode non-strict -<p>Les variables déclarées avec <code>var</code> ou créées avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/function">une déclaration de fonction</a> en mode non-strict <strong>n'ont pas une portée limitée au bloc</strong>. Les variables introduites dans un bloc auront la portée de la fonction ou du script englobant ce bloc. Les variables pourront alors être utilisées en dehors du bloc. Autrement dit, une instruction de bloc n'introduit pas une portée :</p> +Les variables déclarées avec `var` ou créées avec [une déclaration de fonction](/fr/docs/Web/JavaScript/Reference/Statements/function) en mode non-strict **n'ont pas une portée limitée au bloc**. Les variables introduites dans un bloc auront la portée de la fonction ou du script englobant ce bloc. Les variables pourront alors être utilisées en dehors du bloc. Autrement dit, une instruction de bloc n'introduit pas une portée : -<pre class="brush: js example-bad">var x = 1; +```js example-bad +var x = 1; { var x = 2; } console.log(x); // affiche 2 dans la console -</pre> +``` -<p>On voit 2 dans la console, car l'instruction <code>var x</code> contenue dans le bloc appartient à la même portée que l'instruction <code>var x</code> située avant le bloc.</p> +On voit 2 dans la console, car l'instruction `var x` contenue dans le bloc appartient à la même portée que l'instruction `var x` située avant le bloc. -<p>En mode non-strict, les déclarations de fonction à l'intérieur des blocs peuvent se comporter étrangement, il est déconseillé de les utiliser.</p> +En mode non-strict, les déclarations de fonction à l'intérieur des blocs peuvent se comporter étrangement, il est déconseillé de les utiliser. -<h3 id="block_scoping_rules_with_let_const_or_function_declaration_in_strict_mode">Règles de portée pour let, const ou les déclarations de fonction en mode strict</h3> +### Règles de portée pour let, const ou les déclarations de fonction en mode strict -<p>En revanche, les identifiants déclarés avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> <strong>possèdent une portée limitée au bloc</strong> :</p> +En revanche, les identifiants déclarés avec [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) **possèdent une portée limitée au bloc** : -<pre class="brush: js">let x = 1; +```js +let x = 1; { let x = 2; } -console.log(x); // affiche 1 dans la console</pre> +console.log(x); // affiche 1 dans la console +``` -<p>L'instruction <code>x = 2</code> est limitée à la portée du bloc dans laquelle elle est présente.</p> +L'instruction `x = 2` est limitée à la portée du bloc dans laquelle elle est présente. -<p>Il en va de même pour <code>const</code>:</p> +Il en va de même pour `const`: -<pre class="brush: js">const c = 1; +```js +const c = 1; { const c = 2; } -console.log(c); // affiche 1, ne déclenche pas de SyntaxError</pre> +console.log(c); // affiche 1, ne déclenche pas de SyntaxError +``` -<p>L'instruction <code>const c = 2</code> <em>ne déclenche pas</em> <code>SyntaxError: Identifier 'c' has already been declared</code>, car cet identifiant est bien unique pour ce bloc.</p> +L'instruction `const c = 2` _ne déclenche pas_ `SyntaxError: Identifier 'c' has already been declared`, car cet identifiant est bien unique pour ce bloc. -<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir de ES2015, les fonctions à l'intérieur des blocs ont une portée qui correspond à ce bloc. Avant ES2015, les fonctions de bloc étaient interdites.</p> +En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), à partir de ES2015, les fonctions à l'intérieur des blocs ont une portée qui correspond à ce bloc. Avant ES2015, les fonctions de bloc étaient interdites. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/while" ><code>while</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else" ><code>if...else</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/let" ><code>let</code></a></li> -</ul> +- [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while) +- [`if...else`](/fr/docs/Web/JavaScript/Reference/Statements/if...else) +- [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) diff --git a/files/fr/web/javascript/reference/statements/break/index.md b/files/fr/web/javascript/reference/statements/break/index.md index 95e5144230..56826770a7 100644 --- a/files/fr/web/javascript/reference/statements/break/index.md +++ b/files/fr/web/javascript/reference/statements/break/index.md @@ -8,50 +8,51 @@ tags: translation_of: Web/JavaScript/Reference/Statements/break original_slug: Web/JavaScript/Reference/Instructions/break --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>break</code></strong> permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.</p> +L'instruction **`break`** permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée. -<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-break.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><code>break [label];</code></pre> + break [label]; -<dl> - <dt><code>label</code> {{optional_inline}}</dt> - <dd>Un identifiant optionnel associé avec l'étiquette (<em>label</em>) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.</dd> -</dl> +- `label` {{optional_inline}} + - : Un identifiant optionnel associé avec l'étiquette (_label_) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire. -<h2 id="Description">Description</h2> +## Description -<p>L'instruction <code>break</code> peut être utilisée avec une étiquette (<em>label</em>) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction <code>break</code> doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.</p> +L'instruction `break` peut être utilisée avec une étiquette (_label_) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction `break` doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle. -<p>Une instruction <code>break</code>, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction <code>label</code>.</p> +Une instruction `break`, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction `label`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple_utilisant_break">Exemple simple utilisant <code>break</code></h3> +### Exemple simple utilisant `break` -<p>La fonction qui suit utilise une instruction <code>break</code> qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque <code>i</code> vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * <code>x</code>.</p> +La fonction qui suit utilise une instruction `break` qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque `i` vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 \* `x`. -<pre class="brush:js">function testBreak(x) { +```js +function testBreak(x) { var i = 0; - while (i < 6) { + while (i < 6) { if (i == 3) { break; } i += 1; } return i * x; -}</pre> +} +``` -<h3 id="Utiliser_break_avec_les_labels">Utiliser <code>break</code> avec les labels</h3> +### Utiliser `break` avec les labels -<p>Dans le code suivant, on utilise les instructions <code>break</code> avec des blocs étiquetés. Une instruction <code>break</code> doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que <code>bloc_interne</code> est compris dans <code>bloc_externe</code>.</p> +Dans le code suivant, on utilise les instructions `break` avec des blocs étiquetés. Une instruction `break` doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que `bloc_interne` est compris dans `bloc_externe`. -<pre class="brush:js">bloc_externe: { +```js +bloc_externe: { bloc_interne: { console.log ('1'); @@ -61,11 +62,12 @@ original_slug: Web/JavaScript/Reference/Instructions/break console.log ('2'); // ignoré } -</pre> +``` -<p>Dans le code qui suit, on utilise également des instructions <code>break</code> avec des blocs étiquetés mais on obtient une exception <code>SyntaxError</code> car l'instruction <code>break</code> au sein de <code>bloc_1</code> référence <code>bloc_2</code>, or <code>bloc_1</code> n'est pas compris dans <code>bloc_2</code> :</p> +Dans le code qui suit, on utilise également des instructions `break` avec des blocs étiquetés mais on obtient une exception `SyntaxError` car l'instruction `break` au sein de `bloc_1` référence `bloc_2`, or `bloc_1` n'est pas compris dans `bloc_2` : -<pre class="brush:js">bloc_1: { +```js +bloc_1: { console.log ('1'); break bloc_2; // SyntaxError: label not found } @@ -73,15 +75,16 @@ original_slug: Web/JavaScript/Reference/Instructions/break bloc_2: { console.log ('2'); } -</pre> +``` -<h3 id="Utiliser_break_dans_des_fonctions_imbriquées_dans_des_boucles">Utiliser <code>break</code> dans des fonctions imbriquées dans des boucles</h3> +### Utiliser `break` dans des fonctions imbriquées dans des boucles -<p>Dans le cas d'une fonction imbriquée dans une boucle <code>while</code> :</p> +Dans le cas d'une fonction imbriquée dans une boucle `while` : -<pre class="brush: js">function testBreak(x){ +```js +function testBreak(x){ var i = 0; - while (i < 6) { + while (i < 6) { if (i === 3) { (function() { break; @@ -92,62 +95,36 @@ bloc_2: { return i * x; } -testBreak(1); // SyntaxError: Illegal break statement</pre> +testBreak(1); // SyntaxError: Illegal break statement +``` -<p>Dans le cas d'une fonction imbriquée dans une instruction <code>label</code> :</p> +Dans le cas d'une fonction imbriquée dans une instruction `label` : -<pre class="brush: js">bloc_1: { +```js +bloc_1: { console.log('1'); (function() { break bloc_1; // SyntaxError: Undefined label 'bloc_1' })(); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Version non étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Version étiquetée ajoutée.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.break")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/continue", "continue")}}</li> - <li>{{jsxref("Instructions/label", "label")}}</li> - <li>{{jsxref("Instructions/switch", "switch")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Version non étiquetée. | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Version étiquetée ajoutée. | +| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.break")}} + +## Voir aussi + +- {{jsxref("Instructions/continue", "continue")}} +- {{jsxref("Instructions/label", "label")}} +- {{jsxref("Instructions/switch", "switch")}} diff --git a/files/fr/web/javascript/reference/statements/class/index.md b/files/fr/web/javascript/reference/statements/class/index.md index f88cd3f9b3..51b852a022 100644 --- a/files/fr/web/javascript/reference/statements/class/index.md +++ b/files/fr/web/javascript/reference/statements/class/index.md @@ -10,36 +10,34 @@ tags: translation_of: Web/JavaScript/Reference/Statements/class original_slug: Web/JavaScript/Reference/Instructions/class --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>La <strong>déclaration class</strong> crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.</p> +La **déclaration class** crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe. -<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-class.html")}} +Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}. +## Syntaxe -<p>Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.</p> + class nom [extends]{ + // corps de la classe + } -<h2 id="Syntaxe">Syntaxe</h2> +## Description -<pre class="syntaxbox">class <em>nom</em> [extends]{ - // corps de la classe -} -</pre> - -<h2 id="Description">Description</h2> - -<p>Les déclarations qui composent le corps de la classe sont exécutées en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. La propriété du constructeur est optionnelle.</p> +Les déclarations qui composent le corps de la classe sont exécutées en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). La propriété du constructeur est optionnelle. -<p>Les déclarations utilisées dans les classes ne sont pas remontées (<em>hoisted</em>) (à la différence des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonctions</a>).</p> +Les déclarations utilisées dans les classes ne sont pas remontées (_hoisted_) (à la différence des [déclarations de fonctions](/fr/docs/Web/JavaScript/Reference/Instructions/function)). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Déclarer_une_classe_simple">Déclarer une classe simple</h3> +### Déclarer une classe simple -<p>Dans l'exemple qui suit, on définit une classe <code>Polygone</code> pour laquelle on crée un sous-classe <code>Carré</code>. On note ici que la méthode <code>super()</code> ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé <code>this</code>.</p> +Dans l'exemple qui suit, on définit une classe `Polygone` pour laquelle on crée un sous-classe `Carré`. On note ici que la méthode `super()` ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé `this`. -<pre class="brush: js">class Polygone { +```js +class Polygone { constructor(hauteur, largeur) { this.nom = 'Polygone'; this.hauteur = hauteur; @@ -53,61 +51,35 @@ class Carré extends Polygone { this.nom = 'Carré'; } } -</pre> - -<div class="warning"> -<p><strong>Attention :</strong> Déclarer une classe deux fois lèvera une exception <code>SyntaxError</code>. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.</p> - -<pre class="brush: js">// Deux déclarations avec le même nom -class Toto {}; -class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared - -// Expression puis déclaration -var Truc = class {}; -class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared -</pre> -</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('ES2015', '#sec-class-definitions', 'Définitions de classe')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.class")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations <code>function</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">Les expressions <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> -</ul> +``` + +> **Attention :** Déclarer une classe deux fois lèvera une exception `SyntaxError`. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe. +> +> ```js +> // Deux déclarations avec le même nom +> class Toto {}; +> class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared +> +> // Expression puis déclaration +> var Truc = class {}; +> class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared +> ``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.class")}} + +## Voir aussi + +- [Les déclarations `function`](/fr/docs/Web/JavaScript/Reference/Instructions/function) +- [Les expressions `class`](/fr/docs/Web/JavaScript/Reference/Opérateurs/class) +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) diff --git a/files/fr/web/javascript/reference/statements/const/index.md b/files/fr/web/javascript/reference/statements/const/index.md index ed27748ab3..bb57f64976 100644 --- a/files/fr/web/javascript/reference/statements/const/index.md +++ b/files/fr/web/javascript/reference/statements/const/index.md @@ -9,38 +9,35 @@ tags: translation_of: Web/JavaScript/Reference/Statements/const original_slug: Web/JavaScript/Reference/Instructions/const --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>La <strong>déclaration <code>const</code></strong> permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.</p> +La **déclaration `const`** permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau. -<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-const.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">const <var>nom1</var> = <var>valeur1</var> [, <var>nom2</var> = <var>valeur2</var> [, ... [, <var>nomN</var> = <var>valeurN</var>]]];</pre> + const nom1 = valeur1 [, nom2 = valeur2 [, ... [, nomN = valeurN]]]; -<dl> - <dt><code>nomN</code></dt> - <dd>Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.</dd> - <dt><code>valeurN</code></dt> - <dd>La valeur à associer à la constante. Cette valeur peut être n'importe quelle <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new">expression</a> valide (éventuellement <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a>).</dd> -</dl> +- `nomN` + - : Le nom de la constante. Ce nom peut être n'importe quel identifiant valide. +- `valeurN` + - : La valeur à associer à la constante. Cette valeur peut être n'importe quelle [expression](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new) valide (éventuellement [une expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)). -<h2 id="Description">Description</h2> +## Description -<p>Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec <code>let</code>). À la différence des variables définies avec <code>var</code>, les constantes déclarées au niveau global <strong>ne sont pas</strong> des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.</p> +Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec `let`). À la différence des variables définies avec `var`, les constantes déclarées au niveau global **ne sont pas** des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction. -<p>Attention, la déclaration <code>const</code> crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.</p> +Attention, la déclaration `const` crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié. -<div class="note"> -<p><strong>Note :</strong> Les aspects liés à la <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporelle</a> de <code>let</code> s'appliquent également à <code>const</code>.</p> -</div> +> **Note :** Les aspects liés à la [zone morte temporelle](</fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let>) de `let` s'appliquent également à `const`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :</p> +Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu : -<pre class="brush:js">// On définit ma_fav comme une constante +```js +// On définit ma_fav comme une constante // et on lui affecte la valeur 7 // Généralement, par convention, les // constantes sont en majuscules @@ -102,40 +99,21 @@ const mon_tableau = []; mon_tableau.push("A"); // ["A"] // Mais on ne peut pas affecter une nouvelle valeur mon_tableau = ["B"]; // lève une exception -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.const")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/var","var")}}</li> - <li>{{jsxref("Instructions/let","let")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes">Les constantes dans le guide JavaScript</a></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}} | {{Spec2('ESDraft')}} | Aucune modification. | +| {{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}} | {{Spec2('ES2015')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.const")}} + +## Voir aussi + +- {{jsxref("Instructions/var","var")}} +- {{jsxref("Instructions/let","let")}} +- [Les constantes dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes) diff --git a/files/fr/web/javascript/reference/statements/continue/index.md b/files/fr/web/javascript/reference/statements/continue/index.md index 97157d8740..f0083f8248 100644 --- a/files/fr/web/javascript/reference/statements/continue/index.md +++ b/files/fr/web/javascript/reference/statements/continue/index.md @@ -8,68 +8,66 @@ tags: translation_of: Web/JavaScript/Reference/Statements/continue original_slug: Web/JavaScript/Reference/Instructions/continue --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <code><strong>continue</strong></code> arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.</p> +L'instruction **`continue`** arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante. -<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-continue.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">continue [ <em><var>label</var></em> ];</pre> + continue [ label ]; -<dl> - <dt><code>label</code></dt> - <dd>Paramètre optionnel. Un identifiant associé à l'étiquette (<em>label</em>) de l'instruction pour laquelle on souhaite finir l'itération en cours.</dd> -</dl> +- `label` + - : Paramètre optionnel. Un identifiant associé à l'étiquette (_label_) de l'instruction pour laquelle on souhaite finir l'itération en cours. -<h2 id="Description">Description</h2> +## Description -<p>Contrairement à {{jsxref("Instructions/break", "break")}}, <code>continue</code> ne termine pas la boucle complètement :</p> +Contrairement à {{jsxref("Instructions/break", "break")}}, `continue` ne termine pas la boucle complètement : -<ul> - <li>au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.</li> -</ul> +- au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition. -<ul> - <li>au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.</li> -</ul> +<!----> -<p>L'instruction <code>continue</code> peut éventuellement contenir une étiquette (<em>label</em>) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction <code>continue</code> soit imbriquée dans l'instruction étiquetée.</p> +- au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle. -<h2 id="Exemples">Exemples</h2> +L'instruction `continue` peut éventuellement contenir une étiquette (_label_) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction `continue` soit imbriquée dans l'instruction étiquetée. -<h3 id="Utiliser_continue_avec_while">Utiliser <code>continue</code> avec <code>while</code></h3> +## Exemples -<p>L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici <code>continue</code> est utilisé lorsque <code>i</code> vaut 3. On a donc <code>n</code> qui prend les valeurs 1, 3, 7, et 12.</p> +### Utiliser `continue` avec `while` -<pre class="brush: js">var i = 0; +L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici `continue` est utilisé lorsque `i` vaut 3. On a donc `n` qui prend les valeurs 1, 3, 7, et 12. + +```js +var i = 0; var n = 0; -while (i < 5) { +while (i < 5) { i++; if (i === 3) { continue; } n += i; } -</pre> +``` -<h3 id="Utiliser_continue_avec_une_étiquette">Utiliser <code>continue</code> avec une étiquette</h3> +### Utiliser `continue` avec une étiquette -<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p> +Dans l'exemple suivant, on a une instruction étiquetée `vérifIetJ` qui contient une autre instruction étiquetée `vérifJ`. Si l'instruction `continue` est utilisée, le programme reprend l'exécution au début de l'instruction `vérifJ`. Chaque fois que `continue` utilisé, `vérifJ` réitère jusqu'à ce que sa condition renvoie `false`. Lorsque c'est le cas, le reste de l'instruction `vérifIetJ` est exécuté. -<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code>.</p> +Si `continue` utilisait l'étiquette `vérifIetJ`, le programme continuerait au début de l'instruction `vérifIetJ`. -<p>Voir aussi {{jsxref("Instructions/label", "label")}}.</p> +Voir aussi {{jsxref("Instructions/label", "label")}}. -<pre class="brush: js">var i = 0; +```js +var i = 0; var j = 8; -vérifIetJ: while (i < 4) { +vérifIetJ: while (i < 4) { console.log("i : " + i); i += 1; - vérifJ: while (j > 4) { + vérifJ: while (j > 4) { console.log("j : "+ j); j -= 1; if ((j % 2) == 0){ @@ -80,11 +78,12 @@ vérifIetJ: while (i < 4) { console.log("i = " + i); console.log("j = " + j); } -</pre> +``` -<p>En utilisant le fragment ci-avant, on aura le résultat suivant :</p> +En utilisant le fragment ci-avant, on aura le résultat suivant : -<pre class="brush: js">"i : 0" +```js +"i : 0" // début de vérifJ "j : 8" @@ -109,52 +108,23 @@ vérifIetJ: while (i < 4) { "i : 3" "i = 4" "j = 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. Pas de version étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Ajout de la version étiquetée.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.continue")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/label", "label")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Pas de version étiquetée. | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Ajout de la version étiquetée. | +| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.continue")}} + +## Voir aussi + +- {{jsxref("Instructions/break", "break")}} +- {{jsxref("Instructions/label", "label")}} diff --git a/files/fr/web/javascript/reference/statements/debugger/index.md b/files/fr/web/javascript/reference/statements/debugger/index.md index 9307a7f217..a50ba04612 100644 --- a/files/fr/web/javascript/reference/statements/debugger/index.md +++ b/files/fr/web/javascript/reference/statements/debugger/index.md @@ -8,71 +8,44 @@ tags: translation_of: Web/JavaScript/Reference/Statements/debugger original_slug: Web/JavaScript/Reference/Instructions/debugger --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>debugger</code> </strong>permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.</p> +L'instruction **`debugger` **permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><code>debugger;</code></pre> + debugger; -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple qui suit, on utilise un code avec l'instruction <code>debugger</code> qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :</p> +Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée : -<pre class="brush:js">function codeProbablementBogue() { +```js +function codeProbablementBogue() { debugger; // exécuter des instructions qu'on veut // examiner, exécuter pas à pas etc. -}</pre> +} +``` -<p>Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction <code>debugger</code>. Cela agit comme un point d'arrêt dans le code du script :</p> +Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script : -<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png"></a></p> +[](<https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png>) -<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('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Uniquement mentionné comme mot-clé réservé.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------- | +| {{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}} | {{Spec2('ES5.1')}} | Définition initiale | +| {{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}} | {{Spec2('ES1')}} | Uniquement mentionné comme mot-clé réservé. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.statements.debugger")}}</p> +{{Compat("javascript.statements.debugger")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Outils/Debugger">Le débogueur des outils de développement Firefox</a></li> -</ul> +- [Le débogueur des outils de développement Firefox](/fr/docs/Outils/Debugger) diff --git a/files/fr/web/javascript/reference/statements/do...while/index.md b/files/fr/web/javascript/reference/statements/do...while/index.md index 4913e642ce..96265c32d8 100644 --- a/files/fr/web/javascript/reference/statements/do...while/index.md +++ b/files/fr/web/javascript/reference/statements/do...while/index.md @@ -8,80 +8,51 @@ tags: translation_of: Web/JavaScript/Reference/Statements/do...while original_slug: Web/JavaScript/Reference/Instructions/do...while --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>do...while</code></strong> crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.</p> +L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois. -<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">do - <em>instruction</em> -while (<em>condition</em>); -</pre> + do + instruction + while (condition); -<dl> - <dt><code>instruction</code></dt> - <dd>Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à <code>true</code>. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (<code>{ ... }</code>) qui permet de grouper différentes instructions en une seule.</dd> - <dt><code>condition</code></dt> - <dd>Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la <code>condition</code> donne <code>true</code> (la condition est vérifiée), <code>instruction</code> sera exécutée à nouveau. Lorsque <code>condition</code> donne <code>false</code>, le contrôle passe à l'instruction suivant la boucle <code>do...while</code>.</dd> -</dl> +- `instruction` + - : Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à `true`. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (`{ ... }`) qui permet de grouper différentes instructions en une seule. +- `condition` + - : Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la `condition` donne `true` (la condition est vérifiée), `instruction` sera exécutée à nouveau. Lorsque `condition` donne `false`, le contrôle passe à l'instruction suivant la boucle `do...while`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_do...while">Utiliser <code>do...while</code></h3> +### Utiliser `do...while` -<p>Dans l'exemple suivant, la boucle <code>do...while</code> est parcourue au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus strictement inférieur à 5.</p> +Dans l'exemple suivant, la boucle `do...while` est parcourue au moins une fois et répétée jusqu'à ce que `i` ne soit plus strictement inférieur à 5. -<pre class="brush: js">var i = 0; +```js +var i = 0; do { i += 1; console.log(i); -} while (i < 5); -</pre> +} while (i < 5); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Le point-virgule de fin est désormais optionnel.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | +| {{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}} | {{Spec2('ES6')}} | Le point-virgule de fin est désormais optionnel. | +| {{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}} | {{Spec2('ESDraft')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("javascript.statements.do_while")}} +## Voir aussi -<p>{{Compat("javascript.statements.do_while")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/while", "while")}}</li> - <li>{{jsxref("Instructions/for", "for")}}</li> -</ul> +- {{jsxref("Instructions/while", "while")}} +- {{jsxref("Instructions/for", "for")}} diff --git a/files/fr/web/javascript/reference/statements/empty/index.md b/files/fr/web/javascript/reference/statements/empty/index.md index a1dbfb03c2..32e9e3fb81 100644 --- a/files/fr/web/javascript/reference/statements/empty/index.md +++ b/files/fr/web/javascript/reference/statements/empty/index.md @@ -8,45 +8,45 @@ tags: translation_of: Web/JavaScript/Reference/Statements/Empty original_slug: Web/JavaScript/Reference/Instructions/Vide --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>Une <strong>instruction vide</strong> est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</p> +Une **instruction vide** est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une. -<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-empty.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">; -</pre> + ; -<h2 id="Description">Description</h2> +## Description -<p>L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce <a href="/fr/docs/JavaScript/Reference/Instructions/block">à l'instruction bloc</a> qui permet de combiner plusieurs instructions en une seule.</p> +L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce [à l'instruction bloc](/fr/docs/JavaScript/Reference/Instructions/block) qui permet de combiner plusieurs instructions en une seule. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :</p> +L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide : -<pre class="brush: js">var arr = [1, 2, 3]; +```js +var arr = [1, 2, 3]; // Affecter 0 pour toutes les valeurs du tableau -for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ; +for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ; console.log(arr) // [0, 0, 0] -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :</p> -</div> +> **Note :** Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel : -<pre class="brush: js">if (condition); // Attention, ce "if" ne fait rien ! +```js +if (condition); // Attention, ce "if" ne fait rien ! finDuMonde() // Cette méthode est donc toujours lancée !!! -</pre> +``` -<p>Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (<code>{}</code>). Si <code>trois</code> vaut <code>true</code>, rien ne sera exécuté, peu importera la valeur de <code>quatre</code>, la fonction <code>chargerFusée()</code> ne sera pas exécutée.</p> +Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (`{}`). Si `trois` vaut `true`, rien ne sera exécuté, peu importera la valeur de `quatre`, la fonction `chargerFusée()` ne sera pas exécutée. -<pre class="brush: js">if (un) +```js +if (un) faire1èreEtape(); else if (deux) faire4èmeEtape(); @@ -55,51 +55,23 @@ else if (trois) else if (quatre) faire4èmeEtape(); else - chargerFusée();</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.empty")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/block", "L'instruction de bloc","",1)}}</li> -</ul> + chargerFusée(); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.empty")}} + +## Voir aussi + +- {{jsxref("Instructions/block", "L'instruction de bloc","",1)}} diff --git a/files/fr/web/javascript/reference/statements/export/index.md b/files/fr/web/javascript/reference/statements/export/index.md index 30f421a8c5..0241dc3518 100644 --- a/files/fr/web/javascript/reference/statements/export/index.md +++ b/files/fr/web/javascript/reference/statements/export/index.md @@ -10,172 +10,172 @@ tags: translation_of: Web/JavaScript/Reference/Statements/export original_slug: Web/JavaScript/Reference/Instructions/export --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>export</code></strong> est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.</p> +L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. -<p>Les modules exportés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>export</code> ne peut pas être utilisée dans les scripts embarqués.</p> +Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `export` ne peut pas être utilisée dans les scripts embarqués. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">// Exporter des propriétés individuelles -export let <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var>; // utilisable avec var, const -export let <var>nom1</var> = …, <var>nom2</var> = …, …, <var>nomN</var>; // utilisable avec var, const -export function nomFonction(){...} -export class NomClasse {...} + // Exporter des propriétés individuelles + export let nom1, nom2, …, nomN; // utilisable avec var, const + export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const + export function nomFonction(){...} + export class NomClasse {...} -// Export d'une liste de valeur -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> }; + // Export d'une liste de valeur + export { nom1, nom2, …, nomN }; -// Renommage des valeurs exportées -export { <var>variable1</var> as <var>nom1</var>, <var>variable2</var> as <var>nom2</var>, …, <var>nomN</var> }; + // Renommage des valeurs exportées + export { variable1 as nom1, variable2 as nom2, …, nomN }; -// Renommage avec la décomposition pour l'affectation -export const { <var>nom1</var>, <var>nom2: truc</var><var> </var>} = o; + // Renommage avec la décomposition pour l'affectation + export const { nom1, nom2: truc } = o; -// Exports par défauts -export default <em>expression</em>; -export default function (…) { … } // fonctionne avec class, function* -export default function nom1(…) { … } // fonctionne avec class, function* -export { <var>nom1</var> as default, … }; + // Exports par défauts + export default expression; + export default function (…) { … } // fonctionne avec class, function* + export default function nom1(…) { … } // fonctionne avec class, function* + export { nom1 as default, … }; -// Agrégation de modules -export * from …; -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> } from …; -export { <var>import1</var> as <var>nom1</var>, <var>import2</var> as <var>nom2</var>, …, <var>nomN</var> } from …; -export { default } from …;</pre> + // Agrégation de modules + export * from …; + export { nom1, nom2, …, nomN } from …; + export { import1 as nom1, import2 as nom2, …, nomN } from …; + export { default } from …; + +- `nomN` + - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). + +## Description + +Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : -<dl> - <dt><code>nomN</code></dt> - <dd>Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).</dd> -</dl> +- Les exports nommés : -<h2 id="Description">Description</h2> + ```js + // exporte une fonction déclarée précédemment + export { maFonction }; -<p>Il existe deux types d'export différents : les exports <strong>nommés</strong> et les exports <strong>par défaut</strong>. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :</p> + // exporte une constante + export const machin = Math.sqrt(2); + ``` -<ul> - <li>Les exports nommés : - <pre class="brush: js">// exporte une fonction déclarée précédemment -export { maFonction }; +- Les exports par défaut (fonction) : -// exporte une constante -export const machin = Math.sqrt(2);</pre> - </li> - <li>Les exports par défaut (fonction) : - <pre class="brush: js">export default function() {} </pre> - </li> - <li>Les exports par défaut (classe) : - <pre class="brush: js">export default class {} </pre> - </li> -</ul> + ```js + export default function() {} + ``` -<p>Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.</p> +- Les exports par défaut (classe) : -<p>Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :</p> + ```js + export default class {} + ``` -<pre class="brush: js">let k; +Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant. + +Mais un export par défaut peut être importé avec n'importe quel nom, par exemple : + +```js +let k; export default k = 12; // dans le fichier test.js import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut -console.log (m); // enregistrera 12</pre> +console.log (m); // enregistrera 12 +``` -<p>La syntaxe suivante n'exporte pas le défaut depuis le module importé :</p> +La syntaxe suivante n'exporte pas le défaut depuis le module importé : -<pre class="brush: js">export * from …;</pre> +```js +export * from …; +``` -<p>Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :</p> +Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : -<pre class="brush: js">export {default} from 'mod';</pre> +```js +export {default} from 'mod'; +``` -<p>Il est possible de renommer un export afin d'éviter des conflits de nommage :</p> +Il est possible de renommer un export afin d'éviter des conflits de nommage : -<pre class="brush: js">export { maFonction as fonction1 - maVariable as variable1 };</pre> +```js +export { maFonction as fonction1 + maVariable as variable1 }; +``` -<p>On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :</p> +On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés : -<pre class="brush: js">// Dans moduleParent.js +```js +// Dans moduleParent.js export { maFonction, maVariable } from 'moduleFils1.js'; export { maClasse } from 'moduleFils2.js' // Dans le module de plus haut niveau -import { maFonction, maVariable, maClasse } from 'moduleParent.js';</pre> +import { maFonction, maVariable, maClasse } from 'moduleParent.js'; +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_d'exports_nommés">Utilisation d'exports nommés</h3> +### Utilisation d'exports nommés -<p>Dans le module, on pourra utiliser le code suivant :</p> +Dans le module, on pourra utiliser le code suivant : -<pre class="brush: js">// module "mon-module.js" +```js +// module "mon-module.js" function cube(x) { return x * x * x; } const machin = Math.PI + Math.SQRT2; export { cube, machin }; -</pre> +``` -<p>De cette façon, dans un autre script, on pourra avoir :</p> +De cette façon, dans un autre script, on pourra avoir : -<pre class="brush: js">import { cube, machin } from 'mon-module'; +```js +import { cube, machin } from 'mon-module'; console.log(cube(3)); // 27 -console.log(machin); // 4.555806215962888</pre> +console.log(machin); // 4.555806215962888 +``` -<div class="note"> -<p><strong>Note :</strong> Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} <code>"module"</code> : <code><script type="module" src="./demo.js"></script></code> sinon il y aura une erreur quant aux origines multiples (<a href="/fr/docs/Web/HTTP/CORS">CORS</a>).<br> - Il n'est pas possible de charger des modules JavaScript via une URL <code>file://</code> pour des raisons de sécurité (voir <a href="/fr/docs/Web/HTTP/CORS">CORS</a> également). Il faudra utiliser un serveur HTTP.</p> -</div> +> **Note :** Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} `"module"` : `<script type="module" src="./demo.js"></script>` sinon il y aura une erreur quant aux origines multiples ([CORS](/fr/docs/Web/HTTP/CORS)). +> Il n'est pas possible de charger des modules JavaScript via une URL `file://` pour des raisons de sécurité (voir [CORS](/fr/docs/Web/HTTP/CORS) également). Il faudra utiliser un serveur HTTP. -<h3 id="Utilisation_d'exports_par_défaut">Utilisation d'exports par défaut</h3> +### Utilisation d'exports par défaut -<p>Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours<em> </em>pour le module, on peut utiliser un export par défaut :</p> +Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours\* \*pour le module, on peut utiliser un export par défaut : -<pre class="brush: js">// module "mon-module.js" +```js +// module "mon-module.js" export default function cube(x) { return x * x * x; } -</pre> +``` -<p>Alors, dans un autre script, il sera facile d'importer l'export par défaut :</p> +Alors, dans un autre script, il sera facile d'importer l'export par défaut : -<pre class="brush: js">import cube from './mon-module.js'; +```js +import cube from './mon-module.js'; console.log(cube(3)); // 27 -</pre> - -<p>Notez qu'il n'est pas possible d'utiliser <code>var</code>, <code>let</code> ou <code>const</code> avec <code>export default</code>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.export")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/import", "import")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li> - <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post par Jason Orendorff</li> - <li><a href="https://exploringjs.com/es6/ch_modules.html">Livre d'Axel Rauschmayer : "Exploring JS: Modules"</a></li> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li> -</ul> +``` + +Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('ES2015', '#sec-exports', 'Exports')}} | {{Spec2('ES2015')}} | Définition initiale | +| {{SpecName('ESDraft', '#sec-exports', 'Exports')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.export")}} + +## Voir aussi + +- {{jsxref("Instructions/import", "import")}} +- [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) +- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff +- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) +- [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) diff --git a/files/fr/web/javascript/reference/statements/for-await...of/index.md b/files/fr/web/javascript/reference/statements/for-await...of/index.md index 131c9c4ef3..cf6c423365 100644 --- a/files/fr/web/javascript/reference/statements/for-await...of/index.md +++ b/files/fr/web/javascript/reference/statements/for-await...of/index.md @@ -8,34 +8,32 @@ tags: translation_of: Web/JavaScript/Reference/Statements/for-await...of original_slug: Web/JavaScript/Reference/Instructions/for-await...of --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>for await...of</code> </strong>permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.</p> +L'instruction **`for await...of` **permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) { - <em>instruction -</em>} -</pre> + for await (variable of iterable) { + instruction + } -<dl> - <dt><code>variable</code></dt> - <dd>À chaque itération, la valeur d'une propriété différente est affectée à <em>variable</em>. Cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>.</dd> - <dt><code>iterable</code></dt> - <dd>Un objet pour lequel on parcourt les propriétés itérables.</dd> -</dl> +- `variable` + - : À chaque itération, la valeur d'une propriété différente est affectée à _variable_. Cette variable peut être déclarée avec `const`, `let` ou `var`. +- `iterable` + - : Un objet pour lequel on parcourt les propriétés itérables. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Parcourir_des_itérables_asynchrones">Parcourir des itérables asynchrones</h3> +### Parcourir des itérables asynchrones -<pre class="brush:js">var asyncIterable = { +```js +var asyncIterable = { [Symbol.asyncIterator]() { return { i: 0, next() { - if (this.i < 3) { + if (this.i < 3) { return Promise.resolve({ value: this.i++, done: false }); } @@ -53,31 +51,32 @@ original_slug: Web/JavaScript/Reference/Instructions/for-await...of // 0 // 1 // 2 -</pre> +``` -<h3 id="Parcourir_des_générateurs_asynchrones">Parcourir des générateurs asynchrones</h3> +### Parcourir des générateurs asynchrones -<p>Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec <code>for await...of</code>:</p> +Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec `for await...of`: -<pre>async function* asyncGenerator() { - var i = 0; - while (i < 3) { - yield i++; - } -} + async function* asyncGenerator() { + var i = 0; + while (i < 3) { + yield i++; + } + } -(async function() { - for await (let num of asyncGenerator()) { - console.log(num); - } -})(); -// 0 -// 1 -// 2</pre> + (async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } + })(); + // 0 + // 1 + // 2 -<p>Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à <code>for await... of</code>. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et <code>for await...of</code> afin de calculer la taille de la réponse fournie par l'API :</p> +Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à `for await... of`. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et `for await...of` afin de calculer la taille de la réponse fournie par l'API : -<pre class="brush: js">async function* streamAsyncIterator(stream) { +```js +async function* streamAsyncIterator(stream) { const reader = stream.getReader(); try { while (true) { @@ -107,33 +106,19 @@ async function getResponseSize(url) { console.log(`Taille de la réponse : ${responseSize} octets`); return responseSize; } -getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.for_await_of")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/for...of")}}</li> -</ul> +getResponseSize('https://jsonplaceholder.typicode.com/photos'); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | +| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.for_await_of")}} + +## Voir aussi + +- {{jsxref("Instructions/for...of")}} diff --git a/files/fr/web/javascript/reference/statements/for...in/index.md b/files/fr/web/javascript/reference/statements/for...in/index.md index 09e460472d..bff2b835d6 100644 --- a/files/fr/web/javascript/reference/statements/for...in/index.md +++ b/files/fr/web/javascript/reference/statements/for...in/index.md @@ -9,56 +9,53 @@ tags: translation_of: Web/JavaScript/Reference/Statements/for...in original_slug: Web/JavaScript/Reference/Instructions/for...in --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'<strong>instruction <code>for...in</code></strong> permet d'itérer sur les <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">propriétés énumérables</a> d'un objet qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">des symboles</a>. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).</p> +L'**instruction `for...in`** permet d'itérer sur les [propriétés énumérables](/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement) d'un objet qui ne sont pas [des symboles](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol). Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions). -<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-forin.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">for (<var>variable</var> in <var>objet</var>) { -<em> instructions</em> -}</pre> + for (variable in objet) { + instructions + } -<dl> - <dt><code>variable</code></dt> - <dd>Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.</dd> - <dt><code>objet</code></dt> - <dd>L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.</dd> -</dl> +- `variable` + - : Un nom de propriété différent est assigné à la variable à chaque itération de la boucle. +- `objet` + - : L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle. -<h2 id="Description">Description</h2> +## Description -<p>Une boucle <code>for...in</code> ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de <code>Object.prototype</code> et <code>String.prototype</code> comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).</p> +Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes). -<h3 id="Les_propriétés_ajoutées_modifiées_ou_supprimées">Les propriétés ajoutées, modifiées ou supprimées</h3> +### Les propriétés ajoutées, modifiées ou supprimées -<p>Une boucle <code>for...in</code> parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).</p> +Une boucle `for...in` parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs). -<p>Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.</p> +Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte. -<p>Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.</p> +Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée. -<h3 id="Utiliser_for...in_et_parcourir_un_tableau">Utiliser <code>for...in</code> et parcourir un tableau</h3> +### Utiliser `for...in` et parcourir un tableau -<div class="note"> -<p><strong>Note :</strong> <code>for...in</code> ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.</p> -</div> +> **Note :** `for...in` ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important. -<p>Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que <code>for...in</code> renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.</p> +Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que `for...in` renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées. -<p>L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant <code>for...in</code>, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.</p> +L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant `for...in`, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini. -<h3 id="Itérer_uniquement_sur_les_propriétés_non_héritées">Itérer uniquement sur les propriétés non héritées</h3> +### Itérer uniquement sur les propriétés non héritées -<p>Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}</p> +Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>La boucle <code>for...in</code> qui suit utilise parcourt l'objet <code>obj</code> et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.</p> +La boucle `for...in` qui suit utilise parcourt l'objet `obj` et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur. -<pre class="brush: js">var obj = {a:1, b:2, c:3}; +```js +var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); @@ -67,11 +64,13 @@ for (var prop in obj) { // Affiche dans la console : // "obj.a = 1" // "obj.b = 2" -// "obj.c = 3"</pre> +// "obj.c = 3" +``` -<p>La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :</p> +La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées : -<pre class="brush: js">var triangle = {a:1, b:2, c:3}; +```js +var triangle = {a:1, b:2, c:3}; function TriangleCouleur() { this.couleur = "rouge"; @@ -88,69 +87,46 @@ for (var prop in obj) { } // Affichera dans la console : -// "obj.couleur = rouge"</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', '#sec-12.6.3', 'for...in statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.for_in")}}</p> - -<h3 id="Expressions_avec_initialisateur">Expressions avec initialisateur</h3> - -<p>Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (<code>i=0</code>) dans un boucle <code>for...in</code> :</p> - -<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +// "obj.couleur = rouge" +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.for_in")}} + +### Expressions avec initialisateur + +Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (`i=0`) dans un boucle `for...in` : + +```js example-bad +var obj = {a:1, b:2, c:3}; for(var i=0 in obj) { console.log(obj[i]); } // 1 // 2 // 3 -</pre> +``` -<p>Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("<em><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a></em>") en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (cf. {{bug(748550)}} et {{bug(1164741)}}).</p> +Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("_[for-in loop head declarations may not have initializers](/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer)_") en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (cf. {{bug(748550)}} et {{bug(1164741)}}). -<p>Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.</p> +Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés</li> - <li>{{jsxref("Instructions/for","for")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le rattachement et le caractère énumérable des propriétés</a></li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.</li> -</ul> +- {{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés +- {{jsxref("Instructions/for","for")}} +- [Le rattachement et le caractère énumérable des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms. diff --git a/files/fr/web/javascript/reference/statements/for...of/index.md b/files/fr/web/javascript/reference/statements/for...of/index.md index dfda033855..3152676b06 100644 --- a/files/fr/web/javascript/reference/statements/for...of/index.md +++ b/files/fr/web/javascript/reference/statements/for...of/index.md @@ -9,54 +9,56 @@ tags: translation_of: Web/JavaScript/Reference/Statements/for...of original_slug: Web/JavaScript/Reference/Instructions/for...of --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'<strong>instruction <code>for...of</code></strong> permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.</p> +L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété. -<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-forof.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">for (<em><var>variable</var></em> of iterable) - <em>instruction</em> -</pre> + for (variable of iterable) + instruction -<dl> - <dt><code>variable</code></dt> - <dd>À chaque itération, la valeur d'une propriété différente est affectée à <code><em>variable</em></code> (cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>).</dd> - <dt><code>iterable</code></dt> - <dd>L'objet dont on parcourt les propriétés énumérables.</dd> - <dt><code>instruction</code></dt> - <dd>Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.</dd> -</dl> +- `variable` + - : À chaque itération, la valeur d'une propriété différente est affectée à `variable` (cette variable peut être déclarée avec `const`, `let` ou `var`). +- `iterable` + - : L'objet dont on parcourt les propriétés énumérables. +- `instruction` + - : Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_for...of_sur_un_tableau">Utiliser <code>for...of</code> sur un tableau</h3> +### Utiliser `for...of` sur un tableau -<pre class="brush: js">let tableauItérable = [1, 2, 3]; +```js +let tableauItérable = [1, 2, 3]; for (let valeur of tableauItérable) { console.log(valeur); } // 1 // 2 -// 3</pre> +// 3 +``` -<p>Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code> à la place de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> :</p> +Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const) à la place de [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) : -<pre class="brush: js">let tableauItérable = [1, 2, 3]; +```js +let tableauItérable = [1, 2, 3]; for (const valeur of tableauItérable) { console.log(valeur); } // 1 // 2 -// 3</pre> +// 3 +``` -<h3 id="Parcourir_une_chaîne_de_caractères_avec_for...of">Parcourir une chaîne de caractères avec <code>for...of</code></h3> +### Parcourir une chaîne de caractères avec `for...of` -<pre class="brush: js">let iterable = 'pixel'; +```js +let iterable = 'pixel'; for (let valeur of iterable) { console.log(valeur); @@ -65,21 +67,25 @@ for (let valeur of iterable) { // i // x // e -// l</pre> +// l +``` -<h3 id="Parcourir_un_tableau_typé_(jsxref(TypedArray))">Parcourir un tableau typé ({{jsxref("TypedArray")}})</h3> +### Parcourir un tableau typé ({{jsxref("TypedArray")}}) -<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]); +```js +let iterable = new Uint8Array([0x00, 0xff]); for (let valeur of iterable) { console.log(valeur); } // 0 -// 255</pre> +// 255 +``` -<h3 id="Parcourir_une_jsxref(Map)">Parcourir une {{jsxref("Map")}}</h3> +### Parcourir une {{jsxref("Map")}} -<pre class="brush: js">let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); +```js +let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); for (let element of iterable) { console.log(element); @@ -93,13 +99,15 @@ for (let [clef, valeur] of iterable) { } // 1 // 2 -// 3</pre> +// 3 +``` -<h3 id="Utiliser_Array.prototype.forEach()">Utiliser <code>Array.prototype.forEach()</code></h3> +### Utiliser `Array.prototype.forEach()` -<p>Pour obtenir les mêmes valeurs qu'avec une boucle <code>for...of</code>, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :</p> +Pour obtenir les mêmes valeurs qu'avec une boucle `for...of`, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} : -<pre class="brush: js">let arr = [3, 5, 7]; +```js +let arr = [3, 5, 7]; arr.toto = "coucou"; arr.forEach(function (element, index) { @@ -112,13 +120,15 @@ arr.forEach(function (element, index) { Object.keys(arr).forEach(function (element, index) { console.log(arr[element]); // affiche "3", "5", "7", "coucou" console.log(arr[index]); // affiche "3", "5", "7", undefined -});</pre> +}); +``` -<h3 id="Parcourir_l'objet_arguments">Parcourir l'objet <code>arguments</code></h3> +### Parcourir l'objet `arguments` -<p>Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :</p> +Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction : -<pre class="brush: js">(function() { +```js +(function() { for (let argument of arguments){ console.log(argument); } @@ -127,26 +137,28 @@ Object.keys(arr).forEach(function (element, index) { // 1 // 2 // 3 -</pre> +``` -<h3 id="Parcourir_des_collections_DOM">Parcourir des collections DOM</h3> +### Parcourir des collections DOM -<p>Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe <code>read</code> aux paragraphes qui sont des descendants directs d'un article :</p> +Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe `read` aux paragraphes qui sont des descendants directs d'un article : -<pre class="brush:js">// Note : Cela ne fonctionnera que pour les plates-formes +```js +// Note : Cela ne fonctionnera que pour les plates-formes // qui implémentent NodeList.prototype[Symbol.iterator] -let articleParagraphs = document.querySelectorAll("article > p"); +let articleParagraphs = document.querySelectorAll("article > p"); for (let paragraph of articleParagraphs) { paragraph.classList.add("read"); } -</pre> +``` -<h3 id="Clôturer_les_itérateurs">Clôturer les itérateurs</h3> +### Clôturer les itérateurs -<p>Dans les boucles <code>for...of</code>, on peut provoquer la fin de l'itérateur avec <code>break</code>, <code>continue</code>, <code>throw</code>, ou <code>return</code>. Dans ces cas, l'itérateur est fermé.</p> +Dans les boucles `for...of`, on peut provoquer la fin de l'itérateur avec `break`, `continue`, `throw`, ou `return`. Dans ces cas, l'itérateur est fermé. -<pre class="brush: js">function* toto() { +```js +function* toto() { yield 1; yield 2; yield 3; @@ -156,13 +168,14 @@ for (let o of toto()) { console.log(o); break; // L'itérateur est fermé } -</pre> +``` -<h3 id="Itérer_sur_les_générateurs">Itérer sur les générateurs</h3> +### Itérer sur les générateurs -<p>Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :</p> +Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} : -<pre class="brush:js">function* fibonacci() { // une fonction génératrice +```js +function* fibonacci() { // une fonction génératrice let [prev, curr] = [0, 1]; while (true) { [prev, curr] = [curr, prev + curr]; @@ -173,22 +186,23 @@ for (let o of toto()) { for (let n of fibonacci()) { console.log(n); // on arrête la séquence à 1000 - if (n >= 1000){ + if (n >= 1000){ break; } } -</pre> +``` -<h3 id="Itérer_sur_les_autres_objets_itérables">Itérer sur les autres objets itérables</h3> +### Itérer sur les autres objets itérables -<p>Il est aussi possible d'itérer sur un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a> de façon explicite :</p> +Il est aussi possible d'itérer sur un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_») de façon explicite : -<pre class="brush: js">var iterable = { +```js +var iterable = { [Symbol.iterator]() { return { i: 0, next() { - if (this.i < 3) { + if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; @@ -203,19 +217,21 @@ for (let value of iterable) { console.log("fini !"); // 0 // 1 -// 2</pre> +// 2 +``` -<h3 id="Les_différences_entre_for...of_et_for...in">Les différences entre <code>for...of</code> et <code>for...in</code></h3> +### Les différences entre `for...of` et `for...in` -<p>Les deux instructions <code>for...in</code> et <code>for...of</code> permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.</p> +Les deux instructions `for...in` et `for...of` permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble. -<p>L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">les propriétés énumérables</a> d'un objet dans un ordre arbitraire.</p> +L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir [les propriétés énumérables](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) d'un objet dans un ordre arbitraire. -<p>L'instruction <code>for...of</code> permet quant à elle de parcourir les données contenues dans l'<a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables">objet itérable</a> visé.</p> +L'instruction `for...of` permet quant à elle de parcourir les données contenues dans l'[objet itérable](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables) visé. -<p>Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle <code>for...of</code> et une boucle <code>for...in</code> utilisées sur un tableau ({{jsxref("Array")}}).</p> +Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle `for...of` et une boucle `for...in` utilisées sur un tableau ({{jsxref("Array")}}). -<pre class="brush:js">Object.prototype.objCustom = function() {}; +```js +Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; @@ -235,36 +251,43 @@ for (let i in iterable) { for (let i of iterable) { console.log(i); // affiche 3, 5, 7 } -</pre> +``` -<p>Chaque objet héritera de la propriété <code>objCustom</code> et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété <code>arrCustom</code> car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet <code>iterable</code> hérite donc des propriétés <code>objCustom</code> et <code>arrCustom</code> grâce <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">à l'héritage et à la chaîne de prototypes</a>.</p> +Chaque objet héritera de la propriété `objCustom` et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété `arrCustom` car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet `iterable` hérite donc des propriétés `objCustom` et `arrCustom` grâce [à l'héritage et à la chaîne de prototypes](/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes). -<pre class="brush: js">for (let i in iterable) { +```js +for (let i in iterable) { console.log(i); // affiche 0, 1, 2, "toto", // "arrCustom" et "objCustom" -}</pre> +} +``` -<p>Cette boucle ne parcourt que les <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">propriétés énumérables</a> de l'objet <code>iterable</code> dans un ordre arbitraire. Les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> ou <code>hello</code> ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés <code>arrCustom</code> et <code>objCustom</code>. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.</p> +Cette boucle ne parcourt que les [propriétés énumérables](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) de l'objet `iterable` dans un ordre arbitraire. Les éléments du tableau `3`, `5`, `7` ou `hello` ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés `arrCustom` et `objCustom`. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}. -<pre class="brush: js">for (let i in iterable) { +```js +for (let i in iterable) { if (iterable.hasOwnProperty(i)) { console.log(i); // affiche 0, 1, 2, "toto" } -}</pre> +} +``` -<p>Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés <code>0</code>, <code>1</code>, <code>2</code> et <code>toto</code> car ce sont des propriétés directement rattachées à l'objet <code>iterable</code>. En revanche, les propriétés <code>arrCustom</code> et <code>objCustom</code> ne sont pas affichées car elles proviennent de l'héritage.</p> +Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés `0`, `1`, `2` et `toto` car ce sont des propriétés directement rattachées à l'objet `iterable`. En revanche, les propriétés `arrCustom` et `objCustom` ne sont pas affichées car elles proviennent de l'héritage. -<pre class="brush: js">for (let i of iterable) { +```js +for (let i of iterable) { console.log(i); // affiche 3, 5, 7 -}</pre> +} +``` -<p>Cette boucle parcourt les valeurs définies comme itérables par <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">l'objet itérable</a><strong> </strong>et dans ce cas ce sont les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> et pas les propriétés de l'objet.</p> +Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB)\*\* \*\*et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet. -<h3 id="Attention_à_ne_pas_réutiliser_les_générateurs">Attention à ne pas réutiliser les générateurs</h3> +### Attention à ne pas réutiliser les générateurs -<p>Les générateurs ne doivent pas être réutilisés, même lorsque la boucle <code>for...of</code> a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).</p> +Les générateurs ne doivent pas être réutilisés, même lorsque la boucle `for...of` a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}). -<pre class="brush: js">var gen = (function *(){ +```js +var gen = (function *(){ yield 1; yield 2; yield 3; @@ -277,37 +300,21 @@ for (let o of gen) { // Le générateur ne doit pas être réutilisé ! for (let o of gen){ console.log(o); // Ceci n'est jamais exécuté -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.for_of")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Map.prototype.forEach()")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.for_of")}} + +## Voir aussi + +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Map.prototype.forEach()")}} diff --git a/files/fr/web/javascript/reference/statements/for/index.md b/files/fr/web/javascript/reference/statements/for/index.md index 7b8da7b5f4..977a80baff 100644 --- a/files/fr/web/javascript/reference/statements/for/index.md +++ b/files/fr/web/javascript/reference/statements/for/index.md @@ -8,138 +8,113 @@ tags: translation_of: Web/JavaScript/Reference/Statements/for original_slug: Web/JavaScript/Reference/Instructions/for --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <code><strong>for</strong></code> crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">une instruction de bloc</a>) à exécuter dans la boucle.</p> +L'instruction **`for`** crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement [une instruction de bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc)) à exécuter dans la boucle. -<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-for.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">for ([<em>initialisation</em>]; [<em>condition</em>]; [<em>expression_finale</em>]) - <em>instruction</em> -</pre> + for ([initialisation]; [condition]; [expression_finale]) + instruction -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>initialisation</code></dt> - <dd>Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé <code>var</code> ou <code>let</code>. Les variables déclarées avec <code>var</code> se situent dans la même portée que la boucle <code>for</code> (elles ne sont pas locales au sein de la boucle), les variables déclarées avec <code>let</code> sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.</dd> - <dt><code>condition</code></dt> - <dd>Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'<code>instruction </code>est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut <code>false</code>), l'exécution se poursuivra à la première expression qui suit la boucle <code>for</code>.</dd> - <dt><code>expression_finale</code></dt> - <dd>Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression <code>condition</code>. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.</dd> - <dt><code>instruction</code></dt> - <dd>Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de <a href="/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block">bloc</a> (<code>{ ... }</code>) qui regroupera ces différentes instructions.</dd> -</dl> +- `initialisation` + - : Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé `var` ou `let`. Les variables déclarées avec `var` se situent dans la même portée que la boucle `for` (elles ne sont pas locales au sein de la boucle), les variables déclarées avec `let` sont locales à la boucle. Le résultat de l'expression n'est pas utilisé. +- `condition` + - : Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'`instruction `est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut `false`), l'exécution se poursuivra à la première expression qui suit la boucle `for`. +- `expression_finale` + - : Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression `condition`. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation. +- `instruction` + - : Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de [bloc](/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block) (`{ ... }`) qui regroupera ces différentes instructions. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_for">Utiliser <code>for</code></h3> +### Utiliser `for` -<p>L'instruction <code>for</code> qui suit débute en déclarant la variable <code>i</code> et en l'initialisant à 0. Elle vérifie que <code>i</code> est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente <code>i</code> de 1, ce qui sera fait à chaque passage dans la boucle.</p> +L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle. -<pre class="brush: js">for (var i = 0; i < 9; i++) { +```js +for (var i = 0; i < 9; i++) { n += i; myfunc(n); } -</pre> +``` -<h3 id="Expressions_optionnelles_pour_for">Expressions optionnelles pour <code>for</code></h3> +### Expressions optionnelles pour `for` -<p>Les trois expressions qui composent l'instruction <code>for</code> sont optionnelles :</p> +Les trois expressions qui composent l'instruction `for` sont optionnelles : -<p>Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :</p> +Par exemple, le bloc pour l'initialisation peut ne pas être utilisé : -<pre class="brush: js">var i = 0; -for (; i < 9; i++) { +```js +var i = 0; +for (; i < 9; i++) { console.log(i); // d'autres instructions } -</pre> +``` -<p>De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.</p> +De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie. -<pre class="brush: js">for (var i = 0;; i++) { +```js +for (var i = 0;; i++) { console.log(i); - if (i > 3) break; + if (i > 3) break; // d'autres instructions -}</pre> +} +``` -<p>Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.</p> +Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée. -<pre class="brush: js">var i = 0; +```js +var i = 0; for (;;) { - if (i > 3) break; + if (i > 3) break; console.log(i); i++; } -</pre> +``` -<h3 id="Utiliser_for_avec_une_instruction_vide">Utiliser <code>for</code> avec une instruction vide</h3> +### Utiliser `for` avec une instruction vide -<p>L'instruction <code>for</code> qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.</p> +L'instruction `for` qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul. -<pre class="brush: js">function showOffsetPos (sId) { +```js +function showOffsetPos (sId) { var nLeft = 0, nTop = 0; for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent); console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;"); -}</pre> - -<div class="note"><p><strong>Note :</strong> Dans cas, où on n'utilise pas la section d'instruction,<strong> il faut mettre un point-virgule immédiatement après la déclaration de la boucle.</strong></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('ESDraft', '#sec-for-statement', 'for statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.for")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/continue", "continue")}}</li> - <li>{{jsxref("Instructions/vide", "Instruction vide","",1)}}</li> - <li>{{jsxref("Instructions/while", "while")}}</li> - <li>{{jsxref("Instructions/do...while", "do...while")}}</li> - <li>{{jsxref("Instructions/for...in", "for...in")}}</li> - <li>{{jsxref("Instructions/for...of", "for...of")}}</li> -</ul> +} +``` + +> **Note :** Dans cas, où on n'utilise pas la section d'instruction, **il faut mettre un point-virgule immédiatement après la déclaration de la boucle.** + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-12.6.2', 'instruction for')}} | {{Spec2('ES1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.for")}} + +## Voir aussi + +- {{jsxref("Instructions/break", "break")}} +- {{jsxref("Instructions/continue", "continue")}} +- {{jsxref("Instructions/vide", "Instruction vide","",1)}} +- {{jsxref("Instructions/while", "while")}} +- {{jsxref("Instructions/do...while", "do...while")}} +- {{jsxref("Instructions/for...in", "for...in")}} +- {{jsxref("Instructions/for...of", "for...of")}} diff --git a/files/fr/web/javascript/reference/statements/function/index.md b/files/fr/web/javascript/reference/statements/function/index.md index 9a27ccb426..0ad6510645 100644 --- a/files/fr/web/javascript/reference/statements/function/index.md +++ b/files/fr/web/javascript/reference/statements/function/index.md @@ -8,45 +8,41 @@ tags: translation_of: Web/JavaScript/Reference/Statements/function original_slug: Web/JavaScript/Reference/Instructions/function --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>La déclaration <strong><code>function</code></strong> (ou l'instruction <code>function</code>) permet de définir une fonction et les paramètres que celle-ci utilise.</p> +La déclaration **`function`** (ou l'instruction `function`) permet de définir une fonction et les paramètres que celle-ci utilise. -<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-function.html")}} +Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}. +## Syntaxe -<p>Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.</p> + function nom([param1[, param2,[..., paramN]]]) { + [instructions] + } -<h2 id="Syntaxe">Syntaxe</h2> +- `nom` + - : Le nom de la fonction. +- `param`N + - : Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs). +- `instructions` + - : Les instructions qui constituent le corps de la fonction. -<pre class="syntaxbox">function <em>nom</em>([<em>param1</em>[, <em>param2</em>,[..., <em>paramN</em>]]]) { - [<em>instructions</em>] -} -</pre> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction.</dd> - <dt><code>param</code>N</dt> - <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).</dd> - <dt><code>instructions</code></dt> - <dd>Les instructions qui constituent le corps de la fonction.</dd> -</dl> - -<h2 id="Description">Description</h2> +## Description -<p>Une fonction créée via une déclaration de fonction est un objet <code>Function</code> et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet <code>Function</code>. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.</p> +Une fonction créée via une déclaration de fonction est un objet `Function` et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet `Function`. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques. -<p>Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).</p> +Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}). -<p>Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.</p> +Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner. -<h3 id="Fonctions_créées_conditionnellement">Fonctions créées conditionnellement</h3> +### Fonctions créées conditionnellement -<p>Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction <code>if</code>). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir <a href="https://kangax.github.io/nfe/#function-statements">cet article</a> (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.</p> +Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction `if`). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir [cet article](https://kangax.github.io/nfe/#function-statements) (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions. -<pre class="brush: js">var remontee = "toto" in this; +```js +var remontee = "toto" in this; console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`); if (false) { function toto(){ return 1; } @@ -63,11 +59,12 @@ if (false) { // // Pour Safari: // 'toto' est remontée. typeof toto vaut function -</pre> +``` -<p>On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec <code>true</code>) :</p> +On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec `true`) : -<pre class="brush: js">var remontee = "toto" in this; +```js +var remontee = "toto" in this; console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`); if (true) { function toto(){ return 1; } @@ -83,90 +80,65 @@ if (true) { // 'toto' n'est pas remontée. typeof toto vaut undefined // // Pour Safari: -// 'toto' est remontée. typeof toto vaut function</pre> +// 'toto' est remontée. typeof toto vaut function +``` -<h3 id="La_«_remontée_»_des_déclarations_de_fonction">La « remontée » des déclarations de fonction</h3> +### La « remontée » des déclarations de fonction -<p>Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :</p> +Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée : -<pre class="brush: js">remontée(); // affiche "toto" dans la console +```js +remontée(); // affiche "toto" dans la console function remontée() { console.log("toto"); } -</pre> +``` -<p>On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :</p> +On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées : -<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function +```js +nonRemontée(); // TypeError: nonRemontée is not a function var nonRemontée = function() { console.log("truc"); }; -</pre> +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_function">Utiliser <code>function</code></h3> +### Utiliser `function` -<p>Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits <code>a</code>, <code>b</code>, et <code>c</code>.</p> +Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits `a`, `b`, et `c`. -<pre class="brush: js">function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) { +```js +function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) { return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699; } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.function")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li> - <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">L'instruction <code>async function</code> (les déclarations des fonctions asynchrones)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">L'opérateur <code>async function</code> (les expressions de fonctions asynchrones)</a></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.function")}} + +## Voir aussi + +- {{jsxref("Fonctions", "Les fonctions","",1)}} +- {{jsxref("Function")}} +- {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}} +- L'instruction {{jsxref("Instructions/function*", "function*")}} +- L'expression {{jsxref("Opérateurs/function*", "function*")}} +- {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}} +- {{jsxref("GeneratorFunction")}} +- [L'instruction `async function` (les déclarations des fonctions asynchrones)](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) +- [L'opérateur `async function` (les expressions de fonctions asynchrones)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function) diff --git a/files/fr/web/javascript/reference/statements/function_star_/index.md b/files/fr/web/javascript/reference/statements/function_star_/index.md index 2d13a1b8ae..32e34f029a 100644 --- a/files/fr/web/javascript/reference/statements/function_star_/index.md +++ b/files/fr/web/javascript/reference/statements/function_star_/index.md @@ -12,51 +12,45 @@ tags: translation_of: Web/JavaScript/Reference/Statements/function* original_slug: Web/JavaScript/Reference/Instructions/function* --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>La déclaration <code><strong>function*</strong></code> (le mot-clé <code>function</code> suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).</p> +La déclaration **`function*`** (le mot-clé `function` suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}). -<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}} +Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}. +## Syntaxe -<div> -<p>Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.</p> -</div> + function* nom([param1[, param2[, ... paramN]]]) { + instructions + } -<h2 id="Syntaxe">Syntaxe</h2> +- `nom` + - : Le nom de la fonction. +- `paramN` + - : Le nom d'un paramètre formel passé à la fonction. +- `instructions` + - : Les instructions qui constituent le corps de la fonction. -<pre class="syntaxbox notranslate">function* <em>nom</em>([<em>param1</em>[, <em>param2</em>[, ... <em>paramN</em>]]]) { - <em>instructions</em> -} -</pre> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction.</dd> - <dt><code>paramN</code></dt> - <dd>Le nom d'un paramètre formel passé à la fonction.</dd> - <dt><code>instructions</code></dt> - <dd>Les instructions qui constituent le corps de la fonction.</dd> -</dl> - -<h2 id="Description">Description</h2> +## Description -<p>Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.</p> +Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives. -<p>Les générateurs, combinés avec <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">les promesses</a>, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les <em>callbacks</em> (fonctions de rappel) et <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">l'inversion de contrôle</a>.</p> +Les générateurs, combinés avec [les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses), sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les _callbacks_ (fonctions de rappel) et [l'inversion de contrôle](https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/). -<p>Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode <code>next()</code> de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode <code>next()</code> renvoie un objet dont la propriété <code>value</code> contient la valeur générée et une propriété <code>done</code> qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode <code>next()</code> avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression <code>yield</code> (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à <code>next()</code>.</p> +Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode `next()` de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode `next()` renvoie un objet dont la propriété `value` contient la valeur générée et une propriété `done` qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode `next()` avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression `yield` (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à `next()`. -<p>On peut utiliser une instruction <code>return</code> dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (<code>done</code> vaudra <code>true</code>). La valeur renvoyée par l'instruction <code>return</code> sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.</p> +On peut utiliser une instruction `return` dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (`done` vaudra `true`). La valeur renvoyée par l'instruction `return` sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs. -<p>À l'instar d'une instruction <code>return</code>, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à <code>next()</code> n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme <code>{value: undefined, done: true}</code>.</p> +À l'instar d'une instruction `return`, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à `next()` n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme `{value: undefined, done: true}`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<pre class="brush: js notranslate">function* creerID(){ +```js +function* creerID(){ var index = 0; while (true) { yield index++; @@ -69,11 +63,12 @@ console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); // 3 -</pre> +``` -<h3 id="Exemple_utilisant_des_arguments">Exemple utilisant des arguments</h3> +### Exemple utilisant des arguments -<pre class="brush: js notranslate">function* logGenerator() { +```js +function* logGenerator() { console.log(yield); console.log(yield); console.log(yield); @@ -87,11 +82,12 @@ gen.next(); gen.next('bretzel'); // bretzel gen.next('california'); // california gen.next('mayonnaise'); // mayonnaise -</pre> +``` -<h3 id="Exemple_utilisant_yield*">Exemple utilisant <code>yield*</code></h3> +### Exemple utilisant `yield*` -<pre class="brush: js notranslate">function* autreGenerateur(i) { +```js +function* autreGenerateur(i) { yield i + 1; yield i + 2; yield i + 3; @@ -109,11 +105,12 @@ console.log(gen.next().value); // 11 console.log(gen.next().value); // 12 console.log(gen.next().value); // 13 console.log(gen.next().value); // 20 -</pre> +``` -<h3 id="Utilisation_de_return">Utilisation de <code>return</code></h3> +### Utilisation de `return` -<pre class="brush: js notranslate">function* yieldAndReturn() { +```js +function* yieldAndReturn() { yield "Y"; return "R"; yield "inaccessible"; @@ -124,11 +121,12 @@ var gen = yieldAndReturn(); console.log(gen.next()); // { value: "Y", done: false } console.log(gen.next()); // { value: "R", done: true } console.log(gen.next()); // { value: undefined, done: true } -</pre> +``` -<h3 id="Utiliser_un_générateur_comme_propriété">Utiliser un générateur comme propriété</h3> +### Utiliser un générateur comme propriété -<pre class="brush: js notranslate">const monObj = { +```js +const monObj = { *generator () { yield "a"; yield "b"; @@ -139,11 +137,13 @@ const gen = monObj.generator(); console.log(gen.next()); // { value: "a", done: false } console.log(gen.next()); // { value: "b", done: false } -console.log(gen.next()); // { value: undefined, done: true }</pre> +console.log(gen.next()); // { value: undefined, done: true } +``` -<h3 id="Utiliser_un_générateur_comme_propriété_calculée">Utiliser un générateur comme propriété calculée</h3> +### Utiliser un générateur comme propriété calculée -<pre class="brush: js notranslate">class Toto { +```js +class Toto { *[Symbol.iterator] () { yield 1; yield 2; @@ -158,84 +158,63 @@ const monObj = { } console.log(Array.from(new Toto)); // [1, 2] -console.log(Array.from(monObj)); // [ "a", "b"]</pre> +console.log(Array.from(monObj)); // [ "a", "b"] +``` -<h3 id="Les_générateurs_ne_sont_pas_constructibles">Les générateurs ne sont pas constructibles</h3> +### Les générateurs ne sont pas constructibles -<pre class="brush: js example-bad notranslate">function* f() {} +```js example-bad +function* f() {} var obj = new f; // lève une TypeError: f n'est pas un constructeur -</pre> +``` -<h3 id="Générateur_défini_avec_une_expression">Générateur défini avec une expression</h3> +### Générateur défini avec une expression -<pre class="brush: js notranslate">const toto = function* () { +```js +const toto = function* () { yield 10; yield 20; }; const truc = toto(); -console.log(truc.next()); // {value: 10, done: false}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td>Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec <code>new</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.generator_function")}}</p> - -<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> - -<h3 id="Les_générateurs_et_itérateurs_dans_Firefox_pour_les_versions_antérieures_à_Firefox_26">Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26</h3> - -<p>Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé <code>function</code> (sans astérisque) et étaient différents selon d'autres aspects. Voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">la page sur les générateurs historiques</a> pour plus d'informations.</p> - -<h3 id="IteratorResult_au_lieu_dune_exception"><code>IteratorResult</code> au lieu d'une exception</h3> - -<p>À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet <code>IteratorResult</code> comme <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>L'objet {{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}</li> - <li>{{jsxref("Opérateurs/yield", "yield")}}</li> - <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li> - <li>L'objet {{jsxref("Function")}}</li> - <li>{{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li> - <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li> - <li>D'autres ressources disponibles sur le Web : - <ul> - <li><a href="https://facebook.github.io/regenerator/">Regenerator</a> un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5</li> - <li><a href="https://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a> (vidéo en anglais)</li> - <li><a href="https://github.com/mozilla/task.js">Task.js</a></li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Itérer de façon asynchrone sur des générateurs</a></li> - </ul> - </li> -</ul> +console.log(truc.next()); // {value: 10, done: false} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}} | Définition initiale | +| {{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2016')}} | Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec `new`. | +| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.generator_function")}} + +## Notes spécifiques à Firefox + +### Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26 + +Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé `function` (sans astérisque) et étaient différents selon d'autres aspects. Voir [la page sur les générateurs historiques](/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique) pour plus d'informations. + +### `IteratorResult` au lieu d'une exception + +À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet `IteratorResult` comme `{ value: undefined, done: true }` ({{bug(958951)}}). + +## Voir aussi + +- L'expression {{jsxref("Opérateurs/function*", "function*")}} +- L'objet {{jsxref("GeneratorFunction")}} +- {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} +- {{jsxref("Opérateurs/yield", "yield")}} +- {{jsxref("Opérateurs/yield*", "yield*")}} +- L'objet {{jsxref("Function")}} +- {{jsxref("Instructions/function", "Les déclarations de fonction","",1)}} +- {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}} +- {{jsxref("Fonctions", "Les fonctions","",1)}} +- D'autres ressources disponibles sur le Web : + + - [Regenerator](https://facebook.github.io/regenerator/) un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5 + - [Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013](https://www.youtube.com/watch?v=qbKWsbJ76-s) (vidéo en anglais) + - [Task.js](https://github.com/mozilla/task.js) + - [Itérer de façon asynchrone sur des générateurs](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously) diff --git a/files/fr/web/javascript/reference/statements/if...else/index.md b/files/fr/web/javascript/reference/statements/if...else/index.md index 9af4f80a14..5a96cdd1a1 100644 --- a/files/fr/web/javascript/reference/statements/if...else/index.md +++ b/files/fr/web/javascript/reference/statements/if...else/index.md @@ -5,124 +5,132 @@ tags: - JavaScript - Reference - Statement -browser-compat: javascript.statements.if_else translation_of: Web/JavaScript/Reference/Statements/if...else original_slug: Web/JavaScript/Reference/Instructions/if...else +browser-compat: javascript.statements.if_else --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>if</code></strong> exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.</p> +L'instruction **`if`** exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction. -<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">if (<em>condition</em>) - <em>statement1</em> -} else { - <em>statement2</em> -}</pre> - -<dl> - <dt><code>condition</code></dt> - <dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions">expression</a> qui est évaluée à <code>true</code> ou <code>false</code>.</dd> - <dt><code>statement1</code></dt> - <dd>L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à <code>true</code>). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions <code>if</code>. Pour exécuter plusieurs instructions, on pourra utiliser un <a href="/fr/docs/Web/JavaScript/Reference/Statements/block">bloc d'instructions</a> ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">l'instruction vide</a>.</dd> - <dt><code>statement2</code></dt> - <dd>Si la clause <code>else</code> existe, l'instruction qui est exécutée si la <code>condition</code> est évaluée à <code>false</code>. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction <code>if</code> imbriquée, un bloc d'instruction, une instruction vide, etc.</dd> -</dl> - -<h2 id="description">Description</h2> - -<p>Plusieurs instructions <code>if...else</code> peuvent être imbriquées afin de créer une structure <code>else if</code> (on notera qu'il n'y a pas de mot-clé <code>elseif</code> en JavaScript).</p> - -<pre class="brush: js">if (<em>condition1</em>) - <em>instruction1</em> -else if (<em>condition2</em>) - <em>instruction2</em> -else if (<em>condition3</em>) - <em>instruction3</em> + if (condition) + statement1 + } else { + statement2 + } + +- `condition` + - : Une [expression](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions) qui est évaluée à `true` ou `false`. +- `statement1` + - : L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à `true`). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions `if`. Pour exécuter plusieurs instructions, on pourra utiliser un [bloc d'instructions](/fr/docs/Web/JavaScript/Reference/Statements/block) ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser [l'instruction vide](/fr/docs/Web/JavaScript/Reference/Statements/Empty). +- `statement2` + - : Si la clause `else` existe, l'instruction qui est exécutée si la `condition` est évaluée à `false`. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction `if` imbriquée, un bloc d'instruction, une instruction vide, etc. + +## Description + +Plusieurs instructions `if...else` peuvent être imbriquées afin de créer une structure `else if` (on notera qu'il n'y a pas de mot-clé `elseif` en JavaScript). + +```js +if (condition1) + instruction1 +else if (condition2) + instruction2 +else if (condition3) + instruction3 ... else - <em>instructionN</em> -</pre> + instructionN +``` -<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p> +Si on indente correctement le code, on retrouve la structure exactement équivalente : -<pre class="brush: js">if (<em>condition1</em>) - <em>instruction1</em> +```js +if (condition1) + instruction1 else - if (<em>condition2</em>) - <em>instruction2</em> + if (condition2) + instruction2 else - if (<em>condition3</em>) + if (condition3) ... -</pre> +``` -<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Statements/block","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.</p> +Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Statements/block","bloc d'instructions","",1)}} (`{ ... }`) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées. -<pre class="brush: js">if (<em>condition</em>) { - <em>instructions1</em> +```js +if (condition) { + instructions1 } else { - <em>instructions2</em> + instructions2 } -</pre> +``` -<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs true et false d'un objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>. Toute valeur qui n'est pas <code>false</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, <code>0</code>, <code>-0</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> ou la chaîne vide (<code>""</code>), et tout objet, y compris un objet <code>Boolean</code> dont la valeur est <code>false</code>, seront évalués à <code>true</code> lors d'une instruction conditionnelle <code>if</code>. Ainsi :</p> +Attention à ne pas confondre les valeurs booléennes « primitives » `true` et `false` avec les valeurs true et false d'un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean). Toute valeur qui n'est pas `false`, [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined), [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), `0`, `-0`, [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) ou la chaîne vide (`""`), et tout objet, y compris un objet `Boolean` dont la valeur est `false`, seront évalués à `true` lors d'une instruction conditionnelle `if`. Ainsi : -<pre class="brush: js">var b = new Boolean(false); +```js +var b = new Boolean(false); if (b) // la condition sera évaluée à true -</pre> +``` -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="using_if...else">Utiliser <code>if...else</code></h3> +### Utiliser `if...else` -<pre class="brush: js">if (cipher_char == from_char) { +```js +if (cipher_char == from_char) { result = result + to_char; x++; } else { result = result + clear_char; -}</pre> +} +``` -<h3 id="using_else_if">Utiliser <code>else if</code></h3> +### Utiliser `else if` -<p>Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :</p> +Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée : -<pre class="brush: js">if (x > 50){ +```js +if (x > 50){ // faire quelque chose -} else if (x > 5) { +} else if (x > 5) { // faire autre chose } else { // faire encore autre chose -}</pre> +} +``` -<h3 id="assignment_within_the_conditional_expression">Affectation de variable dans l'expression conditionnelle</h3> +### Affectation de variable dans l'expression conditionnelle -<p>Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :</p> +Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) : -<pre class="brush: js example-bad">if (x = y) { +```js example-bad +if (x = y) { /* exécuter les instructions */ -}</pre> +} +``` -<p>S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :</p> +S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) : -<pre class="brush: js example-good">if ((x = y)) { +```js example-good +if ((x = y)) { /* exécuter les instructions */ -}</pre> +} +``` -<h2 id="specifications">Spécifications</h2> +## Spécifications {{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/JavaScript/Reference/Statements/block">block</a></li> - <li><a href="/fr/docs/JavaScript/Reference/Statements/switch">switch</a></li> - <li><a href="/fr/docs/JavaScript/Reference/Operators/Conditional_Operator">L'opérateur conditionnel</a></li> -</ul> +- [block](/fr/docs/JavaScript/Reference/Statements/block) +- [switch](/fr/docs/JavaScript/Reference/Statements/switch) +- [L'opérateur conditionnel](/fr/docs/JavaScript/Reference/Operators/Conditional_Operator) diff --git a/files/fr/web/javascript/reference/statements/import.meta/index.md b/files/fr/web/javascript/reference/statements/import.meta/index.md index b4316ca46c..be581c4b15 100644 --- a/files/fr/web/javascript/reference/statements/import.meta/index.md +++ b/files/fr/web/javascript/reference/statements/import.meta/index.md @@ -8,62 +8,48 @@ tags: translation_of: Web/JavaScript/Reference/Statements/import.meta original_slug: Web/JavaScript/Reference/Instructions/import.meta --- -<div>{{JSSidebar("Statements")}}</div> +{{JSSidebar("Statements")}} -<p>L'objet<strong> <code>import.meta</code></strong> est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.</p> +L'objet** `import.meta`** est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">import.meta</pre> + import.meta -<h2 id="Description">Description</h2> +## Description -<p>L'objet <code>import.meta</code> se compose d'un mot-clé <code>"import</code>", suivi d'un point, puis du nom de propriété <code>"meta"</code>. En temps normal, "<code>import."</code> serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, <code>"import."</code> n'est pas, à proprement parler, un objet.</p> +L'objet `import.meta` se compose d'un mot-clé `"import`", suivi d'un point, puis du nom de propriété `"meta"`. En temps normal, "`import."` serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, `"import."` n'est pas, à proprement parler, un objet. -<p>L'objet <code>import.meta</code> est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.</p> +L'objet `import.meta` est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Soit un module <code>mon-module.js</code></p> +Soit un module `mon-module.js` -<pre class="brush: html"><script type="module" src="mon-module.js"></script> -</pre> +```html +<script type="module" src="mon-module.js"></script> +``` -<p>Il est possible d'accéder aux métadonnées du module grâce à l'objet <code>import.meta</code>.</p> +Il est possible d'accéder aux métadonnées du module grâce à l'objet `import.meta`. -<pre class="brush: js">console.log(import.meta); // { url: "file:///home/user/mon-module.js" }</pre> +```js +console.log(import.meta); // { url: "file:///home/user/mon-module.js" } +``` -<p>Cet objet contient une propriété <code>url</code> qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.</p> +Cet objet contient une propriété `url` qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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><a href="https://github.com/tc39/proposal-import-meta/#importmeta">Proposition pour <code>import.meta</code></a></td> - <td>Niveau 3</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition des propriétés <code>import.meta</code> en HTML.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | +| [Proposition pour `import.meta`](https://github.com/tc39/proposal-import-meta/#importmeta) | Niveau 3 | Définition initiale. | +| {{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}} | {{Spec2("HTML WHATWG")}} | Définition des propriétés `import.meta` en HTML. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.statements.import_meta")}}</p> +{{Compat("javascript.statements.import_meta")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Instructions/import","import")}}</li> - <li>{{jsxref("Instructions/export","export")}}</li> -</ul> +- {{jsxref("Instructions/import","import")}} +- {{jsxref("Instructions/export","export")}} diff --git a/files/fr/web/javascript/reference/statements/import/index.md b/files/fr/web/javascript/reference/statements/import/index.md index e998fe745c..f924b45481 100644 --- a/files/fr/web/javascript/reference/statements/import/index.md +++ b/files/fr/web/javascript/reference/statements/import/index.md @@ -10,130 +10,148 @@ tags: translation_of: Web/JavaScript/Reference/Statements/import original_slug: Web/JavaScript/Reference/Instructions/import --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <code><strong>import</strong></code> est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>import</code> ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec <code><a href="/fr/docs/Web/HTML/Element/script#Attributs">type="module"</a></code>.</p> +L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs). -<div class="note"> -<p><strong>Note :</strong> Il existe également une forme fonctionnelle, <code>import()</code> (cf. <a href="#dyn">ci-après</a>) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut <code>nomodule</code> sur la balise {{HTMLElement("script")}}.</p> -</div> +> **Note :** Il existe également une forme fonctionnelle, `import()` (cf. [ci-après](#dyn)) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut `nomodule` sur la balise {{HTMLElement("script")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">import <em>exportParDefaut</em> from "<em>nom-module</em>"; -import * as <em>nom</em> from "<em>nom-module</em>"; -import { <em>export </em>} from "<em>nom-module</em>"; -import { <em>export</em> as <em>alias </em>} from "<em>nom-module</em>"; -import { <em>export1 , export2</em> } from "<em>nom-module</em>"; -import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>nom-module</em>"; -import <em>exportParDefaut</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>nom-module</em>"; -import <em>exportParDefaut</em>, * as <em>nom</em> from "<em>nom-module</em>"; -import "<em>nom-module</em>"; -import { <em>toto , truc</em> } from "<em>nom-module/chemin/vers/fichier-non-exporte</em>"; -let <em>promesse</em> = import("<em>nom-module</em>");</pre> + import exportParDefaut from "nom-module"; + import * as nom from "nom-module"; + import { export } from "nom-module"; + import { export as alias } from "nom-module"; + import { export1 , export2 } from "nom-module"; + import { export1 , export2 as alias2 , [...] } from "nom-module"; + import exportParDefaut, { export [ , [...] ] } from "nom-module"; + import exportParDefaut, * as nom from "nom-module"; + import "nom-module"; + import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte"; + let promesse = import("nom-module"); -<dl> - <dt><code>exportParDefaut</code></dt> - <dd>Nom qui fera référence à l'export par défaut du module.</dd> - <dt><code>nom-module</code></dt> - <dd>Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier <code>.js</code> contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.</dd> - <dt><code>nom</code></dt> - <dd>Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.</dd> - <dt><code>export</code>, <code>exportN</code></dt> - <dd>Nom des exports à importer.</dd> - <dt><code>alias</code>, <code>aliasN</code></dt> - <dd>Noms qui feront référence aux imports nommés.</dd> -</dl> +- `exportParDefaut` + - : Nom qui fera référence à l'export par défaut du module. +- `nom-module` + - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées. +- `nom` + - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports. +- `export`, `exportN` + - : Nom des exports à importer. +- `alias`, `aliasN` + - : Noms qui feront référence aux imports nommés. -<h2 id="Description">Description</h2> +## Description -<p>Le paramètre <code>nom</code> est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres <code>export</code> indiquent les exports nommés individuellement, tandis que la syntaxe <code>import * as nom</code> les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.</p> +Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe. -<h3 id="Importer_lintégralité_du_contenu_dun_module">Importer l'intégralité du contenu d'un module</h3> +### Importer l'intégralité du contenu d'un module -<p>Ce qui suit insère <code>monModule</code> dans la portée courante, contenant tous les exports du module dans le fichier situé dans <code>/modules/mon-module.js</code>.</p> +Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports du module dans le fichier situé dans `/modules/mon-module.js`. -<pre class="brush: js">import * as monModule from '/modules/mon-module.js'; -</pre> +```js +import * as monModule from '/modules/mon-module.js'; +``` -<p>Ici, accéder aux exports signifie utiliser le nom du module (ici <code>monModule</code>) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export <code>faireToutesLesChosesIncroyables()</code>, vous l'écririez comme ceci :</p> +Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci : -<pre class="brush: js">monModule.faireToutesLesChosesIncroyables();</pre> +```js +monModule.faireToutesLesChosesIncroyables(); +``` -<h3 id="Importer_un_seul_export_depuis_un_module">Importer un seul export depuis un module</h3> +### Importer un seul export depuis un module -<p>Étant donné un objet ou une valeur nommé(e) <code>monExport</code> qui est exporté(e) depuis le module <code>mon-module</code>, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére <code>monExport</code> dans la portée courante.</p> +Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante. -<pre class="brush: js">import {monExport} from '/modules/mon-module.js';</pre> +```js +import {monExport} from '/modules/mon-module.js'; +``` -<h3 id="Importer_plusieurs_éléments_exportés_depuis_un_module">Importer plusieurs éléments exportés depuis un module</h3> +### Importer plusieurs éléments exportés depuis un module -<p>Ce qui suit insère à la fois <code>machin</code> et <code>truc</code> dans la portée courante.</p> +Ce qui suit insère à la fois `machin` et `truc` dans la portée courante. -<pre class="brush: js">import {machin, truc} from '/modules/mon-module.js';</pre> +```js +import {machin, truc} from '/modules/mon-module.js'; +``` -<h3 id="Importer_un_élément_exporté_avec_un_alias">Importer un élément exporté avec un alias</h3> +### Importer un élément exporté avec un alias -<p>Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére <code>nomCourt</code> dans la portée courante.</p> +Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante. -<pre class="brush: js">import {nomDExportDeModuleVraimentVraimentLong as nomCourt} - from '/modules/mon-module.js';</pre> +```js +import {nomDExportDeModuleVraimentVraimentLong as nomCourt} + from '/modules/mon-module.js'; +``` -<h3 id="Renommer_plusieurs_exports_pendant_limport">Renommer plusieurs exports pendant l'import</h3> +### Renommer plusieurs exports pendant l'import -<p>Importe des exports multiples depuis un module avec des alias commodes :</p> +Importe des exports multiples depuis un module avec des alias commodes : -<pre class="brush: js">import { +```js +import { nomDExportDeModuleVraimentVraimentLong as nomCourt, unAutreNomDeModuleLong as court -} from '/modules/mon-module.js';</pre> +} from '/modules/mon-module.js'; +``` -<h3 id="Importer_un_module_uniquement_pour_ses_effets_de_bord">Importer un module uniquement pour ses effets de bord</h3> +### Importer un module uniquement pour ses effets de bord -<p>Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.</p> +Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur. -<pre class="brush: js">import '/modules/mon-module.js'; -</pre> +```js +import '/modules/mon-module.js'; +``` -<h3 id="Importation_des_défauts">Importation des défauts</h3> +### Importation des défauts -<p>Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction <code>import</code> peut alors être utilisée pour importer ces défauts.</p> +Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts. -<p>La version la plus simple importe directement le défaut :</p> +La version la plus simple importe directement le défaut : -<pre class="brush: js">import monDefaut from '/modules/mon-module.js';</pre> +```js +import monDefaut from '/modules/mon-module.js'; +``` -<p>Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :</p> +Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple : -<pre class="brush: js">import monDefaut, * as monModule from '/modules/mon-module.js'; -// monModule utilisé comme un espace de noms</pre> +```js +import monDefaut, * as monModule from '/modules/mon-module.js'; +// monModule utilisé comme un espace de noms +``` -<p>ou</p> +ou -<pre class="brush: js">import monDefaut, {machin, truc} from '/modules/mon-module.js'; +```js +import monDefaut, {machin, truc} from '/modules/mon-module.js'; // imports nommés spécifiques -</pre> +``` -<h3 id="Imports_dynamiques">Imports dynamiques</h3> +### Imports dynamiques -<p>Le mot-clé <code>import</code> peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :</p> +Le mot-clé `import` peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse : -<pre class="brush: js">import('/modules/mon-module.js') - .then((module) => { +```js +import('/modules/mon-module.js') + .then((module) => { // Faire quelque chose avec le module - });</pre> + }); +``` -<p>On peut utiliser cette forme avec le mot-clé <code>await</code> :</p> +On peut utiliser cette forme avec le mot-clé `await` : -<pre class="brush: js">let module = await import('/modules/mon-module.js');</pre> +```js +let module = await import('/modules/mon-module.js'); +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.</p> +Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON. -<h3 id="Le_module_fichier.js">Le module : fichier.js</h3> +### Le module : fichier.js -<pre class="brush: js; highlight: [14]">function getJSON(url, rappel) { +```js +function getJSON(url, rappel) { let xhr = new XMLHttpRequest(); xhr.onload = function () { rappel(this.responseText) @@ -143,93 +161,63 @@ let <em>promesse</em> = import("<em>nom-module</em>");</pre> } export function recupererContenuUtile(url, rappel) { - getJSON(url, donnees => rappel(JSON.parse(donnees))); -}</pre> + getJSON(url, donnees => rappel(JSON.parse(donnees))); +} +``` -<h3 id="Le_programme_principal_principal.js">Le programme principal : principal.js</h3> +### Le programme principal : principal.js -<pre class="brush: js">import { recupererContenuUtile } from '/modules/fichier.js'; +```js +import { recupererContenuUtile } from '/modules/fichier.js'; recupererContenuUtile('http://www.example.com', - donnees => { faireQuelqueChoseDUtile(donnees); });</pre> + donnees => { faireQuelqueChoseDUtile(donnees); }); +``` -<h3 id="Import_dynamique">Import dynamique</h3> +### Import dynamique -<p>Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.</p> +Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module. -<pre class="brush: js">const main = document.querySelector("main"); -for (const link of document.querySelectorAll("nav > a")) { - link.addEventListener("click", e => { +```js +const main = document.querySelector("main"); +for (const link of document.querySelectorAll("nav > a")) { + link.addEventListener("click", e => { e.preventDefault(); import('/modules/mon-module.js') - .then(module => { + .then(module => { module.loadPageInto(main); }) - .catch(err => { + .catch(err => { main.textContent = err.message; }); }); } -;</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">Proposition pour les imports dynamiques « fonctionnels »</a></td> - <td>Proposition de niveau 4</td> - <td>Fera partie de ECMAScript 2020</td> - </tr> - <tr> - <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ESDraft")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2018")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2017")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2016")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td> - <td>{{Spec2("ES2015")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.import")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/export", "export")}}</li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta">import.meta</a></code></li> - <li>Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> - <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">Jason Orendorff : ES6 en détails : les modules</a></li> - <li><a class="external" href="https://exploringjs.com/es6/ch_modules.html">Le livre d'Axel Rauschmayer : Exploring JS: Modules</a></li> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li> - <li><a href="https://javascript.info/import-export">Tutoriel JavaScript sur <code>export</code> et <code>import</code></a></li> -</ul> +; +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------ | +| [Proposition pour les imports dynamiques « fonctionnels »](https://github.com/tc39/proposal-dynamic-import/#import) | Proposition de niveau 4 | Fera partie de ECMAScript 2020 | +| {{SpecName("ESDraft", "#sec-imports", "Imports")}} | {{Spec2("ESDraft")}} | | +| {{SpecName("ES2018", "#sec-imports", "Imports")}} | {{Spec2("ES2018")}} | | +| {{SpecName("ES2017", "#sec-imports", "Imports")}} | {{Spec2("ES2017")}} | | +| {{SpecName("ES2016", "#sec-imports", "Imports")}} | {{Spec2("ES2016")}} | | +| {{SpecName("ES2015", "#sec-imports", "Imports")}} | {{Spec2("ES2015")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.import")}} + +## Voir aussi + +- {{jsxref("Instructions/export", "export")}} +- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta) +- Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/) +- [Jason Orendorff : ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules) +- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html) +- [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) +- [Tutoriel JavaScript sur `export` et `import`](https://javascript.info/import-export) diff --git a/files/fr/web/javascript/reference/statements/index.md b/files/fr/web/javascript/reference/statements/index.md index 1e372ad996..4b784f29ac 100644 --- a/files/fr/web/javascript/reference/statements/index.md +++ b/files/fr/web/javascript/reference/statements/index.md @@ -8,142 +8,101 @@ tags: translation_of: Web/JavaScript/Reference/Statements original_slug: Web/JavaScript/Reference/Instructions --- -<div>{{jsSidebar("Statements")}}</div> - -<p>Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.</p> - -<h2 id="Instructions_et_déclarations_par_catégorie">Instructions et déclarations, par catégorie</h2> - -<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p> - -<h3 id="Contrôle_du_flux">Contrôle du flux</h3> - -<dl> - <dt>{{jsxref("Instructions/bloc", "Bloc")}}</dt> - <dd>Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.</dd> - <dt>{{jsxref("Instructions/break", "break")}}</dt> - <dd>Cette instruction termine la boucle ou l'instruction <code>switch</code> ou l'instruction <code>label</code> en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.</dd> - <dt>{{jsxref("Instructions/continue", "continue")}}</dt> - <dd>Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.</dd> - <dt>{{jsxref("Instructions/vide", "Vide")}}</dt> - <dd>Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</dd> - <dt>{{jsxref("Instructions/if...else","if...else")}}</dt> - <dd>Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.</dd> - <dt>{{jsxref("Instructions/switch", "switch")}}</dt> - <dd>Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.</dd> - <dt>{{jsxref("Instructions/throw", "throw")}}</dt> - <dd>Cette instruction lève une exception.</dd> - <dt>{{jsxref("Instructions/try...catch","try...catch")}}</dt> - <dd>Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.</dd> -</dl> - -<h3 id="Déclarations">Déclarations</h3> - -<dl> - <dt>{{jsxref("Instructions/var", "var")}}</dt> - <dd> - <p>Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.</p> - </dd> - <dt>{{jsxref("Instructions/let", "let")}}</dt> - <dd>Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.</dd> - <dt>{{jsxref("Instructions/const", "const")}}</dt> - <dd>Cette instruction déclare une constante en lecture seule.</dd> -</dl> - -<h3 id="Fonctions_et_classes">Fonctions et classes</h3> - -<dl> - <dt>{{jsxref("Instructions/function", "function")}}</dt> - <dd>Cette instruction déclare une fonction avec les paramètres donnés.</dd> - <dt>{{jsxref("Instructions/function*", "function*")}}</dt> - <dd>Les fonctions génératrices permettent de créer des <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">itérateurs</a> plus simplement.</dd> - <dt>{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}</dt> - <dd>Cette instruction déclare une fonction asynchrone avec les paramètres associés.</dd> - <dt>{{jsxref("Instructions/return", "return")}}</dt> - <dd>Cette instruction spécifie la valeur de retour renvoyée par une fonction.</dd> - <dt>{{jsxref("Instructions/class", "class")}}</dt> - <dd>Déclare une classe.</dd> -</dl> - -<h3 id="Itérations">Itérations</h3> - -<dl> - <dt>{{jsxref("Instructions/do...while", "do...while")}}</dt> - <dd>Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.</dd> - <dt>{{jsxref("Instructions/for", "for")}}</dt> - <dd>Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.</dd> - <dt>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt> - <dd>Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.</dd> - <dt>{{jsxref("Instructions/for...in", "for...in")}}</dt> - <dd>Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.</dd> - <dt>{{jsxref("Instructions/for...of", "for...of")}}</dt> - <dd>Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.</dd> - <dt>{{jsxref("Instructions/for-await...of","for await...of")}}</dt> - <dd>Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.</dd> - <dt>{{jsxref("Instructions/while", "while")}}</dt> - <dd>Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</dd> -</dl> - -<h3 id="Autres">Autres</h3> - -<dl> - <dt>{{jsxref("Instructions/debugger", "debugger")}}</dt> - <dd>Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.</dd> - <dt>{{jsxref("Instructions/export", "export")}}</dt> - <dd>Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).</dd> - <dt>{{jsxref("Instructions/import", "import")}}</dt> - <dd>Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta"><code>import.meta</code></a></dt> - <dd>Une méta propriété qui expose des métadonnées à propos du module JavaScript.</dd> - <dt>{{jsxref("Instructions/label", "label")}}</dt> - <dd>Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction <code>break</code> ou <code>continue</code>.</dd> - <dt>{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}</dt> - <dd>Cette instruction permet d'étendre la portée chaînée d'une instruction.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Nouveaux éléments : <code>function*</code>, <code>let</code>, <code>for...of</code>, <code>yield</code>, <code>class</code></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Le chapitre de cette référence sur les <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">opérateurs JavaScript</a>.</li> -</ul>
\ No newline at end of file +{{jsSidebar("Statements")}} + +Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule. + +## Instructions et déclarations, par catégorie + +Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page. + +### Contrôle du flux + +- {{jsxref("Instructions/bloc", "Bloc")}} + - : Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades. +- {{jsxref("Instructions/break", "break")}} + - : Cette instruction termine la boucle ou l'instruction `switch` ou l'instruction `label` en cours et continue l'exécution sur l'instruction suivant l'instruction terminée. +- {{jsxref("Instructions/continue", "continue")}} + - : Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante. +- {{jsxref("Instructions/vide", "Vide")}} + - : Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une. +- {{jsxref("Instructions/if...else","if...else")}} + - : Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée. +- {{jsxref("Instructions/switch", "switch")}} + - : Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant. +- {{jsxref("Instructions/throw", "throw")}} + - : Cette instruction lève une exception. +- {{jsxref("Instructions/try...catch","try...catch")}} + - : Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite. + +### Déclarations + +- {{jsxref("Instructions/var", "var")}} + - : Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser. +- {{jsxref("Instructions/let", "let")}} + - : Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur. +- {{jsxref("Instructions/const", "const")}} + - : Cette instruction déclare une constante en lecture seule. + +### Fonctions et classes + +- {{jsxref("Instructions/function", "function")}} + - : Cette instruction déclare une fonction avec les paramètres donnés. +- {{jsxref("Instructions/function*", "function*")}} + - : Les fonctions génératrices permettent de créer des [itérateurs](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator) plus simplement. +- {{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}} + - : Cette instruction déclare une fonction asynchrone avec les paramètres associés. +- {{jsxref("Instructions/return", "return")}} + - : Cette instruction spécifie la valeur de retour renvoyée par une fonction. +- {{jsxref("Instructions/class", "class")}} + - : Déclare une classe. + +### Itérations + +- {{jsxref("Instructions/do...while", "do...while")}} + - : Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois. +- {{jsxref("Instructions/for", "for")}} + - : Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle. +- {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}} + - : Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée. +- {{jsxref("Instructions/for...in", "for...in")}} + - : Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées. +- {{jsxref("Instructions/for...of", "for...of")}} + - : Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les [itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs)). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés. +- {{jsxref("Instructions/for-await...of","for await...of")}} + - : Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les [itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs). Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété. +- {{jsxref("Instructions/while", "while")}} + - : Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle. + +### Autres + +- {{jsxref("Instructions/debugger", "debugger")}} + - : Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet. +- {{jsxref("Instructions/export", "export")}} + - : Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non). +- {{jsxref("Instructions/import", "import")}} + - : Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte. +- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta) + - : Une méta propriété qui expose des métadonnées à propos du module JavaScript. +- {{jsxref("Instructions/label", "label")}} + - : Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction `break` ou `continue`. +- {{jsxref("Instructions/with", "with")}} {{deprecated_inline}} + - : Cette instruction permet d'étendre la portée chaînée d'une instruction. + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------- | +| {{SpecName('ES1', '#sec-12', 'Statements')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES3', '#sec-12', 'Statements')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES5.1', '#sec-12', 'Statements')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}} | {{Spec2('ES6')}} | Nouveaux éléments : `function*`, `let`, `for...of`, `yield`, `class` | +| {{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements")}} + +## Voir aussi + +- Le chapitre de cette référence sur les [opérateurs JavaScript](/fr/docs/JavaScript/Reference/Op%C3%A9rateurs). diff --git a/files/fr/web/javascript/reference/statements/label/index.md b/files/fr/web/javascript/reference/statements/label/index.md index 1e0c12243a..ac0e02216e 100644 --- a/files/fr/web/javascript/reference/statements/label/index.md +++ b/files/fr/web/javascript/reference/statements/label/index.md @@ -8,50 +8,44 @@ tags: translation_of: Web/JavaScript/Reference/Statements/label original_slug: Web/JavaScript/Reference/Instructions/label --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>Une <strong>instruction étiquetée (<em>labeled</em> en anglais)</strong> peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.</p> +Une **instruction étiquetée (_labeled_ en anglais)** peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard. -<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-label.html")}} +> **Note :** Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle. +## Syntaxe -<div class="note"> -<p><strong>Note :</strong> Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.</p> -</div> + label : + instruction -<h2 id="Syntaxe">Syntaxe</h2> +- `label` + - : N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé. +- `instruction` + - : Une instruction. `break` peut être utilisé avec n'importe quelle instruction identifiée. `continue` ne peut être utilisé qu'avec des instructions de boucle. -<pre class="syntaxbox"><em>label</em> : - <em>instruction</em> -</pre> +## Description -<dl> - <dt><code>label</code></dt> - <dd>N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.</dd> - <dt><code>instruction</code></dt> - <dd>Une instruction. <code>break</code> peut être utilisé avec n'importe quelle instruction identifiée. <code>continue</code> ne peut être utilisé qu'avec des instructions de boucle.</dd> -</dl> +Une étiquette (_label_) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions `break` ou `continue` afin d'interrompre cette boucle ou de reprendre son exécution. -<h2 id="Description">Description</h2> +JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`. -<p>Une étiquette (<em>label</em>) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions <code>break</code> ou <code>continue</code> afin d'interrompre cette boucle ou de reprendre son exécution.</p> +En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), on ne peut pas utiliser `let` comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (`let` est un identifiant réservé). -<p>JavaScript <em>ne possède pas</em> d'instruction <code>goto</code>, les étiquettes ne peuvent être utilisées que par les instructions <code>break</code> ou <code>continue</code>.</p> +## Exemples -<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, on ne peut pas utiliser <code>let</code> comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (<code>let</code> est un identifiant réservé).</p> +### Faire référence à une étiquette avec `continue` dans une boucle -<h2 id="Exemples">Exemples</h2> - -<h3 id="Faire_référence_à_une_étiquette_avec_continue_dans_une_boucle">Faire référence à une étiquette avec <code>continue</code> dans une boucle</h3> - -<pre class="brush: js">var i, j; +```js +var i, j; boucle1: -for (i = 0; i < 3; i++) { //Le premier for correspond à "boucle1" +for (i = 0; i < 3; i++) { //Le premier for correspond à "boucle1" boucle2: - for (j = 0; j < 3; j++) { //Le second for correspond à "boucle2" - if (i === 1 && j === 1) { + for (j = 0; j < 3; j++) { //Le second for correspond à "boucle2" + if (i === 1 && j === 1) { continue boucle1; } else { console.log("i = " + i + ", j = " + j); @@ -68,34 +62,37 @@ for (i = 0; i < 3; i++) { //Le premier for correspond à "boucle1" // "i = 2, j = 1" // "i = 2, j = 2" // On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2" -</pre> +``` -<h3 id="Second_exemple_utilisant_continue">Second exemple utilisant <code>continue</code></h3> +### Second exemple utilisant `continue` -<p>Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.</p> +Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests. -<pre class="brush: js">var nbItemsReussis = 0; +```js +var nbItemsReussis = 0; var i, j; top: -for (i = 0; i < items.length; i++){ - for (j = 0; j < tests.length; j++){ +for (i = 0; i < items.length; i++){ + for (j = 0; j < tests.length; j++){ if (!tests[j].reussi(items[i])){ continue top; } } nbItemsReussis++; -}</pre> +} +``` -<h3 id="Utiliser_break_avec_une_étiquette_au_sein_d'une_boucle_for">Utiliser <code>break</code> avec une étiquette au sein d'une boucle <code>for</code></h3> +### Utiliser `break` avec une étiquette au sein d'une boucle `for` -<pre class="brush: js">var i, j; +```js +var i, j; boucle1: -for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 » +for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 » boucle2: - for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 » - if (i == 1 && j == 1) { + for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 » + if (i == 1 && j == 1) { break boucle1; } console.log("i = " + i + ", j = " + j); @@ -109,29 +106,31 @@ for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 » // "i = 0, j = 2" // "i = 1, j = 0" // Ici on voit la différence avec l'exemple précédent utilisant continue -</pre> +``` -<h3 id="Second_exemple_utilisant_un_label_et_break">Second exemple utilisant un label et <code>break</code></h3> +### Second exemple utilisant un label et `break` -<p>Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.</p> +Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests. -<pre class="brush: js">var toutReussi = true; +```js +var toutReussi = true; var i, j; top: for (i = 0; items.length; i++) - for (j = 0; j < tests.length; i++) + for (j = 0; j < tests.length; i++) if (!tests[j].reusi(items[i])){ toutReussi = false; break top; } -</pre> +``` -<h3 id="Utilise_un_bloc_étiqueté_avec_break">Utilise un bloc étiqueté avec <code>break</code></h3> +### Utilise un bloc étiqueté avec `break` -<p>On peut utiliser des étiquettes dans des blocs simples mais seul <code>break</code> permettra de faire référence à des étiquettes en dehors d'une boucle.</p> +On peut utiliser des étiquettes dans des blocs simples mais seul `break` permettra de faire référence à des étiquettes en dehors d'une boucle. -<pre class="brush: js">toto: { +```js +toto: { console.log("face"); break toto; console.log("this will not be executed"); @@ -141,65 +140,46 @@ console.log("swap"); // On aura alors dans la console : // "face" -// "swap </pre> +// "swap +``` -<h3 id="Déclarations_de_fonctions_étiquetées">Déclarations de fonctions étiquetées</h3> +### Déclarations de fonctions étiquetées -<p>À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">au sein de l'annexe de la spécification relative à la compatibilité web</a>.</p> +À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict [au sein de l'annexe de la spécification relative à la compatibilité web](http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations). -<pre class="brush: js">L: function F() {}</pre> +```js +L: function F() {} +``` -<p>En revanche, en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, cela lèvera une exception {{jsxref("SyntaxError")}}:</p> +En revanche, en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), cela lèvera une exception {{jsxref("SyntaxError")}}: -<pre class="brush: js">"use strict"; +```js +"use strict"; L: function F() {} -// SyntaxError: functions cannot be labelled</pre> +// SyntaxError: functions cannot be labelled +``` -<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :</p> +[Les fonctions génératrices](/fr/docs/Web/JavaScript/Reference/Instructions/function*) ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict : -<pre class="brush: js">L: function* F() {} +```js +L: function* F() {} // SyntaxError: generator functions cannot be labelled -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.label")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/break", "break")}}</li> - <li>{{jsxref("Instructions/continue", "continue")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.label")}} + +## Voir aussi + +- {{jsxref("Instructions/break", "break")}} +- {{jsxref("Instructions/continue", "continue")}} diff --git a/files/fr/web/javascript/reference/statements/let/index.md b/files/fr/web/javascript/reference/statements/let/index.md index da0d43626c..df64126959 100644 --- a/files/fr/web/javascript/reference/statements/let/index.md +++ b/files/fr/web/javascript/reference/statements/let/index.md @@ -9,40 +9,39 @@ tags: translation_of: Web/JavaScript/Reference/Statements/let original_slug: Web/JavaScript/Reference/Instructions/let --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>let</code></strong> permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</p> +L'instruction **`let`** permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. -<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-let.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];</pre> + let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]]; -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> - <dd>Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.</dd> - <dt><code>valeur1</code>, <code>valeur2</code>, …, <code>valeurN</code>{{optional_inline}}</dt> - <dd>Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.</dd> -</dl> +- `var1`, `var2`, …, `varN` + - : Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides. +- `valeur1`, `valeur2`, …, `valeurN`{{optional_inline}} + - : Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale. -<h2 id="Description">Description</h2> +## Description -<p><code>let</code> permet de déclarer des variables dont la portée est limitée à celle du <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">bloc</a> dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).</p> +`let` permet de déclarer des variables dont la portée est limitée à celle du [bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc) dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction). -<p>Une autre différence entre <code>let</code> et <code>var</code> est la façon dont la variable est initialisée : pour <code>let</code>, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).</p> +Une autre différence entre `let` et `var` est la façon dont la variable est initialisée : pour `let`, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après). -<p>À l'instar de {{jsxref("instructions/const", "const")}}, <code>let</code> ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.</p> +À l'instar de {{jsxref("instructions/const", "const")}}, `let` ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global. -<p>L'origine du nom <code>let</code> est décrite <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">dans cette réponse (en anglais)</a>.</p> +L'origine du nom `let` est décrite [dans cette réponse (en anglais)](https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri). -<h3 id="Les_portées_de_bloc_avec_let">Les portées de bloc avec <code>let</code></h3> +### Les portées de bloc avec `let` -<p>Le mot-clé <code>let</code> permet de définir des variables au sein d'un bloc et des blocs qu'il contient. <code>var</code> permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.</p> +Le mot-clé `let` permet de définir des variables au sein d'un bloc et des blocs qu'il contient. `var` permet quant à lui de définir une variable dont la portée est celle de la fonction englobante. -<pre class="brush:js">if (x > y) { +```js +if (x > y) { let gamma = 12.7 + y; i = gamma * x; } @@ -64,15 +63,16 @@ function letTest() { } console.log(x); // 1 } -</pre> +``` -<h3 id="Une_meilleure_lisibilité_pour_les_fonctions_internes">Une meilleure lisibilité pour les fonctions internes</h3> +### Une meilleure lisibilité pour les fonctions internes -<p><code>let</code> peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.</p> +`let` peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes. -<pre class="brush:js">var list = document.getElementById("list"); +```js +var list = document.getElementById("list"); -for (let i = 1; i <= 5; i++) { +for (let i = 1; i <= 5; i++) { var item = document.createElement("li"); item.appendChild(document.createTextNode("Élément " + i)); @@ -86,7 +86,7 @@ for (let i = 1; i <= 5; i++) { // il aurait fallu créer un contexte différent // avec une fermeture (closure) pour la valeur -for (var i = 1; i <= 5; i++) { +for (var i = 1; i <= 5; i++) { var item = document.createElement("li"); item.appendChild(document.createTextNode("Item " + i)); @@ -97,15 +97,16 @@ for (var i = 1; i <= 5; i++) { })(i); list.appendChild(item); } -</pre> +``` -<p>Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de <code>i</code>. Si on remplace <code>let</code> par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée <code>i=6</code> (au lieu de 5 différentes).</p> +Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de `i`. Si on remplace `let` par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée `i=6` (au lieu de 5 différentes). -<h4 id="Règles_de_portées">Règles de portées</h4> +#### Règles de portées -<p>Les variables déclarées avec <code>let</code> appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon <code>let</code> fonctionne comme <code>var</code>, la seule différence dans cette analogie est que <code>let</code> fonctionne avec les portées de bloc et <code>var</code> avec les portées des fonctions :</p> +Les variables déclarées avec `let` appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon `let` fonctionne comme `var`, la seule différence dans cette analogie est que `let` fonctionne avec les portées de bloc et `var` avec les portées des fonctions : -<pre class="brush:js">function varTest() { +```js +function varTest() { var x = 31; if (true) { var x = 71; // c'est la même variable ! @@ -122,22 +123,24 @@ function letTest() { } console.log(x); // 31 } -</pre> +``` -<p>Au niveau le plus haut (la portée globale), <code>let</code> crée une variable globale alors que <code>var</code> ajoute une propriété à l'objet global :</p> +Au niveau le plus haut (la portée globale), `let` crée une variable globale alors que `var` ajoute une propriété à l'objet global : -<pre class="brush:js">var x = 'global'; +```js +var x = 'global'; let y = 'global2'; console.log(this.x); // "global" console.log(this.y); // undefined console.log(y); // "global2" -</pre> +``` -<h3 id="Émuler_le_fonctionnement_des_interfaces_privées">Émuler le fonctionnement des interfaces privées</h3> +### Émuler le fonctionnement des interfaces privées -<p>En utilisant l'instruction <code>let</code> avec <a href="/fr/docs/Glossaire/Constructeur">des constructeurs</a>, on peut créer des <em>interfaces privées</em> sans avoir à utiliser <a href="/fr/docs/Web/JavaScript/Closures">de fermetures</a> :</p> +En utilisant l'instruction `let` avec [des constructeurs](/fr/docs/Glossaire/Constructeur), on peut créer des _interfaces privées_ sans avoir à utiliser [de fermetures](/fr/docs/Web/JavaScript/Closures) : -<pre class="brush: js">var Truc; +```js +var Truc; { let porteePrivee = new WeakMap(); @@ -173,32 +176,37 @@ truc.montrerPublique(); truc.montrerPrivee(); // 1 -</pre> +``` -<p>Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de <code>Truc</code> partageront la même <code>portéePrivée</code>.<br> - Il était possible d'obtenir un tel isolement avec <code>var</code> mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (<em>IIFE</em>)).</p> +Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de `Truc` partageront la même `portéePrivée`. +Il était possible d'obtenir un tel isolement avec `var` mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (_IIFE_)). -<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ) et les erreurs liées à <code>let</code></h3> +### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) et les erreurs liées à `let` -<p>Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.</p> +Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}. -<pre class="brush: js example-bad">if (x) { +```js example-bad +if (x) { let toto; let toto; // SyntaxError -}</pre> +} +``` -<p>Avec ECMAScript 2015 (ES6), <code>let</code><strong> remontera</strong> (<em>hoisting</em>) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec <code>let</code>, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.</p> +Avec ECMAScript 2015 (ES6), `let` **remontera** (_hoisting_) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec `let`, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée. -<pre class="brush: js example-bad">function faire_quelque_chose() { +```js example-bad +function faire_quelque_chose() { console.log(truc); // undefined console.log(toto); // ReferenceError let toto = 2; var truc = 1; -}</pre> +} +``` -<p>Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.</p> +Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction. -<pre class="brush: js example-bad">switch (x) { +```js example-bad +switch (x) { case 0: let toto; break; @@ -206,11 +214,13 @@ truc.montrerPrivee(); case 1: let toto; // SyntaxError for redeclaration. break; -}</pre> +} +``` -<p>Par contre, si on ajoute une instruction de bloc dans la clause <code>case</code>, cela créera une nouvelle portée et empêchera l'erreur :</p> +Par contre, si on ajoute une instruction de bloc dans la clause `case`, cela créera une nouvelle portée et empêchera l'erreur : -<pre class="brush: js">let x = 1; +```js +let x = 1; switch(x) { case 0: { @@ -221,13 +231,15 @@ switch(x) { let toto; break; } -}</pre> +} +``` -<h3 id="Autres_situations">Autres situations</h3> +### Autres situations -<p>Lorsqu'on utilise <code>let</code> dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec <code>var</code> dont la portée est celle de la fonction où il est utilisé.</p> +Lorsqu'on utilise `let` dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec `var` dont la portée est celle de la fonction où il est utilisé. -<pre class="brush: js">var a = 1; +```js +var a = 1; var b = 2; if (a === 1) { @@ -240,72 +252,79 @@ if (a === 1) { console.log(a); // 11 console.log(b); // 2 -</pre> +``` -<p>Cependant, la combinaison utilisée ci-après déclenchera une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code> car la déclaration avec <code>var</code> est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec <code>let</code>).</p> +Cependant, la combinaison utilisée ci-après déclenchera une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError) car la déclaration avec `var` est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec `let`). -<pre class="brush: js example-bad">let x = 1; +```js example-bad +let x = 1; if (true) { var x = 2; // SyntaxError liée à la redéclaration } -</pre> +``` -<h3 id="La_zone_morte_temporaire_et_typeof">La zone morte temporaire et <code>typeof</code></h3> +### La zone morte temporaire et `typeof` -<p>Si on utilise <code>typeof</code> sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur <code>undefined</code>. Mais si on utilise <code>typeof</code> sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :</p> +Si on utilise `typeof` sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur `undefined`. Mais si on utilise `typeof` sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} : -<pre class="brush: js">console.log(typeof variableNonDeclaree); // affiche 'undefined' +```js +console.log(typeof variableNonDeclaree); // affiche 'undefined' console.log(typeof i); // ReferenceError -let i = 10;</pre> +let i = 10; +``` -<h3 id="Autre_exemple_lié_à_la_zone_morte_temporaire_et_aux_portées_lexicales">Autre exemple lié à la zone morte temporaire et aux portées lexicales</h3> +### Autre exemple lié à la zone morte temporaire et aux portées lexicales -<p>Dans l'exemple qui suit, dans l'expression <code>toto + 55</code>, l'identifiant <code>toto</code> fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction <code>let toto = (toto + 55);</code> l'instruction est bien remontée mais l'endroit où on utilise <code>toto</code> (dans le fragment <code>(toto + 55</code>)) est toujours dans la zone morte temporaire car <code>toto</code> n'a pas encore été affecté.</p> +Dans l'exemple qui suit, dans l'expression `toto + 55`, l'identifiant `toto` fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction `let toto = (toto + 55);` l'instruction est bien remontée mais l'endroit où on utilise `toto` (dans le fragment `(toto + 55`)) est toujours dans la zone morte temporaire car `toto` n'a pas encore été affecté. -<pre class="brush: js example-bad">function test(){ +```js example-bad +function test(){ var toto = 33; if (true) { let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization } } test(); -</pre> +``` -<p>Si on utilise <code>let</code> avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :</p> +Si on utilise `let` avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées : -<pre class="brush: js example-bad">function go(n) { +```js example-bad +function go(n) { for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization console.log(n); } } go({a:[1, 2, 3]}); -</pre> +``` -<h3 id="Les_variables_déclarées_avec_let_et_les_boucles_for">Les variables déclarées avec <code>let</code> et les boucles <code>for</code></h3> +### Les variables déclarées avec `let` et les boucles `for` -<p>Le mot-clé <code>let</code> permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.</p> +Le mot-clé `let` permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle. -<pre class="brush:js">var a = 0; -for ( let i = a; i < 10; i++ ) { +```js +var a = 0; +for ( let i = a; i < 10; i++ ) { console.log(i); } -</pre> +``` -<h4 id="Règles_de_portées_2">Règles de portées</h4> +#### Règles de portées -<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) instruction</pre> + for (let expr1; expr2; expr3) instruction -<p>Dans cet exemple, <code><var>expr2</var></code>, <code><var>expr3</var></code>, et <code>instruction</code> sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec <code>let <var>expr1</var></code>.</p> +Dans cet exemple, `expr2`, `expr3`, et `instruction` sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec `let expr1`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="let_var"><code>let</code> / <code>var</code></h3> +### `let` / `var` -<p>Lorsqu'il est utilisé dans un bloc, <code>let</code> permet de limiter la portée de la variable à ce bloc. <em>var </em>quant à lui limite la portée de la variable à la fonction.</p> +Lorsqu'il est utilisé dans un bloc, `let` permet de limiter la portée de la variable à ce bloc. _var_ quant à lui limite la portée de la variable à la fonction. -<pre class="brush: js">var a = 5; +```js +var a = 5; var b = 10; if (a === 5) { @@ -317,52 +336,38 @@ if (a === 5) { } console.log(a); // 5 -console.log(b); // 1</pre> +console.log(b); // 1 +``` -<h3 id="let_utilisé_dans_les_boucles"><code>let</code> utilisé dans les boucles</h3> +### `let` utilisé dans les boucles -<p>Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec <code>var</code>) :</p> +Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec `var`) : -<pre class="brush: js">for (let i = 0; i<10; i++) { +```js +for (let i = 0; i<10; i++) { console.log(i); // 0, 1, 2, 3, 4 ... 9 } -console.log(i); // i n'est pas défini</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-let-and-const-declarations', 'Let and Const Declarations')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale. Cette définition n'inclue pas les expressions et blocs <code>let</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.let")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/var","var")}}</li> - <li>{{jsxref("Instructions/const","const")}}</li> - <li><a href="https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const">ES6 en détails : <code>let</code> et <code>const</code></a></li> - <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Changements liés à <code>let</code> et <code>const</code> dans Firefox 44 (en anglais)</a></li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">Le chapitre de <em>You Don't Know JS</em> sur la portée des fonctions et des blocs</a> (en anglais)</li> - <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow : qu'est-ce que la zone morte temporaire ?</a></li> - <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow : quelle est la différence entre <code>let</code> et <code>var</code> ?</a></li> -</ul> +console.log(i); // i n'est pas défini +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------- | +| {{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ES2015')}} | Définition initiale. Cette définition n'inclue pas les expressions et blocs `let`. | +| {{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.let")}} + +## Voir aussi + +- {{jsxref("Instructions/var","var")}} +- {{jsxref("Instructions/const","const")}} +- [ES6 en détails : `let` et `const`](https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const) +- [Changements liés à `let` et `const` dans Firefox 44 (en anglais)](https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/) +- [Le chapitre de _You Don't Know JS_ sur la portée des fonctions et des blocs](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md) (en anglais) +- [StackOverflow : qu'est-ce que la zone morte temporaire ?](https://stackoverflow.com/a/33198850/1125029) +- [StackOverflow : quelle est la différence entre `let` et `var` ?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable) diff --git a/files/fr/web/javascript/reference/statements/return/index.md b/files/fr/web/javascript/reference/statements/return/index.md index 44a2bc220f..442081d8a6 100644 --- a/files/fr/web/javascript/reference/statements/return/index.md +++ b/files/fr/web/javascript/reference/statements/return/index.md @@ -8,84 +8,87 @@ tags: translation_of: Web/JavaScript/Reference/Statements/return original_slug: Web/JavaScript/Reference/Instructions/return --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>return</code> </strong>met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.</p> +L'instruction **`return` **met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante. -<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-return.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">return [[expression]]; </pre> + return [[expression]]; -<dl> - <dt><code>expression</code></dt> - <dd>L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.</dd> -</dl> +- `expression` + - : L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}. -<h2 id="Description">Description</h2> +## Description -<p>Lorsqu'une instruction <code>return</code> est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur <code>undefined</code> sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument <code>x</code> (où <code>x</code> est un nombre) :</p> +Lorsqu'une instruction `return` est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur `undefined` sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument `x` (où `x` est un nombre) : -<pre class="brush: js">function carre(x) { +```js +function carre(x) { return x * x; } var demo = carre(3); // demo vaudra alors 9 -</pre> +``` -<p>Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :</p> +Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction : -<pre class="brush: js">return; +```js +return; return true; return false; return x; return x + y / 3; -</pre> +``` -<h3 id="Ajout_automatique_de_point-virgule">Ajout automatique de point-virgule</h3> +### Ajout automatique de point-virgule -<p>L'instruction <code>return</code> peut être impactée par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'ajout automatique de point-virgule (<em>ASI</em> en anglais)</a>. Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé <code>return</code> et l'expression :</p> +L'instruction `return` peut être impactée par [l'ajout automatique de point-virgule (_ASI_ en anglais)](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules). Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé `return` et l'expression : -<pre class="brush: js">return +```js +return a + b; +``` -</pre> +Après ASI, cela sera transformé en : -<p>Après ASI, cela sera transformé en :</p> - -<pre class="brush: js">return; +```js +return; a + b; // Avertissement console : "expression non accessible // après une instruction return sans point-virgule" -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction <code>return</code> sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.</p> -</div> +> **Note :** À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction `return` sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations. -<p>Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.</p> +Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses. -<pre class="brush: js">return ( +```js +return ( a + b; -);</pre> +); +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_return">Utiliser <code>return</code></h3> +### Utiliser `return` -<p>La fonction suivante renvoie le carré de son argument :</p> +La fonction suivante renvoie le carré de son argument : -<pre class="brush: js">function carré(x) { +```js +function carré(x) { return x * x; } -</pre> +``` -<h3 id="Interrompre_une_fonction">Interrompre une fonction</h3> +### Interrompre une fonction -<p>Une fonction s'arrête immédiatement à l'instant où l'instruction <code>return</code> est traitée.</p> +Une fonction s'arrête immédiatement à l'instant où l'instruction `return` est traitée. -<pre class="brush: js">function compteur() { +```js +function compteur() { for (var compte = 1; ; compte++) { // boucle infinie console.log(compte + "A"); // jusqu'à 5 if (compte === 5) { @@ -108,59 +111,35 @@ compteur(); // 4A // 4B // 5A -</pre> +``` -<h3 id="Renvoyer_une_fonction">Renvoyer une fonction</h3> +### Renvoyer une fonction -<p>Pour en savoir plus sur les fermetures (<em>closures</em>), voir <a href="/fr/docs/Web/JavaScript/Closures">cet article sur les fermetures</a>.</p> +Pour en savoir plus sur les fermetures (_closures_), voir [cet article sur les fermetures](/fr/docs/Web/JavaScript/Closures). -<pre class="brush: js">function magique() { +```js +function magique() { return function calc(x) { return x * 42 }; } var réponse = magique(); réponse(1337); // 56154 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.return")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions","Les fonctions","",1)}}</li> - <li><a href="/fr/docs/Web/JavaScript/Closures">Les fermetures (closures)</a></li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.return")}} + +## Voir aussi + +- {{jsxref("Fonctions","Les fonctions","",1)}} +- [Les fermetures (closures)](/fr/docs/Web/JavaScript/Closures) diff --git a/files/fr/web/javascript/reference/statements/switch/index.md b/files/fr/web/javascript/reference/statements/switch/index.md index 7bf20d5913..98c11927bf 100644 --- a/files/fr/web/javascript/reference/statements/switch/index.md +++ b/files/fr/web/javascript/reference/statements/switch/index.md @@ -8,66 +8,65 @@ tags: translation_of: Web/JavaScript/Reference/Statements/switch original_slug: Web/JavaScript/Reference/Instructions/switch --- -<div>{{jsSidebar("Statements")}}</div> - -<p>L'instruction <strong><code>switch</code></strong> évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">switch (expression) { - case valeur1: - // Instructions à exécuter lorsque le résultat - // de l'expression correspond à valeur1 - instructions1; - [break;] - case valeur2: - // Instructions à exécuter lorsque le résultat - // de l'expression correspond à valeur2 - instructions 2; - [break;] - ... - case valeurN: - // Instructions à exécuter lorsque le résultat - // de l'expression à valeurN - instructionsN; - [break;] - [default: - // Instructions à exécuter lorsqu'aucune des valeurs - // ne correspond - instructions_def; - [break;]] -}</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>Une expression à comparer avec chacune des clause <code>case</code>.</dd> - <dt><code>case expressionN </code> {{optional_inline}}</dt> - <dd>Une clause qu'on compare avec <code>expression</code>.</dd> - <dt><code>default </code>{{optional_inline}}</dt> - <dd>Une clause exécutée si aucune correspondance n'est trouvée avec les clause <code>case</code> (et/ou s'il n'y a pas de <code>break</code> pour les clauses <code>case</code> précédentes).</dd> - <dt><code>instructionsN</code></dt> - <dd>Les instructions à exécuter lorsque l'<code>expression</code> correspond au cas présenté pour cette clause.</dd> - <dt><code>instructions_def</code></dt> - <dd>Les instructions à exécuter si l'<code>expression</code> ne correspond à aucun cas de figure précédemment décrit.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une instruction <code>switch</code> commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).</p> - -<p>Le programme recherche tout d'abord une clause <code>case</code> dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause <code>case</code> n'est trouvée, le programme recherche la clause optionnelle <code>default</code> et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction <code>switch</code>. Par convention, la clause <code>default</code> est utilisée en dernière mais cela n'est pas nécessaire.</p> - -<p>L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction <code>switch</code>).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_switch">Utiliser <code>switch</code></h3> - -<p>Dans l'exemple suivant, si l'expression <code>expr</code> vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction <code>break</code> est trouvée, le programme « sort » de l'instruction <code>switch</code> et continue l'exécution avec les instructions suivantes. Si <code>break</code> n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.</p> - -<pre class="brush: js">switch (expr) { +{{jsSidebar("Statements")}} + +L'instruction **`switch`** évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes. + +{{EmbedInteractiveExample("pages/js/statement-switch.html")}} + +## Syntaxe + + switch (expression) { + case valeur1: + // Instructions à exécuter lorsque le résultat + // de l'expression correspond à valeur1 + instructions1; + [break;] + case valeur2: + // Instructions à exécuter lorsque le résultat + // de l'expression correspond à valeur2 + instructions 2; + [break;] + ... + case valeurN: + // Instructions à exécuter lorsque le résultat + // de l'expression à valeurN + instructionsN; + [break;] + [default: + // Instructions à exécuter lorsqu'aucune des valeurs + // ne correspond + instructions_def; + [break;]] + } + +- `expression` + - : Une expression à comparer avec chacune des clause `case`. +- `case expressionN `{{optional_inline}} + - : Une clause qu'on compare avec `expression`. +- `default `{{optional_inline}} + - : Une clause exécutée si aucune correspondance n'est trouvée avec les clause `case` (et/ou s'il n'y a pas de `break` pour les clauses `case` précédentes). +- `instructionsN` + - : Les instructions à exécuter lorsque l'`expression` correspond au cas présenté pour cette clause. +- `instructions_def` + - : Les instructions à exécuter si l'`expression` ne correspond à aucun cas de figure précédemment décrit. + +## Description + +Une instruction `switch` commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres). + +Le programme recherche tout d'abord une clause `case` dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause `case` n'est trouvée, le programme recherche la clause optionnelle `default` et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction `switch`. Par convention, la clause `default` est utilisée en dernière mais cela n'est pas nécessaire. + +L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si `break` n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction `switch`). + +## Exemples + +### Utiliser `switch` + +Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée. + +```js +switch (expr) { case "Oranges": console.log("Oranges : 0.59 € le kilo."); break; @@ -89,13 +88,14 @@ original_slug: Web/JavaScript/Reference/Instructions/switch } console.log("Autre chose ?"); -</pre> +``` -<h3 id="Que_se_passe-t-il_si_on_oublie_un_break">Que se passe-t-il si on oublie un <code>break</code> ?</h3> +### Que se passe-t-il si on oublie un `break` ? -<p>Si on omet une instruction <code>break</code>, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction <code>switch</code> ou jusqu'à une instruction <code>break</code>. Par exemple :</p> +Si on omet une instruction `break`, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction `switch` ou jusqu'à une instruction `break`. Par exemple : -<pre class="brush: js">var toto = 0; +```js +var toto = 0; switch (toto) { case -1: console.log('moins un'); @@ -113,13 +113,15 @@ switch (toto) { break; default: console.log('default'); -}</pre> +} +``` -<h3 id="Peut-on_intercaler_la_règle_par_défaut">Peut-on intercaler la règle par défaut ?</h3> +### Peut-on intercaler la règle par défaut ? -<p>Oui, il est possible de placer le cas <code>default</code> entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc <code>default</code> puis par les autres s'il n'y a pas de <code>break</code>. Par exemple :</p> +Oui, il est possible de placer le cas `default` entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc `default` puis par les autres s'il n'y a pas de `break`. Par exemple : -<pre class="brush: js">var toto = 5 +```js +var toto = 5 switch (toto) { case 2: console.log(2); // ne sera pas exécuté @@ -131,19 +133,20 @@ switch (toto) { // pas de break avant } // La console affichera "default" puis "1" -</pre> +``` -<h3 id="Méthodes_pour_regrouper_différents_cas">Méthodes pour regrouper différents cas</h3> +### Méthodes pour regrouper différents cas -<p>Pour la source depuis laquelle les exemples suivants ont été adaptés, voir <a href="https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">cette question Stack Overflow</a>.</p> +Pour la source depuis laquelle les exemples suivants ont été adaptés, voir [cette question Stack Overflow](https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript). -<h4 id="Regrouper_différents_cas_pour_exécuter_une_unique_opération">Regrouper différents cas pour exécuter une unique opération</h4> +#### Regrouper différents cas pour exécuter une unique opération -<p>Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).</p> +Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée). -<p>On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :</p> +On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs : -<pre class="brush: js">var animal = 'girafe'; +```js +var animal = 'girafe'; switch (animal) { case 'vache': case 'girafe': @@ -154,13 +157,15 @@ switch (animal) { case 'oiseau': default: console.log('Cet animal n\'est pas un mammifère.'); -}</pre> +} +``` -<h4 id="Chaîner_des_opérations">Chaîner des opérations</h4> +#### Chaîner des opérations -<p>Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du <code>switch</code> :</p> +Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du `switch` : -<pre class="brush: js">var toto = 1; +```js +var toto = 1; var output = 'Résultat : '; switch (toto) { case 0: @@ -182,54 +187,29 @@ switch (toto) { break; default: console.log('Veuillez choisir un nombre entre 0 et 5 !'); -}</pre> - -<p>Selon les valeurs fournies à la variable <code>toto</code>, on aura les résultats suivants :</p> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Valeur</th> - <th scope="col">Texte</th> - </tr> - <tr> - <td>toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0</td> - <td>Veuillez choisir un nombre entre 0 et 5 !</td> - </tr> - <tr> - <td>0</td> - <td>Résultat : Donc quel est votre nom ?</td> - </tr> - <tr> - <td>1</td> - <td>Résultat : quel est votre nom ?</td> - </tr> - <tr> - <td>2</td> - <td>Résultat : votre nom ?</td> - </tr> - <tr> - <td>3</td> - <td>Résultat : nom ?</td> - </tr> - <tr> - <td>4</td> - <td>Résultat : ?</td> - </tr> - <tr> - <td>5</td> - <td>Résultat : !</td> - </tr> - </tbody> -</table> - -<h3 id="switch_et_les_variables_avec_une_portée_de_bloc"><code>switch</code> et les variables avec une portée de bloc</h3> - -<p>Avec ECMAScript 2015 (ES6), on peut utiliser les instructions <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> pour déclarer des variables dont la portée sera celle du bloc englobant.</p> - -<p>Prenons cet exemple :</p> - -<pre class="brush: js">const action = 'dire_bonjour'; +} +``` + +Selon les valeurs fournies à la variable `toto`, on aura les résultats suivants : + +| Valeur | Texte | +| ------------------------------------------------------------------------- | ----------------------------------------- | +| toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0 | Veuillez choisir un nombre entre 0 et 5 ! | +| 0 | Résultat : Donc quel est votre nom ? | +| 1 | Résultat : quel est votre nom ? | +| 2 | Résultat : votre nom ? | +| 3 | Résultat : nom ? | +| 4 | Résultat : ? | +| 5 | Résultat : ! | + +### `switch` et les variables avec une portée de bloc + +Avec ECMAScript 2015 (ES6), on peut utiliser les instructions [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) pour déclarer des variables dont la portée sera celle du bloc englobant. + +Prenons cet exemple : + +```js +const action = 'dire_bonjour'; switch (action) { case 'dire_bonjour': let message = 'bonjour'; @@ -242,73 +222,51 @@ switch (action) { default: console.log('Aucune action reçue.'); break; -}</pre> +} +``` -<p>Si on exécute cet exemple, on aura l'erreur <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> qui n'est probablement pas le résultat espéré.</p> +Si on exécute cet exemple, on aura l'erreur `Uncaught SyntaxError: Identifier 'message' has already been declared` qui n'est probablement pas le résultat espéré. -<p>Cela se produit car la première instruction <code>let message = 'bonjour';</code> entre en conflit avec <code>let message = 'coucou';</code> bien qu'elles soient rattachées à deux instructions <code>case</code> distinctes <code>case 'dire_bonjour':</code> et <code>case 'dire_coucou':</code> mais ces deux instructions s'inscrivent dans le même bloc et on a donc <code>message</code> déclaré deux fois dans le même bloc, soit deux fois dans la même portée.</p> +Cela se produit car la première instruction `let message = 'bonjour';` entre en conflit avec `let message = 'coucou';` bien qu'elles soient rattachées à deux instructions `case` distinctes `case 'dire_bonjour':` et `case 'dire_coucou':` mais ces deux instructions s'inscrivent dans le même bloc et on a donc `message` déclaré deux fois dans le même bloc, soit deux fois dans la même portée. -<p>Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque <code>case</code> :</p> +Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque `case` : -<pre class="brush: js">const action = 'dire_bonjour'; +```js +const action = 'dire_bonjour'; switch (action) { - case 'dire_bonjour': <strong>{ // accolade ajoutée</strong> + case 'dire_bonjour': { // accolade ajoutée let message = 'bonjour'; console.log(message); break; - <strong>} // accolade ajoutée</strong> - case 'dire_coucou': <strong>{ // accolade ajoutée</strong> + } // accolade ajoutée + case 'dire_coucou': { // accolade ajoutée let message = 'coucou'; console.log(message); break; - <strong>} // accolade ajoutée</strong> - default: <strong>{ // accolade ajoutée</strong> + } // accolade ajoutée + default: { // accolade ajoutée console.log('Aucune action reçue.'); break; - <strong>} // accolade ajoutée</strong> -}</pre> - -<p>Cette nouvelle version, exécutée, produira <code>"bonjour"</code> dans la console, sans causer d'erreur.</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.2</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.switch")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/if...else","if...else")}}</li> - <li>{{jsxref("Instructions/break","break")}}</li> -</ul> + } // accolade ajoutée +} +``` + +Cette nouvelle version, exécutée, produira `"bonjour"` dans la console, sans causer d'erreur. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | +| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.switch")}} + +## Voir aussi + +- {{jsxref("Instructions/if...else","if...else")}} +- {{jsxref("Instructions/break","break")}} diff --git a/files/fr/web/javascript/reference/statements/throw/index.md b/files/fr/web/javascript/reference/statements/throw/index.md index 4f250245c0..ea94fd6e09 100644 --- a/files/fr/web/javascript/reference/statements/throw/index.md +++ b/files/fr/web/javascript/reference/statements/throw/index.md @@ -9,39 +9,40 @@ tags: translation_of: Web/JavaScript/Reference/Statements/throw original_slug: Web/JavaScript/Reference/Instructions/throw --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>throw</code></strong> permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction <code>throw</code> ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc <code>catch</code> ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.</p> +L'instruction **`throw`** permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction `throw` ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc `catch` ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé. -<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-throw.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">throw <em>expression</em>; </pre> + throw expression; -<dl> - <dt><code>expression</code></dt> - <dd>L'expression qui fournit l'exception à lever.</dd> -</dl> +- `expression` + - : L'expression qui fournit l'exception à lever. -<h2 id="Description">Description</h2> +## Description -<p>L'instruction <code>throw</code> permet de lever (<em>throw</em> en anglais) une exception. Lorsqu'on lève une exception, <code>expression</code> fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :</p> +L'instruction `throw` permet de lever (_throw_ en anglais) une exception. Lorsqu'on lève une exception, `expression` fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception : -<pre class="brush: js">throw "monErreur"; // génère une exception étant une chaîne de caractères +```js +throw "monErreur"; // génère une exception étant une chaîne de caractères throw 42; // génère une exception ayant la valeur 42 throw true; // génère une exception ayant la valeur true -throw new Error("Obligatoire"); // génère un objet Error avec le message "Obligatoire"</pre> +throw new Error("Obligatoire"); // génère un objet Error avec le message "Obligatoire" +``` -<p>On notera également que l'instruction <code>throw</code> est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé <code>throw</code> et l'expression.</p> +On notera également que l'instruction `throw` est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé `throw` et l'expression. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Lever_une_exception_qui_est_un_objet">Lever une exception qui est un objet</h3> +### Lever une exception qui est un objet -<p>Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc <code>catch</code>. Dans l'exemple suivant, on crée un objet <code>monException</code> du type <code>ExceptionUtilisateur</code> puis on utilise cet objet avec une instruction <code>throw</code>.</p> +Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc `catch`. Dans l'exemple suivant, on crée un objet `monException` du type `ExceptionUtilisateur` puis on utilise cet objet avec une instruction `throw`. -<pre class="brush: js">function ExceptionUtilisateur(message) { +```js +function ExceptionUtilisateur(message) { this.message = message; this.name = "ExceptionUtilisateur"; } @@ -65,13 +66,14 @@ try { console.error(e.message, e.name); // on passe les caractéristiques de l'exception // à un gestionnaire d'erreur } -</pre> +``` -<h3 id="Deuxième_exemple_avec_un_objet">Deuxième exemple avec un objet</h3> +### Deuxième exemple avec un objet -<p>Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type <code>ZipFormatIncorrectException</code>. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).</p> +Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type `ZipFormatIncorrectException`. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple). -<pre class="brush: js">/* +```js +/* * Crée un objet ZipCode. * * Les formats acceptés sont : @@ -136,63 +138,39 @@ b = vérifierZipCode(9560); // renvoie -1 c = vérifierZipCode("a"); // renvoie -1 d = vérifierZipCode("95060"); // renvoie 95060 e = vérifierZipCode("95060 1234"); // renvoie 95060 1234 -</pre> +``` -<h3 id="Propager_une_exception">Propager une exception</h3> +### Propager une exception -<p>L'instruction <code>throw</code> peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.</p> +L'instruction `throw` peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur. -<pre class="brush: js">try { +```js +try { throw n; // lève une exception avec une valeur numérique } catch (e) { - if (e <= 50) { + if (e <= 50) { // des instructions pour gérer les cas entre 1 et 50 } else { // ce cas ne peut pas être géré maintenant, on transmet l'exception throw e; } } -</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.throw")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/try...catch","try...catch")}}</li> - <li>{{jsxref("Error")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.4 | +| {{SpecName('ES5.1', '#sec-12.13', 'throw statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-throw-statement', 'throw statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.throw")}} + +## Voir aussi + +- {{jsxref("Instructions/try...catch","try...catch")}} +- {{jsxref("Error")}} diff --git a/files/fr/web/javascript/reference/statements/try...catch/index.md b/files/fr/web/javascript/reference/statements/try...catch/index.md index 3eaf41da6e..358ae2ee42 100644 --- a/files/fr/web/javascript/reference/statements/try...catch/index.md +++ b/files/fr/web/javascript/reference/statements/try...catch/index.md @@ -8,65 +8,61 @@ tags: translation_of: Web/JavaScript/Reference/Statements/try...catch original_slug: Web/JavaScript/Reference/Instructions/try...catch --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>try...catch</code></strong> regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.</p> +L'instruction **`try...catch`** regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception. -<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">try { - <em>instructions_try</em> -} -[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard - <em>instructions_catch_1</em> -}] -... -[catch (<em>exception_var_2</em>) { - <em>instructions_catch_2</em> -}] -[finally { - <em>instructions_finally</em> -}] -</pre> - -<dl> - <dt><code>instructions_try</code></dt> - <dd>Les instructions qu'on souhaite exécuter.</dd> - <dt><code>instructions_catch_1</code>, <code>instructions_catch_2</code></dt> - <dd>Les instructions à exécuter si une exception est levée dans le bloc <code>try</code>.</dd> - <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> - <dd>Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause <code>catch</code>.</dd> - <dt><code>condition_1</code></dt> - <dd>Une expression conditionnelle.</dd> - <dt><code>instructions_finally</code></dt> - <dd>Les instructions à exécuter une fois que l'instruction <code>try</code> est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'instruction <code>try</code> est composée d'un bloc <code>try</code> contenant une ou plusieurs instructions, d'au moins une clause <code>catch</code> ou d'une clause <code>finally</code> ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :</p> - -<ol> - <li><code>try...catch</code></li> - <li><code>try...finally</code></li> - <li><code>try...catch...finally</code></li> -</ol> - -<p>Une clause <code>catch</code> contient les instructions à exécuter si une exception est levée par une instruction du bloc <code>try</code>. On souhaite généralement que le bloc <code>try</code> se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> (ou une fonction appelée depuis le bloc <code>try</code>) renvoie une exception, le contrôle sera immédiatement passé à la clause <code>catch</code>. Si aucune exception n'est levée, la clause <code>catch</code> ne sera pas utilisée.</p> - -<p>La clause <code>finally</code> s'exécute après le bloc <code>try</code> et après le bloc <code>catch</code> (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.</p> - -<p>Il est possible d'imbriquer plusieurs instructions <code>try</code>. Si un <code>try</code> imbriqué ne possède pas de clause <code>catch</code>, la clause <code>catch</code> du <code>try</code> du niveau supérieur sera utilisée (et ainsi de suite).</p> - -<p>Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions">Guide JavaScript</a> correspondant.</p> - -<h3 id="Clause_catch_inconditionnelle">Clause <code>catch</code> inconditionnelle</h3> - -<p>Lorsqu'une seule clause <code>catch</code> inconditionnelle est utilisée, le bloc <code>catch</code> est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause <code>catch</code>.</p> - -<pre class="brush: js">try { + try { + instructions_try + } + [catch (exception_var_1 if condition_1) { // non-standard + instructions_catch_1 + }] + ... + [catch (exception_var_2) { + instructions_catch_2 + }] + [finally { + instructions_finally + }] + +- `instructions_try` + - : Les instructions qu'on souhaite exécuter. +- `instructions_catch_1`, `instructions_catch_2` + - : Les instructions à exécuter si une exception est levée dans le bloc `try`. +- `exception_var_1`, `exception_var_2` + - : Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause `catch`. +- `condition_1` + - : Une expression conditionnelle. +- `instructions_finally` + - : Les instructions à exécuter une fois que l'instruction `try` est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non. + +## Description + +L'instruction `try` est composée d'un bloc `try` contenant une ou plusieurs instructions, d'au moins une clause `catch` ou d'une clause `finally` ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction : + +1. `try...catch` +2. `try...finally` +3. `try...catch...finally` + +Une clause `catch` contient les instructions à exécuter si une exception est levée par une instruction du bloc `try`. On souhaite généralement que le bloc `try` se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc `catch`. Si une instruction contenue dans le bloc `try` (ou une fonction appelée depuis le bloc `try`) renvoie une exception, le contrôle sera immédiatement passé à la clause `catch`. Si aucune exception n'est levée, la clause `catch` ne sera pas utilisée. + +La clause `finally` s'exécute après le bloc `try` et après le bloc `catch` (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée. + +Il est possible d'imbriquer plusieurs instructions `try`. Si un `try` imbriqué ne possède pas de clause `catch`, la clause `catch` du `try` du niveau supérieur sera utilisée (et ainsi de suite). + +Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions) correspondant. + +### Clause `catch` inconditionnelle + +Lorsqu'une seule clause `catch` inconditionnelle est utilisée, le bloc `catch` est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause `catch`. + +```js +try { throw "monException"; // génère une exception } catch (e) { @@ -75,19 +71,20 @@ catch (e) { logErreurs(e); // on transfère l'objet de l'exception à une méthode // gestionnaire } -</pre> +``` -<p>La clause <code>catch</code> définit un identifiant (dans l'exemple précédent, c'est <code>e</code>) qui contient la valeur définie par l'instruction <code>throw</code>. Ce bloc <code>catch</code> est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc <code>catch</code>, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc <code>catch</code>. Une fois que le bloc <code>catch</code> a été exécuté, l'identifiant n'est plus disponible.</p> +La clause `catch` définit un identifiant (dans l'exemple précédent, c'est `e`) qui contient la valeur définie par l'instruction `throw`. Ce bloc `catch` est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc `catch`, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc `catch`. Une fois que le bloc `catch` a été exécuté, l'identifiant n'est plus disponible. -<h3 id="Clauses_catch_conditionnelles">Clauses <code>catch</code> conditionnelles</h3> +### Clauses `catch` conditionnelles -<p>{{non-standard_header}}</p> +{{non-standard_header}} -<p>Il est aussi possible d'utiliser une ou plusieurs clauses <code>catch</code> conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause <code>catch</code> appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc <code>try</code> peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause <code>catch</code> correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause <code>catch</code> non-conditionnelle si elle est trouvée..</p> +Il est aussi possible d'utiliser une ou plusieurs clauses `catch` conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause `catch` appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc `try` peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause `catch` correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause `catch` non-conditionnelle si elle est trouvée.. -<p>Si on utilise une clause <code>catch</code> inconditionnelle avec une ou plusieurs clauses <code>catch</code> conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause <code>catch</code> inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.</p> +Si on utilise une clause `catch` inconditionnelle avec une ou plusieurs clauses `catch` conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause `catch` inconditionnelle interceptera tous les types d'exceptions avant les autres clauses. -<pre class="brush: js">try { +```js +try { maRoutine(); // peut déclencher trois types d'exceptions } catch (e if e instanceof TypeError) { // les instructions pour gérer TypeError @@ -98,11 +95,12 @@ catch (e) { } catch (e) { // les instructions pour gérer les autres exceptions } -</pre> +``` -<p>Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :</p> +Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript : -<pre class="brush: js">try { +```js +try { maRoutine(); // may throw three types of exceptions } catch (e) { if (e instanceof TypeError) { @@ -115,30 +113,33 @@ catch (e) { // les instructions pour gérer les autres exceptions } } -</pre> +``` -<h3 id="L'identifiant_de_l'exception">L'identifiant de l'exception</h3> +### L'identifiant de l'exception -<p>Lorsqu'une exception est levée dans le bloc <code>try</code>, <em><code>exception_var</code></em> (par exemple le <code>e</code> dans « <code>catch (e)</code> ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause <code>catch</code>, il est créé lorsqu'on rentre dans la clause <code>catch</code> et n'est plus disponible une fois que la clause a fini son exécution.</p> +Lorsqu'une exception est levée dans le bloc `try`, _`exception_var`_ (par exemple le `e` dans « `catch (e)` ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause `catch`, il est créé lorsqu'on rentre dans la clause `catch` et n'est plus disponible une fois que la clause a fini son exécution. -<pre class="brush: js">function isValidJSON(txt){ +```js +function isValidJSON(txt){ try { JSON.parse(txt); return true; } catch { return false; } -}</pre> +} +``` -<h3 id="La_clause_finally">La clause <code>finally</code></h3> +### La clause `finally` -<p>La clause <code>finally</code> contient les instructions à exécuter après que les instructions du bloc <code>try</code> et éventuellement celles de la clause <code>catch</code> aient été exécutées mais avant que les instructions suivant l'instruction <code>try</code> soient exécutées. La clause <code>finally</code> est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause <code>catch</code>, les instructions de la clause <code>finally</code> sont tout de même exécutées.</p> +La clause `finally` contient les instructions à exécuter après que les instructions du bloc `try` et éventuellement celles de la clause `catch` aient été exécutées mais avant que les instructions suivant l'instruction `try` soient exécutées. La clause `finally` est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause `catch`, les instructions de la clause `finally` sont tout de même exécutées. -<p>Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera <strong>pas</strong> exécuté. Aussi, le bloc <code>finally</code> permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.</p> +Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera **pas** exécuté. Aussi, le bloc `finally` permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé. -<p>La clause <code>finally</code> peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de <code>finally</code> pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause <code>finally</code> permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc <code>finally</code> sera exécuté même si on a une instruction <code>return</code> dans la section <code>try</code> ou dans la section <code>catch</code>.</p> +La clause `finally` peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de `finally` pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause `finally` permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc `finally` sera exécuté même si on a une instruction `return` dans la section `try` ou dans la section `catch`. -<pre class="brush: js">ouvrirMonFichier() +```js +ouvrirMonFichier() try { // on utilise une ressource écrireDansMonFichier(mesDonnées); @@ -146,15 +147,16 @@ try { finally { fermerMonFichier(); // on ferme toujours la ressource } -</pre> +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Blocs_try_imbriqués">Blocs <code>try</code> imbriqués</h3> +### Blocs `try` imbriqués -<p>Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :</p> +Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant : -<pre class="brush: js">try { +```js +try { try { throw new Error("oups"); } @@ -169,11 +171,12 @@ catch (ex) { // Produira dans la console : // "finally" // "externe" "oups" -</pre> +``` -<p>Et maintenant, si on a déjà intercepté l'exception avec une clause <code>catch</code> dans le bloc imbriqué :</p> +Et maintenant, si on a déjà intercepté l'exception avec une clause `catch` dans le bloc imbriqué : -<pre class="brush: js">try { +```js +try { try { throw new Error("oups"); } @@ -191,11 +194,12 @@ catch (ex) { // Produira dans la console: // "interne" "oups" // "finally" -</pre> +``` -<p>Ensuite, si on propage l'erreur à nouveau :</p> +Ensuite, si on propage l'erreur à nouveau : -<pre class="brush: js">try { +```js +try { try { throw new Error("oups"); } @@ -215,15 +219,16 @@ catch (ex) { // "interne" "oups" // "finally" // "externe" "oups" -</pre> +``` -<p>Toute exception ne sera interceptée qu'une seule fois par le bloc <code>catch</code> le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.</p> +Toute exception ne sera interceptée qu'une seule fois par le bloc `catch` le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe. -<h3 id="Valeur_de_retour_et_bloc_finally">Valeur de retour et bloc <code>finally</code></h3> +### Valeur de retour et bloc `finally` -<p>Lorsque le bloc <code>finally</code> renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc <code>try-catch-finally</code> et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs <code>try</code> et <code>catch</code>. Cela inclue également les exceptions levées dans le bloc <code>catch</code> :</p> +Lorsque le bloc `finally` renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc `try-catch-finally` et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs `try` et `catch`. Cela inclue également les exceptions levées dans le bloc `catch` : -<pre class="brush: js">try { +```js +try { try { throw new Error("oups"); } @@ -243,49 +248,24 @@ catch (ex) { // Produira dans la console : // "interne" "oups" // "finally" -</pre> - -<p>Le "oups" externe n'est pas renvoyé car l'instruction <code>return</code> est utilisée dans la clause <code>finally</code> du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc <code>catch</code>.</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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.try_catch")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Instructions/throw", "throw")}}</li> -</ul> +``` + +Le "oups" externe n'est pas renvoyé car l'instruction `return` est utilisée dans la clause `finally` du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc `catch`. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.4 | +| {{SpecName('ES5.1', '#sec-12.14', 'instruction try')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-try-statement', 'Instruction try')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-try-statement', 'try statement')}} | {{Spec2('ESDraft')}} | Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5). | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.try_catch")}} + +## Voir aussi + +- {{jsxref("Error")}} +- {{jsxref("Instructions/throw", "throw")}} diff --git a/files/fr/web/javascript/reference/statements/var/index.md b/files/fr/web/javascript/reference/statements/var/index.md index 044870b84c..613053dab3 100644 --- a/files/fr/web/javascript/reference/statements/var/index.md +++ b/files/fr/web/javascript/reference/statements/var/index.md @@ -8,70 +8,76 @@ tags: translation_of: Web/JavaScript/Reference/Statements/var original_slug: Web/JavaScript/Reference/Instructions/var --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>var</code></strong> (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.</p> +L'instruction **`var`** (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur. -<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-var.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>nomVar1 [</em>= <em>valeur1] [</em>, <em>nomVar2 [</em>= <em>valeur2] </em><em>... [</em>, <em>nomVarN [</em>= <em>valeurN]]]</em>;</pre> + var nomVar1 [= valeur1] [, nomVar2 [= valeur2] ... [, nomVarN [= valeurN]]]; -<dl> - <dt><code>nomvarN</code></dt> - <dd>Le nom de la variable, cela peut être n'importe quel identifiant valide.</dd> - <dt><code>valeurN</code></dt> - <dd>La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.</dd> -</dl> +- `nomvarN` + - : Le nom de la variable, cela peut être n'importe quel identifiant valide. +- `valeurN` + - : La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}. -<h2 id="Description">Description</h2> +## Description -<p>Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec <code>var</code> est le <em>contexte d'exécution</em> courant, c'est-à-dire : <strong>la fonction</strong> qui contient la déclaration <strong>ou le contexte global</strong> si la variable est déclarée en dehors de toute fonction.</p> +Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec `var` est le _contexte d'exécution_ courant, c'est-à-dire : **la fonction** qui contient la déclaration **ou le contexte global** si la variable est déclarée en dehors de toute fonction. -<p>Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé <code>var</code> n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :</p> +Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé `var` n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont : -<ol> - <li>Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales. - <pre class="brush: js">function x() { - y = 1; // Lève une exception ReferenceError en mode strict - var z = 2; -} +1. Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales. + + ```js + function x() { + y = 1; // Lève une exception ReferenceError en mode strict + var z = 2; + } + + x(); + + console.log(y); // Affiche "1" dans la console + console.log(z); // Lève une exception ReferenceError: + // z n'est pas définie en dehors de x + ``` -x(); +2. Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté. -console.log(y); // Affiche "1" dans la console -console.log(z); // Lève une exception ReferenceError: - // z n'est pas définie en dehors de x -</pre> - </li> - <li>Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté. - <pre class="brush: js">console.log(a); // Lève une exception ReferenceError. -console.log('on continue...'); // N'est jamais exécuté</pre> + ```js + console.log(a); // Lève une exception ReferenceError. + console.log('on continue...'); // N'est jamais exécuté + ``` - <pre class="brush: js">var a; -console.log(a); // Affiche "undefined". -console.log('on continue...'); // Affiche "on continue...".</pre> - </li> - <li>Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées). - <pre class="brush: js">var a = 1; -b = 2; + ```js + var a; + console.log(a); // Affiche "undefined". + console.log('on continue...'); // Affiche "on continue...". + ``` -delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon. -delete this.b; +3. Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées). -console.log(a, b); // Lève une exception ReferenceError. -// La propriété 'b' a été supprimée et n'existe plus.</pre> - </li> -</ol> + ```js + var a = 1; + b = 2; -<p>En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. <strong>Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.</strong> Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.</p> + delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon. + delete this.b; -<h3 id="La_remontée_de_variables_(hoisting)">La remontée de variables (<em>hoisting</em>)</h3> + console.log(a, b); // Lève une exception ReferenceError. + // La propriété 'b' a été supprimée et n'existe plus. + ``` -<p>Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (<em>hoisting</em> en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.</p> +En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. **Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.** Le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée. -<pre class="brush: js">bla = 2 +### La remontée de variables (_hoisting_) + +Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (_hoisting_ en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global. + +```js +bla = 2 var bla; // ... @@ -79,13 +85,14 @@ var bla; var bla; bla = 2; -</pre> +``` -<p>Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.</p> +Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées. -<p>Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :</p> +Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple : -<pre class="brush: js">function faireQuelqueChose() { +```js +function faireQuelqueChose() { console.log(truc); // undefined var truc = 111; console.log(truc); // 111 @@ -98,36 +105,40 @@ function faireQuelqueChose() { truc = 111; console.log(truc); // 111 } -</pre> +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Déclarer_et_initialiser_deux_variables">Déclarer et initialiser deux variables</h3> +### Déclarer et initialiser deux variables -<pre class="brush: js">var a = 0, b = 0; -</pre> +```js +var a = 0, b = 0; +``` -<h3 id="Affecter_deux_variables_avec_la_même_chaîne_de_caractères">Affecter deux variables avec la même chaîne de caractères</h3> +### Affecter deux variables avec la même chaîne de caractères -<pre class="brush: js">var a = "A"; +```js +var a = "A"; var b = a; // est équivalent à : var a, b = a = "A"; -</pre> +``` -<p>Attention à l'ordre :</p> +Attention à l'ordre : -<pre class="brush: js">var x = y, y = 'A'; +```js +var x = y, y = 'A'; console.log(x + y); // undefinedA -</pre> +``` -<p>Ici, <code>x</code> et <code>y</code> sont déclarées avant que n'importe quel code soit exécuté, <strong>les affectations sont réalisées après !</strong> Au moment où <code>x = y</code> est évalué, <code>y</code> existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, <code>x</code> reçoit la valeur <code>undefined</code>. Ensuite, <code>y</code> reçoit la valeur <code>'A'</code>. Après la première ligne de code, on a donc la situation où <code>x === undefined && y === 'A'</code>, ce qui explique le résultat.</p> +Ici, `x` et `y` sont déclarées avant que n'importe quel code soit exécuté, **les affectations sont réalisées après !** Au moment où `x = y` est évalué, `y` existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, `x` reçoit la valeur `undefined`. Ensuite, `y` reçoit la valeur `'A'`. Après la première ligne de code, on a donc la situation où `x === undefined && y === 'A'`, ce qui explique le résultat. -<h3 id="Initialiser_plusieurs_variables">Initialiser plusieurs variables</h3> +### Initialiser plusieurs variables -<pre class="brush: js">var x = 0; // Variable dans la portée globale (le fichier) +```js +var x = 0; // Variable dans la portée globale (le fichier) function f(){ var x = y = 1; // x est déclaré localement @@ -140,13 +151,14 @@ console.log(x, y); // 0, 1 // y a été contaminé dans la fonction ! // Une exception ReferenceError sera levée en mode // strict car y n'est pas défini dans cette portée -</pre> +``` -<h3 id="Les_variables_globales_implicites">Les variables globales implicites</h3> +### Les variables globales implicites -<p>Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :</p> +Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe : -<pre class="brush: js">var x = 0; // Déclare x comme variable globale du fichier, on lui affecte 0 +```js +var x = 0; // Déclare x comme variable globale du fichier, on lui affecte 0 console.log(typeof z); // "undefined", car z n'existe pas encore @@ -171,47 +183,23 @@ function a() { a(); // l'appel à a() entraîne un appel à b() console.log(x, z); // 3 5 -console.log(typeof y); // "undefined" car y est local à la fonction a</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.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.var")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/let","let")}}</li> - <li>{{jsxref("Instructions/const","const")}}</li> -</ul> +console.log(typeof y); // "undefined" car y est local à la fonction a +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0 | +| {{SpecName('ES5.1', '#sec-12.2', 'instruction var')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.var")}} + +## Voir aussi + +- {{jsxref("Instructions/let","let")}} +- {{jsxref("Instructions/const","const")}} diff --git a/files/fr/web/javascript/reference/statements/while/index.md b/files/fr/web/javascript/reference/statements/while/index.md index a9a03df043..1dd4b2a94d 100644 --- a/files/fr/web/javascript/reference/statements/while/index.md +++ b/files/fr/web/javascript/reference/statements/while/index.md @@ -8,92 +8,59 @@ tags: translation_of: Web/JavaScript/Reference/Statements/while original_slug: Web/JavaScript/Reference/Instructions/while --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <code><strong>while</strong></code> permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</p> +L'instruction **`while`** permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle. -<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> +{{EmbedInteractiveExample("pages/js/statement-while.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">while (<var>condition</var>) instruction</pre> + while (condition) instruction -<dl> - <dt><code>condition</code></dt> - <dd>Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, <code>instruction</code> est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle <code>while</code>.</dd> - <dt><code>instruction</code></dt> - <dd>Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour les regrouper.<br> - Note : on pourra utiliser l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code> afin d'arrêter une boucle avant que la condition soit vérifiée.</dd> -</dl> +- `condition` + - : Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, `instruction` est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle `while`. +- `instruction` + - : Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (`{ ... }`) pour les regrouper. + Note : on pourra utiliser l'instruction [`break`](/fr/docs/Web/JavaScript/Reference/Instructions/break) afin d'arrêter une boucle avant que la condition soit vérifiée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>La boucle <code>while</code> qui suit s'exécute tant que <code>n</code> est strictement inférieur à 3.</p> +La boucle `while` qui suit s'exécute tant que `n` est strictement inférieur à 3. -<pre class="brush:js">var n = 0; +```js +var n = 0; var x = 0; -while (n < 3) { +while (n < 3) { n++; x += n; -}</pre> - -<p>À chaque itération, la boucle incrémente la valeur de <code>n</code> et l'ajoute à <code>x</code>. Ainsi, <code>x</code> et <code>n</code> prennent les valeurs suivantes :</p> - -<ul> - <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li> - <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li> - <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li> -</ul> - -<p>Une fois que la troisième itération est exécutée, la condition <code>n</code> < 3 n'est plus vérifiée et donc la boucle se termine.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.while")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/do...while","do...while")}}</li> - <li>{{jsxref("Instructions/for", "for")}}</li> -</ul> +} +``` + +À chaque itération, la boucle incrémente la valeur de `n` et l'ajoute à `x`. Ainsi, `x` et `n` prennent les valeurs suivantes : + +- Après la première itération : `n` = 1 et `x` = 1 +- Après la deuxième itération : `n` = 2 et `x` = 3 +- Après la troisième itération : `n` = 3 et `x` = 6 + +Une fois que la troisième itération est exécutée, la condition `n` < 3 n'est plus vérifiée et donc la boucle se termine. + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('ESDraft', '#sec-while-statement', 'while statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-while-statement', 'while statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.6.2', 'while statement')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-12.6.1', 'while statement')}} | {{Spec2('ES1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.while")}} + +## Voir aussi + +- {{jsxref("Instructions/do...while","do...while")}} +- {{jsxref("Instructions/for", "for")}} diff --git a/files/fr/web/javascript/reference/statements/with/index.md b/files/fr/web/javascript/reference/statements/with/index.md index 7215a32ed2..52f8b053f2 100644 --- a/files/fr/web/javascript/reference/statements/with/index.md +++ b/files/fr/web/javascript/reference/statements/with/index.md @@ -9,126 +9,93 @@ tags: translation_of: Web/JavaScript/Reference/Statements/with original_slug: Web/JavaScript/Reference/Instructions/with --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<div class="warning"><p><strong>Attention :</strong>Il n'est pas recommandé d'utiliser l'instruction <code>with</code>. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.</p></div> +> **Attention :**Il n'est pas recommandé d'utiliser l'instruction `with`. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails. -<p>L'instruction <strong><code>with</code></strong> permet d'étendre la portée chaînée d'une instruction.</p> +L'instruction **`with`** permet d'étendre la portée chaînée d'une instruction. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">with (expression) { - instruction -} -</pre> + with (expression) { + instruction + } -<dl> - <dt><code>expression</code></dt> - <dd>L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.</dd> - <dt><code>instruction</code></dt> - <dd>N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.</dd> -</dl> +- `expression` + - : L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires. +- `instruction` + - : N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper. -<h2 id="Description">Description</h2> +## Description -<p>Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction <code>with</code> ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur <code>ReferenceError</code> est renvoyée.</p> +Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction `with` ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur `ReferenceError` est renvoyée. -<div class="note"><p><strong>Note :</strong> L'utilisation de l'instruction <code>with</code> n'est pas recommandée et est interdite dans le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.</p></div> +> **Note :** L'utilisation de l'instruction `with` n'est pas recommandée et est interdite dans le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire. -<h3 id="Avantages_et_inconvénients_les_performances">Avantages et inconvénients : les performances</h3> +### Avantages et inconvénients : les performances -<ul> - <li><strong>Avantage :</strong> l'instruction <code>with</code> permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de <code>with</code> soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.</li> - <li><strong>Inconvénient :</strong> en utilisant <code>with</code>, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction <code>with</code> devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.</li> -</ul> +- **Avantage :** l'instruction `with` permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de `with` soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages. +- **Inconvénient :** en utilisant `with`, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction `with` devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié. -<h3 id="Inconvénient_l'ambiguïté">Inconvénient : l'ambiguïté</h3> +### Inconvénient : l'ambiguïté -<ul> - <li><strong>Inconvénient :</strong> l'instruction <code>with</code> peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple : +- **Inconvénient :** l'instruction `with` peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple : - <pre class="brush: js">function f(x, o) { - with (o) - console.log(x); -}</pre> + ```js + function f(x, o) { + with (o) + console.log(x); + } + ``` - <p>ce n'est que quand <code>f</code> est appelée que <code>x</code> est trouvé ou non, s'il est trouvé à partir de <code>o</code> ou (si o n'a pas de telle propriété) dans l'objet d'activation de <code>f </code>où <code>x</code> représente le premier argument de la fonction. Si <code>x</code> n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.</p> - </li> - <li><strong>Inconvénient :</strong> Du code utilisant l'instruction <code>with</code> pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple : - <div> - <pre class="brush:js">function f(toto, values) { - with (toto) { - console.log(values) - } -} -</pre> + ce n'est que quand `f` est appelée que `x` est trouvé ou non, s'il est trouvé à partir de `o` ou (si o n'a pas de telle propriété) dans l'objet d'activation de `f `où `x` représente le premier argument de la fonction. Si `x` n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus. + +- **Inconvénient :** Du code utilisant l'instruction `with` pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple : - <p>Si vous appelez <code>f([1,2,3], obj)</code> dans un environnement ECMAScript 5, la référence à <code>values</code> à l'intérieur de l'instruction <code>with</code> sera liée avec <code>obj</code>. Cependant, ECMAScript 2015 (ES6) a introduit une propriété <code>values</code> pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à <code>values</code> utilisée à l'intérieur de l'instruction <code>with</code> sera résolue avec <code>[1,2,3].values</code>.</p> - </div> - </li> -</ul> + ```js + function f(toto, values) { + with (toto) { + console.log(values) + } + } + ``` -<h2 id="Exemples">Exemples</h2> + Si vous appelez `f([1,2,3], obj)` dans un environnement ECMAScript 5, la référence à `values` à l'intérieur de l'instruction `with` sera liée avec `obj`. Cependant, ECMAScript 2015 (ES6) a introduit une propriété `values` pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à `values` utilisée à l'intérieur de l'instruction `with` sera résolue avec `[1,2,3].values`. -<h3 id="Utiliser_with">Utiliser <code>with</code></h3> +## Exemples -<p>L'instruction <code>with</code> suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet <code>Math</code> pour ces références.</p> +### Utiliser `with` -<pre class="brush:js">var a, x, y; +L'instruction `with` suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet `Math` pour ces références. + +```js +var a, x, y; var r = 10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI / 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('ESDraft', '#sec-with-statement', 'with statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Désormais interdit en mode strict.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.with")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}</li> - <li>{{jsxref("Strict_mode","Mode strict","",1)}}</li> - <li>{{jsxref("Symbol.unscopables")}}</li> - <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------- | +| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES5.1')}} | Désormais interdit en mode strict. | +| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.with")}} + +## Voir aussi + +- {{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}} +- {{jsxref("Strict_mode","Mode strict","",1)}} +- {{jsxref("Symbol.unscopables")}} +- {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}} |