diff options
Diffstat (limited to 'files/fr/web/javascript/reference/operators')
142 files changed, 8262 insertions, 8681 deletions
diff --git a/files/fr/web/javascript/reference/operators/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html deleted file mode 100644 index e67da71cd6..0000000000 --- a/files/fr/web/javascript/reference/operators/addition/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Addition (+) -slug: Web/JavaScript/Reference/Operators/Addition -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition -original_slug: Web/JavaScript/Reference/Opérateurs/Addition -browser-compat: javascript.operators.addition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'addition (<code>+</code>) produit la somme de deux opérandes numériques ou la concaténation de deux chaînes de caractères.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> - -<h2 id="syntaxe">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var> + <var>y</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="numeric_addition">Addition numérique</h3> - -<pre class="brush: js"> -// Number + Number -> addition -1 + 2 // 3 - -// Boolean + Number -> addition -true + 1 // 2 - -// Boolean + Boolean -> addition -false + false // 0 -</pre> - -<h3 id="string_concatenation">Concaténation de chaînes de caractères</h3> - -<pre class="brush: js">// String + String -> concatenation -'toto' + 'truc' // "tototruc" - -// Number + String -> concatenation -5 + 'toto' // "5toto" - -// String + Boolean -> concatenation -'toto' + false // "totofalse"</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/addition/index.md b/files/fr/web/javascript/reference/operators/addition/index.md new file mode 100644 index 0000000000..68cdc61723 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition/index.md @@ -0,0 +1,70 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition +original_slug: Web/JavaScript/Reference/Opérateurs/Addition +browser-compat: javascript.operators.addition +--- +{{jsSidebar("Operators")}} + +L'opérateur d'addition (`+`) produit la somme de deux opérandes numériques ou la concaténation de deux chaînes de caractères. + +{{EmbedInteractiveExample("pages/js/expressions-addition.html")}} + +## Syntaxe + +```js +Opérateur : x + y +``` + +## Exemples + +### Addition numérique + +```js +// Number + Number -> addition +1 + 2 // 3 + +// Boolean + Number -> addition +true + 1 // 2 + +// Boolean + Boolean -> addition +false + false // 0 +``` + +### Concaténation de chaînes de caractères + +```js +// String + String -> concatenation +'toto' + 'truc' // "tototruc" + +// Number + String -> concatenation +5 + 'toto' // "5toto" + +// String + Boolean -> concatenation +'toto' + false // "totofalse" +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html deleted file mode 100644 index c0a2136c3d..0000000000 --- a/files/fr/web/javascript/reference/operators/addition_assignment/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Affectation après addition (+=) -slug: Web/JavaScript/Reference/Operators/Addition_assignment -tags: -- Assignment operator -- JavaScript -- Language feature -- Operator -- Reference -translation-of: Web/JavaScript/Reference/Operators/Addition_assignment -browser-compat: javascript.operators.addition_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'addition et d'affectation (<code>+=</code>) calcule la somme ou la concaténation de ses deux opérandes puis affecte le résultat à la variable représentée par l'opérande gauche. C'est le type des opérandes qui détermine s'il y a somme ou concaténation.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> - -<h2 id="syntax">Syntax</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x += y -<strong>Signification :</strong> x = x + y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_addition_assignment">Utiliser l'opérateur d'addition et d'affectation</h3> - -<pre class="brush: js"> -let toto = "toto"; -let truc = 5; -let machin = true; - -// nombre + nombre -> addition -truc += 2; // 7 - -// booléen + nombre -> addition -machin += 1; // 2 - -// booléen + booléen -> addition -machin += false; // 1 - -// nombre + chaîne de caractères -> concaténation -truc += 'toto'; // "5toto" - -// chaîne de caractères + booléen -> concaténation -toto += false // "totofalse" - -// chaîne de caractères + chaîne de caractères -> concaténation -toto += 'truc' // "tototruc"</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">L'opérateur d'addition/concaténation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.md b/files/fr/web/javascript/reference/operators/addition_assignment/index.md new file mode 100644 index 0000000000..6c18bdb866 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.md @@ -0,0 +1,64 @@ +--- +title: Affectation après addition (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.addition_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'addition et d'affectation (`+=`) calcule la somme ou la concaténation de ses deux opérandes puis affecte le résultat à la variable représentée par l'opérande gauche. C'est le type des opérandes qui détermine s'il y a somme ou concaténation. + +{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}} + +## Syntax + +```js +Opérateur : x += y +Signification : x = x + y +``` + +## Exemples + +### Utiliser l'opérateur d'addition et d'affectation + +```js +let toto = "toto"; +let truc = 5; +let machin = true; + +// nombre + nombre -> addition +truc += 2; // 7 + +// booléen + nombre -> addition +machin += 1; // 2 + +// booléen + booléen -> addition +machin += false; // 1 + +// nombre + chaîne de caractères -> concaténation +truc += 'toto'; // "5toto" + +// chaîne de caractères + booléen -> concaténation +toto += false // "totofalse" + +// chaîne de caractères + chaîne de caractères -> concaténation +toto += 'truc' // "tototruc" +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur d'addition/concaténation](/fr/docs/Web/JavaScript/Reference/Operators/Addition) diff --git a/files/fr/web/javascript/reference/operators/assignment/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html deleted file mode 100644 index afd2cae36d..0000000000 --- a/files/fr/web/javascript/reference/operators/assignment/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Assignement (=) -slug: Web/JavaScript/Reference/Operators/Assignment -tags: - - Fonctionnalités du language - - JavaScript - - Opérateur - - Opérateur d'assignement - - Reference -translation_of: Web/JavaScript/Reference/Operators/Assignment -original_slug: Web/JavaScript/Reference/Opérateurs/Assignement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'assignement simple (<code>=</code>) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><strong>Opérateur :</strong> x = y -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Assignement_simple_et_variables_en_chaînes">Assignement simple et variables en chaînes</h3> - -<pre class="brush: js notranslate">// On considère les variables suivantes : -var x = 5; -var y = 10; -var z = 25; - -x = y; -// x est égale à 10 - -x = y = z; -// x, y et z sont égales à 25</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Assignment operators in the JS guide</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/assignment/index.md b/files/fr/web/javascript/reference/operators/assignment/index.md new file mode 100644 index 0000000000..b793a0aafb --- /dev/null +++ b/files/fr/web/javascript/reference/operators/assignment/index.md @@ -0,0 +1,52 @@ +--- +title: Assignement (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - Fonctionnalités du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Assignment +original_slug: Web/JavaScript/Reference/Opérateurs/Assignement +--- +{{jsSidebar("Operators")}} + +L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables. + +{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}} + +## Syntaxe + + Opérateur : x = y + +## Exemples + +### Assignement simple et variables en chaînes + +```js +// On considère les variables suivantes : +var x = 5; +var y = 10; +var z = 25; + +x = y; +// x est égale à 10 + +x = y = z; +// x, y et z sont égales à 25 +``` + +## Specifications + +| Specification | +| ---------------------------------------------------------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}} | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.assignment")}} + +## Voir aussi + +- [Assignment operators in the JS guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs) diff --git a/files/fr/web/javascript/reference/operators/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html deleted file mode 100644 index 2f5f493295..0000000000 --- a/files/fr/web/javascript/reference/operators/async_function/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Expression async function -slug: Web/JavaScript/Reference/Operators/async_function -tags: - - Function - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/async_function -original_slug: Web/JavaScript/Reference/Opérateurs/async_function ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Le mot-clé <strong><code>async function</code></strong> peut être utilisé pour définir une fonction asynchrone au sein d'une expression.</p> - -<div class="note"> -<p><strong>Note :</strong> Il est aussi possible de définir une fonction asynchrone en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">instruction <code>async function</code></a>.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { - <em>instructions</em> -}</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>name</code></dt> - <dd>Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est <em>anonyme</em>. Le nom utilisé est uniquement local pour le corps de la fonction.</dd> - <dt><code>paramN</code></dt> - <dd>Le nom d'un argument à passer à la fonction.</dd> - <dt><code>instructions</code></dt> - <dd>Les instructions qui composent le corps de la fonction.</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> À partir d'ES2015 (ES6), il est aussi possible d'utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour les expressions de fonction asynchrone.</p> -</div> - -<h2 id="Description">Description</h2> - -<p>Une expression <code>async function</code> est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async <code>function</code> et une instruction async <code>function</code> est qu'on peut omettre le nom de la fonction dans les expressions <code>async function</code>. On peut donc utiliser une expression <code>async function</code> afin de créer une <em>IIFE</em> (pour <em>Immediately Invoked Function Expression</em>) qu'on appelle au moment de sa définition. Voir également le chapitre sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions</a> pour plus d'informations.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_simple">Exemple simple</h3> - -<pre class="brush: js">function resolveAfter2Seconds(x) { - return new Promise(resolve => { - setTimeout(() => { - resolve(x); - }, 2000); - }); -}; - -(async function(x) { // fonction asynchrone immédiatement appelée - var a = resolveAfter2Seconds(20); - var b = resolveAfter2Seconds(30); - return x + await a + await b; -})(10).then(v => { - console.log(v); // affiche 60 après 2 secondes. -}); - -var add = async function(x) { - var a = await resolveAfter2Seconds(20); - var b = await resolveAfter2Seconds(30); - return x + a + b; -}; - -add(10).then(v => { - console.log(v); // affiche 60 après 4 secondes. -}); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ES2018')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.async_function_expression")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/async_function", "async function")}}</li> - <li>L'objet {{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Opérateurs/await", "await")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/async_function/index.md b/files/fr/web/javascript/reference/operators/async_function/index.md new file mode 100644 index 0000000000..38334b17ee --- /dev/null +++ b/files/fr/web/javascript/reference/operators/async_function/index.md @@ -0,0 +1,87 @@ +--- +title: Expression async function +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - Function + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/async_function +original_slug: Web/JavaScript/Reference/Opérateurs/async_function +--- +{{jsSidebar("Operators")}} + +Le mot-clé **`async function`** peut être utilisé pour définir une fonction asynchrone au sein d'une expression. + +> **Note :** Il est aussi possible de définir une fonction asynchrone en utilisant une [instruction `async function`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function). + +## Syntaxe + + async function [name]([param1[, param2[, ..., paramN]]]) { + instructions + } + +### Paramètres + +- `name` + - : Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est _anonyme_. Le nom utilisé est uniquement local pour le corps de la fonction. +- `paramN` + - : Le nom d'un argument à passer à la fonction. +- `instructions` + - : Les instructions qui composent le corps de la fonction. + +> **Note :** À partir d'ES2015 (ES6), il est aussi possible d'utiliser des [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) pour les expressions de fonction asynchrone. + +## Description + +Une expression `async function` est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async `function` et une instruction async `function` est qu'on peut omettre le nom de la fonction dans les expressions `async function`. On peut donc utiliser une expression `async function` afin de créer une _IIFE_ (pour _Immediately Invoked Function Expression_) qu'on appelle au moment de sa définition. Voir également le chapitre sur [les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour plus d'informations. + +## Exemples + +### Exemple simple + +```js +function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + +(async function(x) { // fonction asynchrone immédiatement appelée + var a = resolveAfter2Seconds(20); + var b = resolveAfter2Seconds(30); + return x + await a + await b; +})(10).then(v => { + console.log(v); // affiche 60 après 2 secondes. +}); + +var add = async function(x) { + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // affiche 60 après 4 secondes. +}); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}} | | +| {{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2017')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.async_function_expression")}} + +## Voir aussi + +- {{jsxref("Instructions/async_function", "async function")}} +- L'objet {{jsxref("AsyncFunction")}} +- {{jsxref("Opérateurs/await", "await")}} diff --git a/files/fr/web/javascript/reference/operators/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html deleted file mode 100644 index de103593fa..0000000000 --- a/files/fr/web/javascript/reference/operators/await/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: await -slug: Web/JavaScript/Reference/Operators/await -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/await -original_slug: Web/JavaScript/Reference/Opérateurs/await ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur <strong><code>await</code></strong> permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.</dd> - <dt><code>rv</code></dt> - <dd> - <p>La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.</p> - </dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'expression <code>await</code> interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.</p> - -<p>Si la promesse est rompue, l'expression <code>await</code> lève une exception avec la raison.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Si on passe une promesse à une expression <code>await</code>, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.</p> - -<pre class="brush: js">function resolveAfter2Seconds(x) { - return new Promise(resolve => { - setTimeout(() => { - resolve(x); - }, 2000); - }); -} - -async function f1() { - var x = await resolveAfter2Seconds(10); - console.log(x); // 10 -} -f1(); -</pre> - -<p>Les objets dotés d'une méthode <code>then()</code> (<em>thenable</em> en anglais) seront également résolus :</p> - -<pre class="brush: js">async function f0() { - const thenable = { - then: function(resolve, _reject) { - resolve("résolu :)"); - } - }; - console.log(await thenable); // résolu :) -} -f0();</pre> - -<p>Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :</p> - -<pre class="brush: js">async function f2() { - var y = await 20; - console.log(y); // 20 -} -f2();</pre> - -<p>Si la promesse est rejetée, la raison est fournie avec l'exception.</p> - -<pre class="brush: js">async function f3() { - try { - var z = await Promise.reject(30); - } catch (e) { - console.log(e); // 30 - } -} -f3();</pre> - -<p>On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :</p> - -<pre class="brush: js">var response = await maFonctionPromesse().catch( - (err) => { - console.log(err); - } -);</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td> - <td>{{Spec2("ESDraft")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td> - <td>{{Spec2('ES2018')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td> - <td>{{Spec2('ES2017')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.await")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'instruction {{jsxref("Instructions/async_function", "async function")}}</li> - <li>L'expression {{jsxref("Opérateurs/async_function", "async function")}}</li> - <li>L'objet {{jsxref("AsyncFunction")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/await/index.md b/files/fr/web/javascript/reference/operators/await/index.md new file mode 100644 index 0000000000..5b30dcfeba --- /dev/null +++ b/files/fr/web/javascript/reference/operators/await/index.md @@ -0,0 +1,113 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/await +original_slug: Web/JavaScript/Reference/Opérateurs/await +--- +{{jsSidebar("Operators")}} + +L'opérateur **`await`** permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}). + +## Syntaxe + + [rv] = await expression; + +- `expression` + - : Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution. +- `rv` + - : La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse. + +## Description + +L'expression `await` interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur. + +Si la promesse est rompue, l'expression `await` lève une exception avec la raison. + +## Exemples + +Si on passe une promesse à une expression `await`, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution. + +```js +function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +``` + +Les objets dotés d'une méthode `then()` (_thenable_ en anglais) seront également résolus : + +```js +async function f0() { + const thenable = { + then: function(resolve, _reject) { + resolve("résolu :)"); + } + }; + console.log(await thenable); // résolu :) +} +f0(); +``` + +Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue : + +```js +async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2(); +``` + +Si la promesse est rejetée, la raison est fournie avec l'exception. + +```js +async function f3() { + try { + var z = await Promise.reject(30); + } catch (e) { + console.log(e); // 30 + } +} +f3(); +``` + +On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} : + +```js +var response = await maFonctionPromesse().catch( + (err) => { + console.log(err); + } +); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}} | {{Spec2("ESDraft")}} | | +| {{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}} | {{Spec2('ES2018')}} | | +| {{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}} | {{Spec2('ES2017')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.await")}} + +## Voir aussi + +- L'instruction {{jsxref("Instructions/async_function", "async function")}} +- L'expression {{jsxref("Opérateurs/async_function", "async function")}} +- L'objet {{jsxref("AsyncFunction")}} diff --git a/files/fr/web/javascript/reference/operators/bitwise_and/index.html b/files/fr/web/javascript/reference/operators/bitwise_and/index.html deleted file mode 100644 index b1a3ca024b..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_and/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: ET binaire (&) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_and -translation-of: Web/JavaScript/Reference/Operators/Bitwise_AND ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur ET binaire (<code>&</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où les bits des deux opérandes valent <code>1</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> & <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p> - -<pre class="brush: js"> -Avant: 11100110111110100000000000000110000000000001 -Après: 10100000000000000110000000000001 -</pre> - -<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsque les deux valent 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p> - -<p>La table de vérité pour l'opérateur ET est :</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a ET b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> - 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Utiliser un ET binaire sur n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> d'autre part renverra <code>0</code>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_and">Utiliser l'opérateur ET binaire</h3> - -<pre class="brush: js"> -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -5 & 2; // 0 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_and/index.md b/files/fr/web/javascript/reference/operators/bitwise_and/index.md new file mode 100644 index 0000000000..9bfc4a4d4d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_and/index.md @@ -0,0 +1,74 @@ +--- +title: ET binaire (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_and +--- +{{jsSidebar("Operators")}} + +L'opérateur ET binaire (`&`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où les bits des deux opérandes valent `1`. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}} + +## Syntaxe + +```js +a & b +``` + +## Description + +Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits : + +```js +Avant: 11100110111110100000000000000110000000000001 +Après: 10100000000000000110000000000001 +``` + +Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsque les deux valent 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement. + +La table de vérité pour l'opérateur ET est : + +| a | b | a ET b | +| --- | --- | ------ | +| 0 | 0 | 0 | +| 0 | 1 | 0 | +| 1 | 0 | 0 | +| 1 | 1 | 1 | + +```js + 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +``` + +Utiliser un ET binaire sur n'importe quel nombre `x` d'une part et `0` d'autre part renverra `0`. + +## Exemples + +### Utiliser l'opérateur ET binaire + +```js +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +5 & 2; // 0 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) diff --git a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html deleted file mode 100644 index 3300032225..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Affectation après ET binaire (&=) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_and_assignment -translation-of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après ET binaire (<code>&=</code>) utilise la représentation binaire des deux opérandes, applique un ET logique entre chaque puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x &= y -<strong>Signification :</strong> x = x & y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_and_assignment">Utiliser l'affectation après ET binaire</h3> - -<pre class="brush: js"> -let a = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -a &= 2; // 0 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">L'opérateur ET binaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md new file mode 100644 index 0000000000..cf970acb34 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md @@ -0,0 +1,47 @@ +--- +title: Affectation après ET binaire (&=) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_and_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après ET binaire (`&=`) utilise la représentation binaire des deux opérandes, applique un ET logique entre chaque puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x &= y +Signification : x = x & y +``` + +## Exemples + +### Utiliser l'affectation après ET binaire + +```js +let a = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +a &= 2; // 0 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur ET binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) diff --git a/files/fr/web/javascript/reference/operators/bitwise_not/index.html b/files/fr/web/javascript/reference/operators/bitwise_not/index.html deleted file mode 100644 index f3e1856a90..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_not/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: NON binaire (~) -slug: Web/JavaScript/Reference/Operators/Bitwise_NOT -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_not -translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur binaire NON (<code>~</code>) prend l'opposé de chaque bit de son opérande et fournit la valeur ainsi obtenue. À l'instar des autres opérateurs binaires, il convertit son opérande en un entier signé sur 32 bits.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div> - -<h2 id="syntaxe">Syntaxe</h2> - -<pre class="brush: js"> -~a -</pre> - -<h2 id="description">Description</h2> - -<p>L'opérande est converti en un entier signé sur 32 bits. Les nombres avec plus de 32 bits voient leurs bits les plus significatifs être tronqués. Voici un exemple où l'entier qui suit est supérieur à une valeur pouvant être exprimée sur 32 bits : la conversion écrête la valeur pour obtenir un entier signé sur 32 bits :</p> - -<pre class="brush: js"> -Avant : 11100110111110100000000000000110000000000001 -Après : 10100000000000000110000000000001 -</pre> - -<p>Pour former le résultat, chaque bit qui compose l'opérande est inversé.</p> - -<p>La table de vérité pour l'opération <code>NON</code> est :</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">NON a</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> - 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>L'entier signé sur 32 bits est inversé selon <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">le complément à deux</a>. Autrement dit, la présence du bit le plus significatif est utilisée pour exprimer des entiers négatifs.</p> - -<p>Appliquer un NON binaire sur n'importe quel nombre <code>x</code> fournira la valeur <code>-(x + 1)</code>. Ainsi, <code>~-5</code> renverra <code>4</code>.</p> - -<p>Étant donné l'utilisation d'une représentation sur 32 bits, <code>~-1</code> et <code>~4294967295</code> (2^32 - 1) donneront tous les deux <code>0</code>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="Using_bitwise_NOT">Utiliser le NON binaire</h3> - -<pre class="brush: js">~0; // -1 -~-1; // 0 -~1; // -2 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_not/index.md b/files/fr/web/javascript/reference/operators/bitwise_not/index.md new file mode 100644 index 0000000000..e8e5f673a7 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_not/index.md @@ -0,0 +1,75 @@ +--- +title: NON binaire (~) +slug: Web/JavaScript/Reference/Operators/Bitwise_NOT +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT +browser-compat: javascript.operators.bitwise_not +--- +{{jsSidebar("Operators")}} + +L'opérateur binaire NON (`~`) prend l'opposé de chaque bit de son opérande et fournit la valeur ainsi obtenue. À l'instar des autres opérateurs binaires, il convertit son opérande en un entier signé sur 32 bits. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}} + +## Syntaxe + +```js +~a +``` + +## Description + +L'opérande est converti en un entier signé sur 32 bits. Les nombres avec plus de 32 bits voient leurs bits les plus significatifs être tronqués. Voici un exemple où l'entier qui suit est supérieur à une valeur pouvant être exprimée sur 32 bits : la conversion écrête la valeur pour obtenir un entier signé sur 32 bits : + +```js +Avant : 11100110111110100000000000000110000000000001 +Après : 10100000000000000110000000000001 +``` + +Pour former le résultat, chaque bit qui compose l'opérande est inversé. + +La table de vérité pour l'opération `NON` est : + +| a | NON a | +| --- | ----- | +| 0 | 1 | +| 1 | 0 | + +```js + 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +``` + +L'entier signé sur 32 bits est inversé selon [le complément à deux](https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux). Autrement dit, la présence du bit le plus significatif est utilisée pour exprimer des entiers négatifs. + +Appliquer un NON binaire sur n'importe quel nombre `x` fournira la valeur `-(x + 1)`. Ainsi, `~-5` renverra `4`. + +Étant donné l'utilisation d'une représentation sur 32 bits, `~-1` et `~4294967295` (2^32 - 1) donneront tous les deux `0`. + +## Exemples + +### Utiliser le NON binaire + +```js +~0; // -1 +~-1; // 0 +~1; // -2 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) diff --git a/files/fr/web/javascript/reference/operators/bitwise_or/index.html b/files/fr/web/javascript/reference/operators/bitwise_or/index.html deleted file mode 100644 index 72d4ed3043..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_or/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: OU binaire (|) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_or -translation-of: Web/JavaScript/Reference/Operators/Bitwise_OR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur OU binaire (<code>|</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où au moins un des bits des deux opérandes vaut <code>1</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> | <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p> - -<pre class="brush: js"> -Avant: 11100110111110100000000000000110000000000001 -Après: 10100000000000000110000000000001 -</pre> - -<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'au moins un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p> - -<p>La table de vérité pour l'opérateur OU est :</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a OU b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> - 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Utiliser le OU binaire avec n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> renverra toujours <code><var>x</var></code>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_or">Utiliser l'opérateur OU binaire</h3> - -<pre class="brush: js"> -// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 | 9; -// 15 (00000000000000000000000000001111) -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_or/index.md b/files/fr/web/javascript/reference/operators/bitwise_or/index.md new file mode 100644 index 0000000000..4565551bfb --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_or/index.md @@ -0,0 +1,76 @@ +--- +title: OU binaire (|) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_or +--- +{{jsSidebar("Operators")}} + +L'opérateur OU binaire (`|`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où au moins un des bits des deux opérandes vaut `1`. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}} + +## Syntaxe + +```js +a | b +``` + +## Description + +Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits : + +```js +Avant: 11100110111110100000000000000110000000000001 +Après: 10100000000000000110000000000001 +``` + +Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'au moins un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement. + +La table de vérité pour l'opérateur OU est : + +| a | b | a OU b | +| --- | --- | ------ | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 1 | + +```js + 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +``` + +Utiliser le OU binaire avec n'importe quel nombre `x` d'une part et `0` renverra toujours `x`. + +## Exemples + +### Utiliser l'opérateur OU binaire + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 | 9; +// 15 (00000000000000000000000000001111) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) diff --git a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html deleted file mode 100644 index 5c03784a45..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Affectation après OU binaire (|=) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_or_assignment -translation-of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après OU binaire (<code>|=</code>) utilise la représentation binaire des deux opérandes et effectue un OU logique entre chaque puis affecte le résultat à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x |= y -<strong>Signification :</strong> x = x | y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_or_assignment">Utiliser l'affectation après OU binaire</h3> - -<pre class="brush: js"> -let a = 5; -a |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">L'opérateur OU binaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">L'opérateur d'affectation après OU logique (<code>||=</code>)</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md new file mode 100644 index 0000000000..0f81ba1e32 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md @@ -0,0 +1,50 @@ +--- +title: Affectation après OU binaire (|=) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_or_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après OU binaire (`|=`) utilise la représentation binaire des deux opérandes et effectue un OU logique entre chaque puis affecte le résultat à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x |= y +Signification : x = x | y +``` + +## Exemples + +### Utiliser l'affectation après OU binaire + +```js +let a = 5; +a |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) +- [L'opérateur d'affectation après OU logique (`||=`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor/index.html b/files/fr/web/javascript/reference/operators/bitwise_xor/index.html deleted file mode 100644 index eff1d79f8f..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_xor/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: OU exclusif binaire (^) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_xor -translation-of: Web/JavaScript/Reference/Operators/Bitwise_XOR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur binaire OU exclusif (XOR) (<code>^</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où exactement un des bits des deux opérandes vaut <code>1</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> ^ <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p> - -<pre class="brush: js"> -Avant: 11100110111110100000000000000110000000000001 -Après: 10100000000000000110000000000001 -</pre> - -<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'exactement un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p> - -<p>La table de vérité pour l'opérateur OU exclusif (XOR) est :</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a XOR b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> -. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Utiliser le OU exclusif binaire avec n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> d'autre part renverra <code><var>x</var></code>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_xor">Utiliser le OU exclusif binaire</h3> - -<pre class="brush: js"> -// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 ^ 9; -// 7 (00000000000000000000000000000111) -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide javascript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor/index.md b/files/fr/web/javascript/reference/operators/bitwise_xor/index.md new file mode 100644 index 0000000000..80a928c2f6 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_xor/index.md @@ -0,0 +1,76 @@ +--- +title: OU exclusif binaire (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_xor +--- +{{jsSidebar("Operators")}} + +L'opérateur binaire OU exclusif (XOR) (`^`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où exactement un des bits des deux opérandes vaut `1`. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}} + +## Syntaxe + +```js +a ^ b +``` + +## Description + +Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits : + +```js +Avant: 11100110111110100000000000000110000000000001 +Après: 10100000000000000110000000000001 +``` + +Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'exactement un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement. + +La table de vérité pour l'opérateur OU exclusif (XOR) est : + +| a | b | a XOR b | +| --- | --- | ------- | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 0 | + +```js +. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +``` + +Utiliser le OU exclusif binaire avec n'importe quel nombre `x` d'une part et `0` d'autre part renverra `x`. + +## Exemples + +### Utiliser le OU exclusif binaire + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 ^ 9; +// 7 (00000000000000000000000000000111) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide javascript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html deleted file mode 100644 index 15074eaf64..0000000000 --- a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Affectation après OU exclusif binaire (^=) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.bitwise_xor_assignment -translation-of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après OU exclusif (XOR) binaire (<code>^=</code>) utilise la représentation binaire des deux opérandes, effectue un OU exclusif entre chaque puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x ^= y -<strong>Signification :</strong> x = x ^ y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_bitwise_xor_assignment">Utiliser l'affectation après OU exclusif binaire</h3> - -<pre class="brush: js"> -let a = 5; // 00000000000000000000000000000101 -a ^= 3; // 00000000000000000000000000000011 - -console.log(a); // 00000000000000000000000000000110 -// 6 - -let b = 5; // 00000000000000000000000000000101 -b ^= 0; // 00000000000000000000000000000000 - -console.log(b); // 00000000000000000000000000000101 -// 5 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">L'opérateur OU exclusif binaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md new file mode 100644 index 0000000000..5cc27d9ec3 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md @@ -0,0 +1,54 @@ +--- +title: Affectation après OU exclusif binaire (^=) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.bitwise_xor_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après OU exclusif (XOR) binaire (`^=`) utilise la représentation binaire des deux opérandes, effectue un OU exclusif entre chaque puis affecte le résultat obtenu à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x ^= y +Signification : x = x ^ y +``` + +## Exemples + +### Utiliser l'affectation après OU exclusif binaire + +```js +let a = 5; // 00000000000000000000000000000101 +a ^= 3; // 00000000000000000000000000000011 + +console.log(a); // 00000000000000000000000000000110 +// 6 + +let b = 5; // 00000000000000000000000000000101 +b ^= 0; // 00000000000000000000000000000000 + +console.log(b); // 00000000000000000000000000000101 +// 5 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur OU exclusif binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR) diff --git a/files/fr/web/javascript/reference/operators/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html deleted file mode 100644 index 0b9f789d4c..0000000000 --- a/files/fr/web/javascript/reference/operators/class/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: class -slug: Web/JavaScript/Reference/Operators/class -tags: - - ECMAScript 2015 - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/class -original_slug: Web/JavaScript/Reference/Opérateurs/class ---- -<div>{{JSSidebar("Operators")}}</div> - -<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] { - // corps de la classe -};</pre> - -<h2 id="Description">Description</h2> - -<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p> - -<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Une_expression_simple">Une expression simple</h3> - -<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p> - -<pre class="brush: js">var Toto = class { - constructor() {} - truc() { - return "Coucou monde !"; - } -}; - -var instance = new Toto(); -instance.truc(); // "Coucou monde !" -Toto.name; // "Toto" -</pre> - -<h3 id="Des_expressions_nommées">Des expressions nommées</h3> - -<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p> - -<pre class="brush: js">// TBD -var Toto = class TotoNommé { - constructor() {} - quiEstLa() { - return TotoNommé.name; - } -} - -var truc = new Toto; -truc.quiEstLa(); // "TotoNommmé" -TotoNommé.name; // ReferenceError -Toto.name; // "TotoNommé" -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.class")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les déclaration <code>class</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/class/index.md b/files/fr/web/javascript/reference/operators/class/index.md new file mode 100644 index 0000000000..bb3c259708 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/class/index.md @@ -0,0 +1,85 @@ +--- +title: class +slug: Web/JavaScript/Reference/Operators/class +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +original_slug: Web/JavaScript/Reference/Opérateurs/class +--- +{{JSSidebar("Operators")}} + +Une **expression de classe** est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux [expressions de fonctions](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function), les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes. + +{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}} + +## Syntaxe + + var MaClasse = class [nomClasse] [extends] { + // corps de la classe + }; + +## Description + +Une expression de classe utilise une syntaxe similaire à celle d'une [instruction de classe](/fr/docs/Web/JavaScript/Reference/Instructions/class). En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours `"function"`. + +Le corps d'une classe sera exécuté en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (pour les instructions et les expressions de classe). + +## Exemples + +### Une expression simple + +Ici, on utilise une expression de classe anonyme qu'on lie à la variable `Toto`. + +```js +var Toto = class { + constructor() {} + truc() { + return "Coucou monde !"; + } +}; + +var instance = new Toto(); +instance.truc(); // "Coucou monde !" +Toto.name; // "Toto" +``` + +### Des expressions nommées + +Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe. + +```js +// TBD +var Toto = class TotoNommé { + constructor() {} + quiEstLa() { + return TotoNommé.name; + } +} + +var truc = new Toto; +truc.quiEstLa(); // "TotoNommmé" +TotoNommé.name; // ReferenceError +Toto.name; // "TotoNommé" +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{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', 'Class definitions')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.class")}} + +## Voir aussi + +- [Les expressions `function`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function) +- [Les déclaration `class`](/fr/docs/Web/JavaScript/Reference/Instructions/class) +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html deleted file mode 100644 index e4c4d3d969..0000000000 --- a/files/fr/web/javascript/reference/operators/comma_operator/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: L'opérateur virgule -slug: Web/JavaScript/Reference/Operators/Comma_Operator -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur<strong> virgule</strong> permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> - <dd>Des expressions JavaScript.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.</p> - -<p>L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>SI on a un tableau à 2 dimensions appelé <code>monTableau</code>, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (<code>i</code> et <code>j</code>) à la fois. Attention, la virgule utilisée au sein de l'instruction <code>var</code> <strong>n'est pas</strong> l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :</p> - -<pre class="brush:js">for (var i = 0, j = 9; i <= 9; i++, j--){ - console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]); -}</pre> - -<p>Dans le code suivant, <code>a</code> est défini avec la valeur de <code>b = 3</code> (qui est 3) et l'expression <code>c = 4</code> est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.</p> - -<pre class="brush: js">var a, b, c; -a = b = 3, c = 4; // Renvoie 4 dans la console -console.log(a); // 3</pre> - -<p>Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :</p> - -<pre class="brush: js">var x, y, z; -x = (y = 5, z = 6); // Renvoie 6 dans la console -console.log(x); // 6</pre> - -<h3 id="Effectuer_un_traitement_puis_renvoyer_une_valeur">Effectuer un traitement puis renvoyer une valeur</h3> - -<p>Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :</p> - -<pre class="brush: js">function maFonction () { - var x = 0; - - return (x += 1, x); // ce qui revient à renvoyer ++x -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.comma")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les boucles {{jsxref("Instructions/for","for")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.md b/files/fr/web/javascript/reference/operators/comma_operator/index.md new file mode 100644 index 0000000000..e227672b69 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.md @@ -0,0 +1,85 @@ +--- +title: L'opérateur virgule +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule +--- +{{jsSidebar("Operators")}} + +L'opérateur **virgule** permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande. + +{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}} + +## Syntaxe + + expr1, expr2, expr3... + +### Paramètres + +- `expr1`, `expr2, expr3...` + - : Des expressions JavaScript. + +## Description + +L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres. + +L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction. + +## Exemples + +SI on a un tableau à 2 dimensions appelé `monTableau`, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (`i` et `j`) à la fois. Attention, la virgule utilisée au sein de l'instruction `var` **n'est pas** l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice : + +```js +for (var i = 0, j = 9; i <= 9; i++, j--){ + console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]); +} +``` + +Dans le code suivant, `a` est défini avec la valeur de `b = 3` (qui est 3) et l'expression `c = 4` est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs. + +```js +var a, b, c; +a = b = 3, c = 4; // Renvoie 4 dans la console +console.log(a); // 3 +``` + +Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses : + +```js +var x, y, z; +x = (y = 5, z = 6); // Renvoie 6 dans la console +console.log(x); // 6 +``` + +### Effectuer un traitement puis renvoyer une valeur + +Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir : + +```js +function maFonction () { + var x = 0; + + return (x += 1, x); // ce qui revient à renvoyer ++x +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.comma")}} + +## Voir aussi + +- Les boucles {{jsxref("Instructions/for","for")}} diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html deleted file mode 100644 index 3df094db59..0000000000 --- a/files/fr/web/javascript/reference/operators/conditional_operator/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: L'opérateur conditionnel -slug: Web/JavaScript/Reference/Operators/Conditional_Operator -tags: - - JavaScript - - Opérateur -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>condition</code></dt> - <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd> - <dt><code>exprSiVrai</code></dt> - <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd> - <dt><code>exprSiFaux</code></dt> - <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p> - -<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €") -</pre> - -<p>On peut également affecter des variables dont la valeur dépendra du test :</p> - -<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> - -<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p> - -<pre class="brush: js">var premierControle = false, - secondControle = false, - acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé"; - -console.log(acces); // "Accès autorisé"</pre> - -<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p> - -<pre class="brush: js">var stop = false, age = 16; - -age > 18 ? location.assign("continue.html") : stop = true; -</pre> - -<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p> - -<pre class="brush: js">var stop = false, age = 23; - -age > 18 ? ( - console.log("OK, accès autorisé."), - location.assign("continue.html") -) : ( - stop = true, - console.log("Accès refusé !") -); -</pre> - -<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p> - -<pre class="brush: js">var age = 16; - -var url = age > 18 ? ( - console.log("Accès autorisé."), - // console.log renvoie "undefined", mais cela importe peu car - // ce n'est pas le dernier élément de l'expression - "continue.html" // la valeur à affecter si âge > 18 -) : ( - console.log("Accès refusé !"), - // etc. - "stop.html" // la valeur à affecter si âge <= 18 -); - -location.assign(url); // "stop.html"</pre> - -<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3> - -<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p> - -<pre class="brush: js">var func1 = function( .. ) { - if (condition1) { return valeur1 } - else if (condition2) { return valeur2 } - else if (condition3) { return valeur3 } - else { return value4 } -} - -var func2 = function( .. ) { - return condition1 ? valeur1 - : condition2 ? valeur2 - : condition3 ? valeur3 - : valeur4 -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale, implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.conditional")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.md b/files/fr/web/javascript/reference/operators/conditional_operator/index.md new file mode 100644 index 0000000000..d48dfca9fd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.md @@ -0,0 +1,130 @@ +--- +title: L'opérateur conditionnel +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel +--- +{{jsSidebar("Operators")}} + +L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}. + +{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}} + +## Syntaxe + + condition ? exprSiVrai : exprSiFaux + +### Paramètres + +- `condition` + - : Une expression qui est évaluée en un booléen (`true` ou `false`). +- `exprSiVrai` + - : Une expression qui est évaluée si la condition est équivalente à `true` (_truthy_) +- `exprSiFaux` + - : Une expression qui est évaluée si la condition est équivalente à `false` (_falsy_). + +## Description + +SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration : + +```js +"Le prix est : " + (estMembre ? "15 €" : "30 €") +``` + +On peut également affecter des variables dont la valeur dépendra du test : + +```js +var elvisLives = Math.PI > 4 ? "Yep" : "Nope"; +``` + +On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) : + +```js +var premierControle = false, + secondControle = false, + acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé"; + +console.log(acces); // "Accès autorisé" +``` + +Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente : + +```js +var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +``` + +en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié). + +```js +var stop = false, age = 23; + +age > 18 ? ( + console.log("OK, accès autorisé."), + location.assign("continue.html") +) : ( + stop = true, + console.log("Accès refusé !") +); +``` + +De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera **_la dernière valeur qui sera affectée_**. Ici aussi, attention à la lisibilité du code relativement à un `if...else`. + +```js +var age = 16; + +var url = age > 18 ? ( + console.log("Accès autorisé."), + // console.log renvoie "undefined", mais cela importe peu car + // ce n'est pas le dernier élément de l'expression + "continue.html" // la valeur à affecter si âge > 18 +) : ( + console.log("Accès refusé !"), + // etc. + "stop.html" // la valeur à affecter si âge <= 18 +); + +location.assign(url); // "stop.html" +``` + +### Utiliser l'opérateur ternaire dans la valeur de retour + +On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec `if...else` où `return` est la seule instruction utilisée : + +```js +var func1 = function( .. ) { + if (condition1) { return valeur1 } + else if (condition2) { return valeur2 } + else if (condition3) { return valeur3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? valeur1 + : condition2 ? valeur2 + : condition3 ? valeur3 + : valeur4 +} +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES1', '#sec-11.12', 'The conditional operator')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.conditional")}} + +## Voir aussi + +- L'instruction {{jsxref("Instructions/if...else","if...else")}} +- [Le chaînage optionnel](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining) diff --git a/files/fr/web/javascript/reference/operators/decrement/index.html b/files/fr/web/javascript/reference/operators/decrement/index.html deleted file mode 100644 index 291f46393f..0000000000 --- a/files/fr/web/javascript/reference/operators/decrement/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Décrémentation (--) -slug: Web/JavaScript/Reference/Operators/Decrement -tags: - - Decrement - - JavaScript - - Language feature - - Operator -browser-compat: javascript.operators.decrement -translation_of: Web/JavaScript/Reference/Operators/Decrement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de décrémentation (<code>--</code>) permet de décrémenter (c'est-à-dire de soustraire un) son opérande et renvoie une valeur qui est le résultat avant ou après la modification.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var>-- ou --<var>x</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans <code><var>x</var>--</code>, l'opérateur décrémentera la valeur et renverra la valeur avant l'incrément.</p> - -<p>Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans <code>--<var>x</var></code>, l'opérateur décrémentera la valeur et renverra la valeur après l'incrément.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="postfix_decrement">Décrément en suffixe</h3> - -<pre class="brush: js">let x = 3; -let y = x--; - -// y = 3 -// x = 2 -</pre> - -<h3 id="prefix_decrement">Décrément en préfixe</h3> - -<pre class="brush: js">let a = 2; -let b = --a; - -// a = 1 -// b = 1 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur de plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/decrement/index.md b/files/fr/web/javascript/reference/operators/decrement/index.md new file mode 100644 index 0000000000..53c894a20c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/decrement/index.md @@ -0,0 +1,70 @@ +--- +title: Décrémentation (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - Decrement + - JavaScript + - Language feature + - Operator +translation_of: Web/JavaScript/Reference/Operators/Decrement +browser-compat: javascript.operators.decrement +--- +{{jsSidebar("Operators")}} + +L'opérateur de décrémentation (`--`) permet de décrémenter (c'est-à-dire de soustraire un) son opérande et renvoie une valeur qui est le résultat avant ou après la modification. + +{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}} + +## Syntaxe + +```js +Opérateur : x-- ou --x +``` + +## Description + +Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans `x--`, l'opérateur décrémentera la valeur et renverra la valeur avant l'incrément. + +Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans `--x`, l'opérateur décrémentera la valeur et renverra la valeur après l'incrément. + +## Exemples + +### Décrément en suffixe + +```js +let x = 3; +let y = x--; + +// y = 3 +// x = 2 +``` + +### Décrément en préfixe + +```js +let a = 2; +let b = --a; + +// a = 1 +// b = 1 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur de plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html deleted file mode 100644 index 30d049ae30..0000000000 --- a/files/fr/web/javascript/reference/operators/delete/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: L'opérateur delete -slug: Web/JavaScript/Reference/Operators/delete -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/delete -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur <strong><code>delete</code></strong> permet de retirer une propriété d'un objet.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">delete <em>expression</em></pre> - -<p>où <em>expression</em> est évaluée comme une référence à une propriété :</p> - -<pre class="syntaxbox">delete <em>objet.propriete</em> -delete <em>objet</em>['propriete'] -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>objet</code></dt> - <dd>Le nom d'un objet ou une expression dont l'évaluation fournit un objet.</dd> - <dt><code>propriete</code></dt> - <dd>La propriété qu'on souhaite supprimer.</dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p><code>true</code> pour tous les cas sauf lorsque la propriété est une propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">propre</a> <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete">non-configurable</a> auquel cas <code>false</code> est renvoyé en mode non-strict.</p> - -<h3 id="Exceptions">Exceptions</h3> - -<p>Cet opérateur lève une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> si la propriété est une propriété propre qui est non-configurable.</p> - -<h2 id="Description">Description</h2> - -<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">voir cette page pour plus de détails</a>.</p> - -<p>L'opérateur <code><strong>delete</strong></code> permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie <code>true</code>, sinon c'est la valeur <code>false</code> qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :</p> - -<ul> - <li>Si la propriété qu'on souhaite supprimer n'existe pas, <code>delete</code> n'aura aucun effet et l'opération renverra <code>true</code></li> - <li>Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, <code>delete</code> n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).</li> - <li>Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction. - <ul> - <li>Aussi, <code>delete</code> ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).</li> - <li>Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec <code>delete</code>.</li> - </ul> - </li> - <li>Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.</li> - <li>Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.</li> -</ul> - -<p>Voici un fragment de code qui illustre certains cas :</p> - -<pre class="brush: js">var Employe = { - age: 28, - nom: 'abc', - designation: 'developpeur' -} - -console.log(delete Employe.nom); // renvoie true -console.log(delete Employe.age); // renvoie true - -// Lorsqu'on souhaite supprimer une propriété -// inexistante, on obtient true -console.log(delete Employe.salaire); // renvoie true -</pre> - -<h3 id="Les_propriétés_non-configurables">Les propriétés non-configurables</h3> - -<p>Lorsqu'une propriété est marquée comme non-configurable, <code>delete</code> n'aura aucun effet et l'opération renverra <code>false</code>. En mode strict, cela déclenchera une exception <code>TypeError</code>.</p> - -<pre class="brush: js">var Employe = {}; -Object.defineProperty(Employe, 'nom', {configurable: false}); - -console.log(delete Employe.nom); // renvoie false -</pre> - -<p>{{jsxref("Instructions/var","var")}} (ou <code>let</code> ou <code>const</code>) crée des propriétés non-configurables qui ne peuvent pas être supprimées via <code>delete</code> :</p> - -<pre class="brush: js">var autreNom = 'XYZ'; - -// On peut accéder à la description de cette -// propriété globale grâce à : -Object.getOwnPropertyDescriptor(window, 'autreNom') - -/* Object {value: "XYZ", - writable: true, - enumerable: true, - <strong>configurable: false</strong>} -*/ - -// On voit que "autreNom", ajouté avec var -// est marquée comme "non-configurable" - -delete autreNom; // renvoie false</pre> - -<p>En mode strict, cela aurait déclenché une exception.</p> - -<h3 id="Mode_strict_ou_non-strict">Mode strict ou non-strict ?</h3> - -<p>Lorsqu'on est en mode strict, si <code>delete</code> est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}<strong>.</strong></p> - -<p>Toute variable définie avec <code>var</code> est marquée comme non-configurable. Dans l'exemple qui suit, <code>salaire</code> est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération <code>delete</code> renverra <code>false</code>.</p> - -<pre class="brush: js">function Employe() { - delete salaire; - var salaire; -} - -Employe(); -</pre> - -<p>Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception <code>SyntaxError</code>.</p> - -<pre class="brush: js">"use strict"; - -function Employe() { - delete salaire; // SyntaxError - var salaire; -} - -// De même, tout accès direct à une fonction -// avec delete lèvera une SyntaxError - -function DemoFunction() { - //du code -} - -delete DemoFunction; // SyntaxError -</pre> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">// on crée la propriété adminName sur la portée globale -adminName = 'xyz'; - -// on crée la propriété empCount sur la portée globale -// On utilise var, elle est donc non-configurable -var empCount = 43; - -EmployeeDetails = { - name: 'xyz', - age: 5, - designation: 'Developer' -}; - -// adminName est une propriété de la portée globale -// qui peut être supprimée car configurable. -delete adminName; // renvoie true - -// En revanche empCount n'est pas configurable -// car c'est var qui a été utilisée. -delete empCount; // renvoie false - -// delete peut être utilisé pour retirer des propriétés -// d'objets -delete EmployeeDetails.name; // renvoie true - -<strong>// </strong>Même lorsque la propriété n'existe pas, -// l'opération renvoie "true" -delete EmployeeDetails.salary; // renvoie true - -// delete n'a pas d'impact sur les propriétés -// statiques natives -delete Math.PI; // renvoie false - -// EmployeeDetails est une propriété de la portée globale -// définie sans var, elle est donc configurable -delete EmployeeDetails; // renvoie true - -function f() { - var z = 44; - - // delete n'a pas d'impact sur les noms - // des variables locales - delete z; // returns false -} -</pre> - -<h3 id="delete_et_la_chaîne_de_prototypes"><code>delete</code> et la chaîne de prototypes</h3> - -<p>Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :</p> - -<pre class="brush: js">function Toto(){ - this.truc = 10; -} - -Toto.prototype.truc = 42; - -var toto = new Toto(); - -// L'instruction suivante renvoie true, -// après avoir effectivement supprimé -// la propriété de l'objet toto -delete toto.truc; - -// toto.truc est toujours disponible car -// elle est disponible sur la chaîne de -// prototypes -console.log(toto.truc); - -// Ici on supprime la propriété du prototype -delete Toto.prototype.truc; - -// On aura "undefined" dans la console -// car l'objet n'hérite plus de cette propriété -// qui a été supprimée -console.log(toto.truc);</pre> - -<h3 id="Supprimer_les_éléments_dun_tableau">Supprimer les éléments d'un tableau</h3> - -<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.</p> - -<p>Lorsqu'on utilise <code>delete</code> pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire <code>arbres[3]</code> grâce à <code>delete</code>.</p> - -<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; -delete arbres[3]; -if (3 in arbres) { - // Le code ici ne sera pas exécuté -}</pre> - -<p>Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur <code>undefined</code> à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant <code>undefined</code>, <code>arbres[3]</code> continue d'être présent :</p> - -<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; -arbres[3] = undefined; -if (3 in arbres) { - // Le code ici sera bien exécuté -}</pre> - -<p>Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de <code>arbres[3]</code> est retirée du tableau grâce à <code>splice()</code> mais l'index suivant se décale et arbres[4] devient arbres[3] :</p> - -<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; -if (3 in arbres) { - // Le code ici sera exécuté -} -arbres.splice(3, 1); -console.log(arbres); // ["cèdre","pin","chêne","sapin"]; -if (3 in arbres) { - // Le code ici sera également exécuté -} -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémenté avec JavaScript 1.2.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.delete")}}</p> - -<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> - -<p>Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise <code>delete</code> sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).</p> - -<p>Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="https://perfectionkills.com/understanding-delete/">Une analyse de <code>delete</code> par Kangax, en anglais</a></li> - <li>{{jsxref("Reflect.deleteProperty()")}}</li> - <li>{{jsxref("Map.prototype.delete()")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/delete/index.md b/files/fr/web/javascript/reference/operators/delete/index.md new file mode 100644 index 0000000000..76b7f120bd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/delete/index.md @@ -0,0 +1,285 @@ +--- +title: L'opérateur delete +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/delete +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete +--- +{{jsSidebar("Operators")}} + +L'opérateur **`delete`** permet de retirer une propriété d'un objet. + +{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}} + +## Syntaxe + + delete expression + +où _expression_ est évaluée comme une référence à une propriété : + + delete objet.propriete + delete objet['propriete'] + +### Paramètres + +- `objet` + - : Le nom d'un objet ou une expression dont l'évaluation fournit un objet. +- `propriete` + - : La propriété qu'on souhaite supprimer. + +### Valeur de retour + +`true` pour tous les cas sauf lorsque la propriété est une propriété [propre](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) [non-configurable](/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete) auquel cas `false` est renvoyé en mode non-strict. + +### Exceptions + +Cet opérateur lève une exception {{jsxref("TypeError")}} en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) si la propriété est une propriété propre qui est non-configurable. + +## Description + +Contrairement à ce qu'on pourrait penser, l'opérateur `delete` n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, [voir cette page pour plus de détails](/fr/docs/Web/JavaScript/Gestion_de_la_mémoire). + +L'opérateur **`delete`** permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie `true`, sinon c'est la valeur `false` qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement : + +- Si la propriété qu'on souhaite supprimer n'existe pas, `delete` n'aura aucun effet et l'opération renverra `true` +- Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, `delete` n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »). +- Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction. + + - Aussi, `delete` ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction). + - Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec `delete`. + +- Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées. +- Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}. + +Voici un fragment de code qui illustre certains cas : + +```js +var Employe = { + age: 28, + nom: 'abc', + designation: 'developpeur' +} + +console.log(delete Employe.nom); // renvoie true +console.log(delete Employe.age); // renvoie true + +// Lorsqu'on souhaite supprimer une propriété +// inexistante, on obtient true +console.log(delete Employe.salaire); // renvoie true +``` + +### Les propriétés non-configurables + +Lorsqu'une propriété est marquée comme non-configurable, `delete` n'aura aucun effet et l'opération renverra `false`. En mode strict, cela déclenchera une exception `TypeError`. + +```js +var Employe = {}; +Object.defineProperty(Employe, 'nom', {configurable: false}); + +console.log(delete Employe.nom); // renvoie false +``` + +{{jsxref("Instructions/var","var")}} (ou `let` ou `const`) crée des propriétés non-configurables qui ne peuvent pas être supprimées via `delete` : + +```js +var autreNom = 'XYZ'; + +// On peut accéder à la description de cette +// propriété globale grâce à : +Object.getOwnPropertyDescriptor(window, 'autreNom') + +/* Object {value: "XYZ", + writable: true, + enumerable: true, + configurable: false} +*/ + +// On voit que "autreNom", ajouté avec var +// est marquée comme "non-configurable" + +delete autreNom; // renvoie false +``` + +En mode strict, cela aurait déclenché une exception. + +### Mode strict ou non-strict ? + +Lorsqu'on est en mode strict, si `delete` est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}**.** + +Toute variable définie avec `var` est marquée comme non-configurable. Dans l'exemple qui suit, `salaire` est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération `delete` renverra `false`. + +```js +function Employe() { + delete salaire; + var salaire; +} + +Employe(); +``` + +Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception `SyntaxError`. + +```js +"use strict"; + +function Employe() { + delete salaire; // SyntaxError + var salaire; +} + +// De même, tout accès direct à une fonction +// avec delete lèvera une SyntaxError + +function DemoFunction() { + //du code +} + +delete DemoFunction; // SyntaxError +``` + +## Exemples + +```js +// on crée la propriété adminName sur la portée globale +adminName = 'xyz'; + +// on crée la propriété empCount sur la portée globale +// On utilise var, elle est donc non-configurable +var empCount = 43; + +EmployeeDetails = { + name: 'xyz', + age: 5, + designation: 'Developer' +}; + +// adminName est une propriété de la portée globale +// qui peut être supprimée car configurable. +delete adminName; // renvoie true + +// En revanche empCount n'est pas configurable +// car c'est var qui a été utilisée. +delete empCount; // renvoie false + +// delete peut être utilisé pour retirer des propriétés +// d'objets +delete EmployeeDetails.name; // renvoie true + +// Même lorsque la propriété n'existe pas, +// l'opération renvoie "true" +delete EmployeeDetails.salary; // renvoie true + +// delete n'a pas d'impact sur les propriétés +// statiques natives +delete Math.PI; // renvoie false + +// EmployeeDetails est une propriété de la portée globale +// définie sans var, elle est donc configurable +delete EmployeeDetails; // renvoie true + +function f() { + var z = 44; + + // delete n'a pas d'impact sur les noms + // des variables locales + delete z; // returns false +} +``` + +### `delete` et la chaîne de prototypes + +Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes : + +```js +function Toto(){ + this.truc = 10; +} + +Toto.prototype.truc = 42; + +var toto = new Toto(); + +// L'instruction suivante renvoie true, +// après avoir effectivement supprimé +// la propriété de l'objet toto +delete toto.truc; + +// toto.truc est toujours disponible car +// elle est disponible sur la chaîne de +// prototypes +console.log(toto.truc); + +// Ici on supprime la propriété du prototype +delete Toto.prototype.truc; + +// On aura "undefined" dans la console +// car l'objet n'hérite plus de cette propriété +// qui a été supprimée +console.log(toto.truc); +``` + +### Supprimer les éléments d'un tableau + +Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau. + +Lorsqu'on utilise `delete` pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire `arbres[3]` grâce à `delete`. + +```js +var arbres = ["cèdre","pin","chêne","érable","sapin"]; +delete arbres[3]; +if (3 in arbres) { + // Le code ici ne sera pas exécuté +} +``` + +Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur `undefined` à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant `undefined`, `arbres[3]` continue d'être présent : + +```js +var arbres = ["cèdre","pin","chêne","érable","sapin"]; +arbres[3] = undefined; +if (3 in arbres) { + // Le code ici sera bien exécuté +} +``` + +Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de `arbres[3]` est retirée du tableau grâce à `splice()` mais l'index suivant se décale et arbres\[4] devient arbres\[3] : + +```js +var arbres = ["cèdre","pin","chêne","érable","sapin"]; +if (3 in arbres) { + // Le code ici sera exécuté +} +arbres.splice(3, 1); +console.log(arbres); // ["cèdre","pin","chêne","sapin"]; +if (3 in arbres) { + // Le code ici sera également exécuté +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}} | {{Spec2('ES1')}} | Définition initiale. Implémenté avec JavaScript 1.2. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.delete")}} + +## Notes de compatibilité + +Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise `delete` sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier). + +Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible. + +## Voir aussi + +- [Une analyse de `delete` par Kangax, en anglais](https://perfectionkills.com/understanding-delete/) +- {{jsxref("Reflect.deleteProperty()")}} +- {{jsxref("Map.prototype.delete()")}} diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html deleted file mode 100644 index f5a14835af..0000000000 --- a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html +++ /dev/null @@ -1,426 +0,0 @@ ---- -title: Affecter par décomposition -slug: Web/JavaScript/Reference/Operators/Destructuring_assignment -tags: - - Destructuration - - Affectation de déstructuration - - ECMAScript 2015 - - ES6 - - JavaScript - - Caractéristiques de la langue - - Déstructuration des objets imbriqués et des tableaux - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment -original_slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>affectation par décomposition </strong>(<em>destructuring </em>en anglais) est une expression JavaScript qui permet d'extraire (<em>unpack</em> en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: js">let a, b, rest; -[a, b] = [10, 20]; -console.log(a); // 10 -console.log(b); // 20 - -[a, b, ...rest] = [10, 20, 30, 40, 50]; -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // [30, 40, 50] - -({a, b} = {a: 10, b: 20}); -console.log(a); // 10 -console.log(b); // 20 - -// Proposition de syntaxe (niveau 4) -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // {c: 30, d: 40} -</pre> - -<div class="note"> -<p><strong>Note :</strong> <code>{a, b} = {a:1, b:2}</code> n'est pas syntaxiquement valide en tant que tel, en effet <code>{a, b}</code> est ici considéré comme un bloc et non comme un objet littéral.</p> - -<p>Cependant, <code>({a, b} = {a:1, b:2})</code> sera valide comme pour la forme <code>let {a, b} = {a:1, b:2}</code>.</p> -</div> - -<h2 id="Description">Description</h2> - -<p>Ces expressions utilisant des littéraux pour les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets">objets</a> ou les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">tableaux</a> permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.</p> - -<pre class="brush: js">const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données -const [y, z] = x; // On utilise l'affectation par décomposition -console.log(y); // 1 -console.log(z); // 2 -</pre> - -<p>L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.</p> - -<p>Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.</p> - -<h2 id="Décomposition_dun_tableau">Décomposition d'un tableau</h2> - -<h3 id="Exemple_simple">Exemple simple</h3> - -<pre class="brush: js">const toto = ["un", "deux", "trois"]; - -// sans utiliser la décomposition -const un = toto[0]; -const deux = toto[1]; -const trois = toto[2]; - -// en utilisant la décomposition -const [un, deux, trois] = toto;</pre> - -<h3 id="Affectation_sans_déclaration">Affectation sans déclaration</h3> - -<p>L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :</p> - -<pre class="brush: js">let a, b; -[a, b] = [1, 2]; -console.log(a); // 1 -console.log(b); // 2</pre> - -<h3 id="Valeurs_par_défaut">Valeurs par défaut</h3> - -<p>On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :</p> - -<pre class="brush: js">let a, b; - -[a = 5, b = 7] = [1]; -console.log(a); // 1 -console.log(b); // 7 -</pre> - -<h3 id="Échange_de_variables">Échange de variables</h3> - -<p>Une fois le fragment de code exécuté, on aura <var>b</var> égal à 1 et <var>a</var> égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une <a class="external" href="https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR">permutation XOR</a>).</p> - -<pre class="brush:js">let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1</pre> - -<h3 id="Renvoyer_plusieurs_valeurs">Renvoyer plusieurs valeurs</h3> - -<p>Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.</p> - -<pre class="brush:js">function f() { - return [1, 2]; -} -</pre> - -<p>Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, <code>f()</code> renvoie les valeurs <code>[1, 2]</code>.</p> - -<pre class="brush:js">let a, b; -[a, b] = f(); -console.log("A vaut " + a + " B vaut " + b); -</pre> - -<p>L'instruction <code>[a, b] = f()</code> assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici <var>a</var> vaut 1 et b vaut 2.</p> - -<p>On peut également récupérer la valeur de retour comme un tableau :</p> - -<pre class="brush:js">const x = f(); -console.log("X vaut " + x); -</pre> - -<p>Et on aura x qui sera égal au tableau contenant 1 et 2.</p> - -<h3 id="Ignorer_certaines_valeurs">Ignorer certaines valeurs</h3> - -<p>On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :</p> - -<pre class="brush:js">function f() { - return [1, 2, 3]; -} - -const [a, , b] = f(); -console.log("A vaut " + a + " B vaut " + b); -</pre> - -<p>Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :</p> - -<pre class="brush:js">[,,] = f(); -</pre> - -<h3 id="Exploiter_les_résultats_dune_expression_rationnelle">Exploiter les résultats d'une expression rationnelle</h3> - -<p>Lorsque la méthode <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec">exec()</a></code>, liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :</p> - -<pre class="brush:js">function parseProtocol(url) { - const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); - if (!parsedURL) { - return false; - } - console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"] - - const [, protocol, fullhost, fullpath] = parsedURL; - return protocol; -} - -console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https" -</pre> - -<h3 id="Affecter_le_reste_dun_tableau_à_une_variable">Affecter le reste d'un tableau à une variable</h3> - -<p>On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :</p> - -<pre class="brush: js">const [a, ...b] = [1, 2, 3]; -console.log(a); // 1 -console.log(b); // [2, 3]</pre> - -<p>Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :</p> - -<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3] -// SyntaxError : un élément du reste ne peut pas avoir -// de virgule à la fin</pre> - -<h2 id="Décomposer_un_objet">Décomposer un objet</h2> - -<h3 id="Exemple_simple_2">Exemple simple</h3> - -<pre class="brush: js">const o = {p: 42, q: true}; -const {p, q} = o; - -console.log(p); // 42 -console.log(q); // true - -// Assign new variable names -const {p: toto, q: truc} = o; - -console.log(toto); // 42 -console.log(truc); // true -</pre> - -<h3 id="Affectation_sans_déclaration_2">Affectation sans déclaration</h3> - -<p>Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :</p> - -<pre class="brush: js">let a, b; -({a, b} = {a:1, b:2}); -</pre> - -<div class="note"> -<p><strong>Note :</strong> Les parenthèses <code>( ... )</code> utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.</p> -</div> - -<h3 id="Affecter_avec_un_nom_différent">Affecter avec un nom différent</h3> - -<p>Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :</p> - -<pre class="brush: js">const o = {p: 42, q: true}; -const {p: toto, q: truc} = o; - -console.log(toto); // 42 -console.log(truc); // true</pre> - -<p>Ici, par exemple, <code>const {p: toto} = o</code> prend la propriété <code>p</code> de l'objet <code>o</code> pour l'affecter à une variable locale intitulée <code>toto</code>.</p> - -<h3 id="Valeurs_par_défaut_2">Valeurs par défaut</h3> - -<p>Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut <code>undefined</code>.</p> - -<pre class="brush: js">const {a = 10, b = 5} = {a: 3}; - -console.log(a); // 3 -console.log(b); // 5</pre> - -<h3 id="Affecter_de_nouveaux_noms_aux_variables_et_fournir_des_valeurs_par_défaut">Affecter de nouveaux noms aux variables et fournir des valeurs par défaut</h3> - -<p>Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut <code>undefined</code>.</p> - -<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3}; - -console.log(aa); // 3 -console.log(bb); // 5</pre> - -<h3 id="Arguments_par_défaut_dune_fonction">Arguments par défaut d'une fonction</h3> - -<h4 id="Version_ES5">Version ES5</h4> - -<pre class="brush: js">function dessinGrapheES5(options) { - options = options === undefined ? {} : options; - var size = options.size === undefined ? 'big' : options.size; - var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords; - var radius = options.radius === undefined ? 25 : options.radius; - console.log(size, coords, radius); - // seulement ensuite on dessine le graphe -} - -dessinGrapheES5({ - coords: { x: 18, y: 30 }, - radius: 30 -});</pre> - -<h4 id="Version_ES2015">Version ES2015</h4> - -<pre class="brush: js">function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}) -{ - console.log(size, coords, radius); - // on dessine le graphe -} - -dessinGrapheES2015({ - coords: { x: 18, y: 30 }, - radius: 30 -});</pre> - -<div class="note"> -<p><strong>Note :</strong> Dans la signature de la fonction <code>dessinGrapheES2015</code> ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (<code>{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}</code>). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », <code>dessinGrapheES2015()</code> pourra être appelée sans paramètre.</p> -</div> - -<h3 id="Décomposition_imbriquée_avec_objets_et_tableaux">Décomposition imbriquée avec objets et tableaux</h3> - -<pre class="brush:js">const metadata = { - title: "Scratchpad", - translations: [ - { - locale: "de", - localization_tags: [ ], - last_edit: "2014-04-14T08:43:37", - url: "/de/docs/Tools/Scratchpad", - title: "JavaScript-Umgebung" - } - ], - url: "/en-US/docs/Tools/Scratchpad" -}; - -let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; - -console.log(englishTitle); // "Scratchpad" -console.log(localeTitle); // "JavaScript-Umgebung"</pre> - -<h3 id="Décomposition_et_utilisation_de_for_of">Décomposition et utilisation de <a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for of</a></h3> - -<pre class="brush: js">const personnes = [ - { - nom: "Alain Dupont", - famille: { - mere: "Isabelle Dupont", - pere: "Jean Dupont", - soeur: "Laure Dupont" - }, - age: 35 - }, - { - nom: "Luc Marchetoile", - famille: { - mere: "Patricia Marchetoile", - pere: "Antonin Marchetoile", - frere: "Yann Marchetoile" - }, - age: 25 - } -]; - -for (const {nom: n, famille: { pere: f } } of personnes) { - console.log("Nom : " + n + ", Père : " + f); -} - -// "Nom : Alain Dupont, Père : Jean Dupont" -// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"</pre> - -<h3 id="Décomposer_les_propriétés_dobjets_passés_en_arguments">Décomposer les propriétés d'objets passés en arguments</h3> - -<pre class="brush:js">const user = { - id: 42, - displayName: "jbiche", - fullName: { - firstName: "Jean", - lastName: "Biche" - } -}; - -function userId({id}) { - return id; -} - -function whois({displayName: displayName, fullName: {firstName: name}}){ - console.log(displayName + " est " + name); -} - -console.log("userId: " + userId(user)); w// "userId: 42" -whois(user); // "jbiche est Jean"</pre> - -<p>Cela permet d'accéder directement à <code>id</code>, <code>displayName</code> et <code>firstName</code> depuis l'objet <code>user</code>.</p> - -<h3 id="Les_noms_de_propriétés_calculés_et_la_décomposition">Les noms de propriétés calculés et la décomposition</h3> - -<p>Il est possible d'utiliser des noms de propriétés calculés, comme avec les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s">littéraux objets</a>, avec la décomposition.</p> - -<pre class="brush: js">let clef = "z"; -let { [clef]: toto } = { z: "truc" }; - -console.log(toto); // "truc"</pre> - -<h3 id="Syntaxe_du_«_reste_»_et_décomposition_dun_objet">Syntaxe du « reste » et décomposition d'un objet</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript</a> ajoute <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">la syntaxe du reste</a> pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :</p> - -<pre class="brush: js">let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40}; -a; // 10 -b; // 20 -reste; // { c: 30, d: 40 }</pre> - -<h3 id="Gestion_des_identifiants_invalides_comme_noms_de_propriétés">Gestion des identifiants invalides comme noms de propriétés</h3> - -<p>Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :</p> - -<pre class="brush: js">const toto = {'truc-bidule': true} -const {'truc-bidule': trucBidule } = toto; - -console.log(trucBidule); // "true"</pre> - -<h3 id="Combiner_la_décomposition_de_tableaux_et_dobjets">Combiner la décomposition de tableaux et d'objets</h3> - -<p>Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété <code>nom</code> du troisième élément du tableau <code>props</code>:</p> - -<pre class="brush: js">const props = [ - { id: 1, nom: "Toto"}, - { id: 2, nom: "Truc"}, - { id: 3, nom: "Bidule"} -]; - -const [,, {nom}] = props; -console.log(nom); // Bidule</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.destructuring")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li> - <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">ES6 en détails : La décomposition sur tech.mozfr.org</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md new file mode 100644 index 0000000000..e602c383be --- /dev/null +++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md @@ -0,0 +1,448 @@ +--- +title: Affecter par décomposition +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +tags: + - Destructuration + - Affectation de déstructuration + - ECMAScript 2015 + - ES6 + - JavaScript + - Caractéristiques de la langue + - Déstructuration des objets imbriqués et des tableaux + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +original_slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition +--- +{{jsSidebar("Operators")}} + +L'**affectation par décomposition** (_destructuring_ en anglais) est une expression JavaScript qui permet d'extraire (_unpack_ en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet. + +{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}} + +## Syntaxe + +```js +let a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({a, b} = {a: 10, b: 20}); +console.log(a); // 10 +console.log(b); // 20 + +// Proposition de syntaxe (niveau 4) +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +``` + +> **Note :** `{a, b} = {a:1, b:2}` n'est pas syntaxiquement valide en tant que tel, en effet `{a, b}` est ici considéré comme un bloc et non comme un objet littéral. +> +> Cependant, `({a, b} = {a:1, b:2})` sera valide comme pour la forme `let {a, b} = {a:1, b:2}`. + +## Description + +Ces expressions utilisant des littéraux pour les [objets](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets) ou les [tableaux](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux) permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction. + +```js +const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données +const [y, z] = x; // On utilise l'affectation par décomposition +console.log(y); // 1 +console.log(z); // 2 +``` + +L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous. + +Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python. + +## Décomposition d'un tableau + +### Exemple simple + +```js +const toto = ["un", "deux", "trois"]; + +// sans utiliser la décomposition +const un = toto[0]; +const deux = toto[1]; +const trois = toto[2]; + +// en utilisant la décomposition +const [un, deux, trois] = toto; +``` + +### Affectation sans déclaration + +L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple : + +```js +let a, b; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +``` + +### Valeurs par défaut + +On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple : + +```js +let a, b; + +[a = 5, b = 7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +``` + +### Échange de variables + +Une fois le fragment de code exécuté, on aura _b_ égal à 1 et _a_ égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une [permutation XOR](<https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR>)). + +```js +let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +``` + +### Renvoyer plusieurs valeurs + +Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité. + +```js +function f() { + return [1, 2]; +} +``` + +Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, `f()` renvoie les valeurs `[1, 2]`. + +```js +let a, b; +[a, b] = f(); +console.log("A vaut " + a + " B vaut " + b); +``` + +L'instruction `[a, b] = f()` assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici _a_ vaut 1 et b vaut 2. + +On peut également récupérer la valeur de retour comme un tableau : + +```js +const x = f(); +console.log("X vaut " + x); +``` + +Et on aura x qui sera égal au tableau contenant 1 et 2. + +### Ignorer certaines valeurs + +On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter : + +```js +function f() { + return [1, 2, 3]; +} + +const [a, , b] = f(); +console.log("A vaut " + a + " B vaut " + b); +``` + +Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple : + +```js +[,,] = f(); +``` + +### Exploiter les résultats d'une expression rationnelle + +Lorsque la méthode [`exec()`](/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec), liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète : + +```js +function parseProtocol(url) { + const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"] + + const [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https" +``` + +### Affecter le reste d'un tableau à une variable + +On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable : + +```js +const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3] +``` + +Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche : + +```js example-bad +const [a, ...b,] = [1, 2, 3] +// SyntaxError : un élément du reste ne peut pas avoir +// de virgule à la fin +``` + +## Décomposer un objet + +### Exemple simple + +```js +const o = {p: 42, q: true}; +const {p, q} = o; + +console.log(p); // 42 +console.log(q); // true + +// Assign new variable names +const {p: toto, q: truc} = o; + +console.log(toto); // 42 +console.log(truc); // true +``` + +### Affectation sans déclaration + +Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple : + +```js +let a, b; +({a, b} = {a:1, b:2}); +``` + +> **Note :** Les parenthèses `( ... )` utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction. + +### Affecter avec un nom différent + +Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) : + +```js +const o = {p: 42, q: true}; +const {p: toto, q: truc} = o; + +console.log(toto); // 42 +console.log(truc); // true +``` + +Ici, par exemple, `const {p: toto} = o` prend la propriété `p` de l'objet `o` pour l'affecter à une variable locale intitulée `toto`. + +### Valeurs par défaut + +Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut `undefined`. + +```js +const {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5 +``` + +### Affecter de nouveaux noms aux variables et fournir des valeurs par défaut + +Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut `undefined`. + +```js +const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +``` + +### Arguments par défaut d'une fonction + +#### Version ES5 + +```js +function dessinGrapheES5(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, coords, radius); + // seulement ensuite on dessine le graphe +} + +dessinGrapheES5({ + coords: { x: 18, y: 30 }, + radius: 30 +}); +``` + +#### Version ES2015 + +```js +function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}) +{ + console.log(size, coords, radius); + // on dessine le graphe +} + +dessinGrapheES2015({ + coords: { x: 18, y: 30 }, + radius: 30 +}); +``` + +> **Note :** Dans la signature de la fonction `dessinGrapheES2015` ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (`{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}`). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », `dessinGrapheES2015()` pourra être appelée sans paramètre. + +### Décomposition imbriquée avec objets et tableaux + +```js +const metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung" +``` + +### Décomposition et utilisation de [for of](/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of) + +```js +const personnes = [ + { + nom: "Alain Dupont", + famille: { + mere: "Isabelle Dupont", + pere: "Jean Dupont", + soeur: "Laure Dupont" + }, + age: 35 + }, + { + nom: "Luc Marchetoile", + famille: { + mere: "Patricia Marchetoile", + pere: "Antonin Marchetoile", + frere: "Yann Marchetoile" + }, + age: 25 + } +]; + +for (const {nom: n, famille: { pere: f } } of personnes) { + console.log("Nom : " + n + ", Père : " + f); +} + +// "Nom : Alain Dupont, Père : Jean Dupont" +// "Nom : Luc Marchetoile, Père : Antonin Marchetoile" +``` + +### Décomposer les propriétés d'objets passés en arguments + +```js +const user = { + id: 42, + displayName: "jbiche", + fullName: { + firstName: "Jean", + lastName: "Biche" + } +}; + +function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " est " + name); +} + +console.log("userId: " + userId(user)); w// "userId: 42" +whois(user); // "jbiche est Jean" +``` + +Cela permet d'accéder directement à `id`, `displayName` et `firstName` depuis l'objet `user`. + +### Les noms de propriétés calculés et la décomposition + +Il est possible d'utiliser des noms de propriétés calculés, comme avec les [littéraux objets](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s), avec la décomposition. + +```js +let clef = "z"; +let { [clef]: toto } = { z: "truc" }; + +console.log(toto); // "truc" +``` + +### Syntaxe du « reste » et décomposition d'un objet + +[La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript](https://github.com/tc39/proposal-object-rest-spread) ajoute [la syntaxe du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition : + +```js +let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40}; +a; // 10 +b; // 20 +reste; // { c: 30, d: 40 } +``` + +### Gestion des identifiants invalides comme noms de propriétés + +Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple : + +```js +const toto = {'truc-bidule': true} +const {'truc-bidule': trucBidule } = toto; + +console.log(trucBidule); // "true" +``` + +### Combiner la décomposition de tableaux et d'objets + +Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété `nom` du troisième élément du tableau `props`: + +```js +const props = [ + { id: 1, nom: "Toto"}, + { id: 2, nom: "Truc"}, + { id: 3, nom: "Bidule"} +]; + +const [,, {nom}] = props; +console.log(nom); // Bidule +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.destructuring")}} + +## Voir aussi + +- [Opérateurs d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) +- [ES6 en détails : La décomposition sur tech.mozfr.org](https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition) diff --git a/files/fr/web/javascript/reference/operators/division/index.html b/files/fr/web/javascript/reference/operators/division/index.html deleted file mode 100644 index 25d572fce0..0000000000 --- a/files/fr/web/javascript/reference/operators/division/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Division (/) -slug: Web/JavaScript/Reference/Operators/Division -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.division -translation-of: Web/JavaScript/Reference/Operators/Division ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de division (<code>/</code>) fournit le quotient de l'opérande gauche (le numérateur) divisé par l'opérande droite (le dénominateur).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var> / <var>y</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="basic_division">Divisions simples</h3> - -<pre class="brush: js"> -1 / 2 // 0.5 -Math.floor(3 / 2) // 1 -1.0 / 2.0 // 0.5 -</pre> - -<h3 id="division_by_zero">Division par zéro</h3> - -<pre class="brush: js"> -2.0 / 0 // Infinity -2.0 / 0.0 // Infinity, because 0.0 === 0 -2.0 / -0.0 // -Infinity -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/division/index.md b/files/fr/web/javascript/reference/operators/division/index.md new file mode 100644 index 0000000000..ada0f7215e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/division/index.md @@ -0,0 +1,60 @@ +--- +title: Division (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.division +--- +{{jsSidebar("Operators")}} + +L'opérateur de division (`/`) fournit le quotient de l'opérande gauche (le numérateur) divisé par l'opérande droite (le dénominateur). + +{{EmbedInteractiveExample("pages/js/expressions-division.html")}} + +## Syntaxe + +```js +Opérateur : x / y +``` + +## Exemples + +### Divisions simples + +```js +1 / 2 // 0.5 +Math.floor(3 / 2) // 1 +1.0 / 2.0 // 0.5 +``` + +### Division par zéro + +```js +2.0 / 0 // Infinity +2.0 / 0.0 // Infinity, because 0.0 === 0 +2.0 / -0.0 // -Infinity +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/division_assignment/index.html b/files/fr/web/javascript/reference/operators/division_assignment/index.html deleted file mode 100644 index cd72e5d239..0000000000 --- a/files/fr/web/javascript/reference/operators/division_assignment/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Affectation après division (/=) -slug: Web/JavaScript/Reference/Operators/Division_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.division_assignment -translation-of: Web/JavaScript/Reference/Operators/Division_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de division et d'affectation (<code>/=</code>) divise la variable fournie par l'opérande gauche par la valeur indiquée par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x /= y -<strong>Signification:</strong> x = x / y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_division_assignment">Utiliser l'opérateur de division et d'affectation</h3> - -<pre class="brush: js"> -let truc = 5; -truc /= 2; // 2.5 -truc /= 2; // 1.25 -truc /= 0; // Infinity -truc /= 'toto'; // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">L'opérateur de division</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/division_assignment/index.md b/files/fr/web/javascript/reference/operators/division_assignment/index.md new file mode 100644 index 0000000000..612aabe6b4 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/division_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: Affectation après division (/=) +slug: Web/JavaScript/Reference/Operators/Division_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.division_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de division et d'affectation (`/=`) divise la variable fournie par l'opérande gauche par la valeur indiquée par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x /= y +Signification: x = x / y +``` + +## Exemples + +### Utiliser l'opérateur de division et d'affectation + +```js +let truc = 5; +truc /= 2; // 2.5 +truc /= 2; // 1.25 +truc /= 0; // Infinity +truc /= 'toto'; // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) diff --git a/files/fr/web/javascript/reference/operators/equality/index.html b/files/fr/web/javascript/reference/operators/equality/index.html deleted file mode 100644 index 0668aa74d4..0000000000 --- a/files/fr/web/javascript/reference/operators/equality/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Égalité (==) -slug: Web/JavaScript/Reference/Operators/Equality -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.equality -translation-of: Web/JavaScript/Reference/Operators/Equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'égalité (<code>==</code>) vérifie si ses deux opérandes sont égaux et renvoie un booléen indiquant le résultat de la comparaison. À la différence de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">d'égalité stricte</a>, l'opérateur d'égalité tente de convertir ses opérandes avant la comparaison si ceux-ci sont de types différents.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x == y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérateurs d'égalité (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> pour comparer deux opérandes. On peut le résumer ainsi :</p> - -<ul> - <li>Si les opérandes sont deux objets, on renvoie <code>true</code> uniquement si les deux opérandes référencent le même objet.</li> - <li>Si un opérande vaut <code>null</code> et que l'autre vaut <code>undefined</code>, on renvoie <code>true</code>.</li> - <li>Si les opérandes sont de types différents, on tente une conversion pour avoir le même type de part et d'autre avant la comparaison : - <ul> - <li>Si on compare un nombre à une chaîne de caractères, on tentera de convertir la chaîne en une valeur numérique.</li> - <li>Si l'un des opérandes est un booléen, on le convertira en 1 s'il vaut <code>true</code> et en +0 s'il vaut <code>false</code>.</li> - <li>Si l'un des opérandes est un objet et que l'autre est un nombre ou une chaîne de caractères, on tentera de convertir l'objet en une valeur primitive grâce aux méthodes <code>valueOf()</code> et <code>toString()</code> de l'objet.</li> - </ul> - </li> - <li>Si les opérandes sont du même types, on les compare comme suit : - <ul> - <li><code>String</code> : on renvoie <code>true</code> uniquement si les deux opérandes ont les mêmes caractères dans le même ordre.</li> - <li><code>Number</code> : on renvoie <code>true</code> uniquement si les deux opérandes ont la même valeur. <code>+0</code> et <code>-0</code> sont considérés comme la même valeur. Si au moins un des opérandes vaut <code>NaN</code>, on renvoie <code>false</code>.</li> - <li><code>Boolean</code> : on renvoie <code>true</code> uniquement si les deux opérandes valent tous les deux <code>true</code> ou s'ils valent tous les deux <code>false</code>.</li> - </ul> - </li> -</ul> - -<p>La différence fondamentale entre cet opérateur et <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">l'opérateur d'égalité stricte</a> (<code>===</code>) est que ce dernier n'opère pas de conversion de type. L'opérateur d'égalité stricte considère toujours que deux valeurs de types différents sont différentes.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="comparison_with_no_type_conversion">Comparaison sans conversion de types</h3> - -<pre class="brush: js"> -1 == 1; // true -"coucou" == "coucou"; // true -</pre> - -<h3 id="comparison_with_type_conversion">Comparaison avec conversion de types</h3> - -<pre class="brush: js"> -"1" == 1; // true -1 == "1"; // true -0 == false; // true -0 == null; // false -0 == undefined; // false -0 == !!null; // true, voir la documentation pour !! -0 == !!undefined; // true, voir la documentation pour !! -null == undefined; // true - -const nombre1 = new Number(3); -const nombre2 = new Number(3); -nombre1 == 3; // true -nombre1 == nombre2; // false -</pre> - -<h3 id="comparison_of_objects">Comparaison d'objets</h3> - -<pre class="brush: js"> -const objet1 = {"clé": "valeur"} -const objet2 = {"clé": "valeur"}; - -objet1 == objet2 // false -objet2 == objet2 // true -</pre> - -<h3 id="comparing_strings_and_string_objects">Comparaison entre des chaînes de caractères et des objets String</h3> - -<p>On notera que les chaînes de caractères construites avec <code>new String()</code> sont des objets. Si on compare une telle valeur avec une chaîne de caractères "primitives", l'objet <code>String</code> sera converti en une chaîne de caractères et les contenus de ces chaînes seront comparés. Toutefois, si les deux opérandes sont des objets <code>String</code>, ils seront comparés comme tels et devront référencer le même objet pour être considérés égaux :</p> - -<pre class="brush: js"> -const string1 = "coucou"; -const string2 = String("coucou"); -const string3 = new String("coucou"); -const string4 = new String("coucou"); - -console.log(string1 == string2); // true -console.log(string1 == string3); // true -console.log(string2 == string3); // true -console.log(string3 == string4); // false -console.log(string4 == string4); // true -</pre> - -<h3 id="comparing_dates_and_strings">Comparaison entre les dates et les chaînes de caractères</h3> - -<pre class="brush: js"> -const d = new Date('December 17, 1995 03:24:00'); -const s = d.toString(); // par exemple : "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" -console.log(d == s); //true -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/equality/index.md b/files/fr/web/javascript/reference/operators/equality/index.md new file mode 100644 index 0000000000..5598ca09d6 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/equality/index.md @@ -0,0 +1,117 @@ +--- +title: Égalité (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.equality +--- +{{jsSidebar("Operators")}} + +L'opérateur d'égalité (`==`) vérifie si ses deux opérandes sont égaux et renvoie un booléen indiquant le résultat de la comparaison. À la différence de l'opérateur [d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality), l'opérateur d'égalité tente de convertir ses opérandes avant la comparaison si ceux-ci sont de types différents. + +{{EmbedInteractiveExample("pages/js/expressions-equality.html")}} + +## Syntaxe + +```js +x == y +``` + +## Description + +Les opérateurs d'égalité (`==` et `!=`) utilisent [l'algorithme de comparaison d'égalité abstraite](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3) pour comparer deux opérandes. On peut le résumer ainsi : + +- Si les opérandes sont deux objets, on renvoie `true` uniquement si les deux opérandes référencent le même objet. +- Si un opérande vaut `null` et que l'autre vaut `undefined`, on renvoie `true`. +- Si les opérandes sont de types différents, on tente une conversion pour avoir le même type de part et d'autre avant la comparaison : + + - Si on compare un nombre à une chaîne de caractères, on tentera de convertir la chaîne en une valeur numérique. + - Si l'un des opérandes est un booléen, on le convertira en 1 s'il vaut `true` et en +0 s'il vaut `false`. + - Si l'un des opérandes est un objet et que l'autre est un nombre ou une chaîne de caractères, on tentera de convertir l'objet en une valeur primitive grâce aux méthodes `valueOf()` et `toString()` de l'objet. + +- Si les opérandes sont du même types, on les compare comme suit : + + - `String` : on renvoie `true` uniquement si les deux opérandes ont les mêmes caractères dans le même ordre. + - `Number` : on renvoie `true` uniquement si les deux opérandes ont la même valeur. `+0` et `-0` sont considérés comme la même valeur. Si au moins un des opérandes vaut `NaN`, on renvoie `false`. + - `Boolean` : on renvoie `true` uniquement si les deux opérandes valent tous les deux `true` ou s'ils valent tous les deux `false`. + +La différence fondamentale entre cet opérateur et [l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) (`===`) est que ce dernier n'opère pas de conversion de type. L'opérateur d'égalité stricte considère toujours que deux valeurs de types différents sont différentes. + +## Exemples + +### Comparaison sans conversion de types + +```js +1 == 1; // true +"coucou" == "coucou"; // true +``` + +### Comparaison avec conversion de types + +```js +"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true, voir la documentation pour !! +0 == !!undefined; // true, voir la documentation pour !! +null == undefined; // true + +const nombre1 = new Number(3); +const nombre2 = new Number(3); +nombre1 == 3; // true +nombre1 == nombre2; // false +``` + +### Comparaison d'objets + +```js +const objet1 = {"clé": "valeur"} +const objet2 = {"clé": "valeur"}; + +objet1 == objet2 // false +objet2 == objet2 // true +``` + +### Comparaison entre des chaînes de caractères et des objets String + +On notera que les chaînes de caractères construites avec `new String()` sont des objets. Si on compare une telle valeur avec une chaîne de caractères "primitives", l'objet `String` sera converti en une chaîne de caractères et les contenus de ces chaînes seront comparés. Toutefois, si les deux opérandes sont des objets `String`, ils seront comparés comme tels et devront référencer le même objet pour être considérés égaux : + +```js +const string1 = "coucou"; +const string2 = String("coucou"); +const string3 = new String("coucou"); +const string4 = new String("coucou"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true +``` + +### Comparaison entre les dates et les chaînes de caractères + +```js +const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // par exemple : "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" +console.log(d == s); //true +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality) +- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/fr/web/javascript/reference/operators/exponentiation/index.html b/files/fr/web/javascript/reference/operators/exponentiation/index.html deleted file mode 100644 index 310a21c8fe..0000000000 --- a/files/fr/web/javascript/reference/operators/exponentiation/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Exponentiation (**) -slug: Web/JavaScript/Reference/Operators/Exponentiation -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.exponentiation -translation-of: Web/JavaScript/Reference/Operators/Exponentiation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'exponentiation (<code>**</code>) fournit le résultat obtenu lorsqu'on élève le premier opérande à la puissance indiquée par le second. Il est équivalent <code>Math.pow</code> exception faite que cet opérateur permet également d'utiliser des valeurs BigInt comme opérandes.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>var1</var> ** <var>var2</var> -</pre> - -<h2 id="description">Description</h2> - -<p>L'opérateur d'exponentiation est associatif à droite : <code><var>a</var> ** <var>b</var> ** <var>c</var></code> est équivalent à <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p> - -<p>Pour la plupart des langages possédant un opérateur d'exponentiation (ex. PHP, Python, etc.), l'opérateur d'exponentiation possède une précédence plus élevée que les opérateurs unaires (comme l'addition unaire <code>+</code> ou la soustraction unaire <code>-</code>). Il existe toutefois quelques exceptions comme Bash, où <code>**</code> possède une précédence inférieure à celles des opérateurs unaires.</p> - -<p>En JavaScript, il est impossible d'écrire une expression d'exponentiation ambigüe : on ne peut pas placer un opérateur unaire (<code>+/-/~/!/delete/void/typeof</code>) avant le nombre servant de base, cela provoquera une exception <code>SyntaxError</code>.</p> - -<pre class="brush: js"> --2 ** 2; -// 4 en Bash, -4 pour d'autres langages. -// Invalide en JavaScript car l'opération est ambigüe. - --(2 ** 2); -// -4 en JavaScript, les parenthèses évitent l'ambiguité. -</pre> - -<p>Attnetion, certains langages de programmation utilisent l'accent circonflexe <kbd>^</kbd> pour exprimer l'exponentiaion mais JavaScript utilise ce symbole pour <a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">l'opérateur binaire OU exclusif (XOR)</a>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="basic_exponentiation">Exponentiation simple</h3> - -<pre class="brush: js"> -2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN -</pre> - -<h3 id="associativity">Associativité</h3> - -<pre class="brush: js"> -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<h3 id="usage_with_unary_operators">Avec les opérateurs unaires</h3> - -<p>Pour prendre l'opposé du résultat :</p> - -<pre class="brush: js"> --(2 ** 2) // -4 -</pre> - -<p>Pour forcer le signe de la base en négatif :</p> - -<pre class="brush: js">(-2) ** 2 // 4 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/exponentiation/index.md b/files/fr/web/javascript/reference/operators/exponentiation/index.md new file mode 100644 index 0000000000..05e4fa2cf7 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/exponentiation/index.md @@ -0,0 +1,94 @@ +--- +title: Exponentiation (**) +slug: Web/JavaScript/Reference/Operators/Exponentiation +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.exponentiation +--- +{{jsSidebar("Operators")}} + +L'opérateur d'exponentiation (`**`) fournit le résultat obtenu lorsqu'on élève le premier opérande à la puissance indiquée par le second. Il est équivalent `Math.pow` exception faite que cet opérateur permet également d'utiliser des valeurs BigInt comme opérandes. + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}} + +## Syntaxe + +```js +Opérateur : var1 ** var2 +``` + +## Description + +L'opérateur d'exponentiation est associatif à droite : `a ** b ** c` est équivalent à `a ** (b ** c)`. + +Pour la plupart des langages possédant un opérateur d'exponentiation (ex. PHP, Python, etc.), l'opérateur d'exponentiation possède une précédence plus élevée que les opérateurs unaires (comme l'addition unaire `+` ou la soustraction unaire `-`). Il existe toutefois quelques exceptions comme Bash, où `**` possède une précédence inférieure à celles des opérateurs unaires. + +En JavaScript, il est impossible d'écrire une expression d'exponentiation ambigüe : on ne peut pas placer un opérateur unaire (`+/-/~/!/delete/void/typeof`) avant le nombre servant de base, cela provoquera une exception `SyntaxError`. + +```js +-2 ** 2; +// 4 en Bash, -4 pour d'autres langages. +// Invalide en JavaScript car l'opération est ambigüe. + +-(2 ** 2); +// -4 en JavaScript, les parenthèses évitent l'ambiguité. +``` + +Attnetion, certains langages de programmation utilisent l'accent circonflexe <kbd>^</kbd> pour exprimer l'exponentiaion mais JavaScript utilise ce symbole pour [l'opérateur binaire OU exclusif (XOR)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR). + +## Exemples + +### Exponentiation simple + +```js +2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN +``` + +### Associativité + +```js +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +``` + +### Avec les opérateurs unaires + +Pour prendre l'opposé du résultat : + +```js +-(2 ** 2) // -4 +``` + +Pour forcer le signe de la base en négatif : + +```js +(-2) ** 2 // 4 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html deleted file mode 100644 index b83a331cf4..0000000000 --- a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Affectation après exponentiation (**=) -slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.exponentiation_assignment -translation-of: Web/JavaScript/Reference/Operators/Exponentiation_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'exponentiation et d'affectation (<code>**=</code>) élève la valeur de la variable fournie par son opérande gauche à la puissance indiquée par son opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x **= y -<strong>Signification :</strong> x = x ** y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_exponentiation_assignment">Utiliser l'opérateur d'exponentiation et d'affectation</h3> - -<pre class="brush: js"> -let truc = 5; -truc **= 2; // 25 -truc **= 'toto'; // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">L'opérateur d'exponentiation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md new file mode 100644 index 0000000000..2358751fd3 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md @@ -0,0 +1,46 @@ +--- +title: Affectation après exponentiation (**=) +slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.exponentiation_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'exponentiation et d'affectation (`**=`) élève la valeur de la variable fournie par son opérande gauche à la puissance indiquée par son opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x **= y +Signification : x = x ** y +``` + +## Exemples + +### Utiliser l'opérateur d'exponentiation et d'affectation + +```js +let truc = 5; +truc **= 2; // 25 +truc **= 'toto'; // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) diff --git a/files/fr/web/javascript/reference/operators/function/index.html b/files/fr/web/javascript/reference/operators/function/index.html deleted file mode 100644 index 83dd3e1f77..0000000000 --- a/files/fr/web/javascript/reference/operators/function/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: L'opérateur function -slug: Web/JavaScript/Reference/Operators/function -tags: - - Function - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/function -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Le mot-clé <strong><code>function</code></strong> permet de définir une fonction à l'intérieur d'une expression.</p> - -<div class="note"> -<p><strong>Note :</strong> Il est également possible de définir des fonctions grâce au constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> et aux <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonction</a>.</p> -</div> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { - <em>instructions</em> -}</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction <em>anonyme</em>.</dd> - <dt><code>paramN</code></dt> - <dd>Le nom d'un paramètre à passer à la fonction.</dd> - <dt><code>instructions</code></dt> - <dd>Les instructions constituant le corps de la fonction.</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> À partir d'ES2015/ES6, on peut également former des expressions de fonction avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>.</p> -</div> - -<h2 id="Description">Description</h2> - -<p>Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a> pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction <em>anonyme</em>). Consultez l'article <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée <a href="/fr/docs/Glossaire/IIFE">immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou <em>IIFE</em> pour <em>Immediately Invoked Function Expression</em> en anglais)</a>.</p> - -<h3 id="Remontée_(hoisting)_des_expressions_de_fonction">Remontée (<em>hoisting</em>) des expressions de fonction</h3> - -<p>En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :</p> - -<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function - -var nonRemontée = function() { - console.log("truc"); -} -</pre> - -<h2 id="Exemples">Exemples</h2> - -<p>L'exemple qui suit définit une fonction anonyme et l'assigne à une variable <code>x</code>. La fonction renvoie le carré de son paramètre :</p> - -<pre class="brush: js">var x = function(y) { - return y * y; -}; -</pre> - -<h3 id="Expression_nommée">Expression nommée</h3> - -<p>Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code>.</p> - -<pre class="brush: js">var math = { - 'factorielle': function factorielle(n) { - if (n <= 1) { - return 1; - } - return n * factorielle(n - 1); - } -};</pre> - -<p>La variable affectée à l'expression de fonction aura une propriété <code>name</code>. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p> - -<pre class="brush: js">var toto = function() {}; -console.log(toto.name); // "toto" - -var toto2 = toto; -console.log(toto2.name); // "toto" - -var truc = function machin() {} -console.log(truc.name); // "machin" -</pre> - -<h3 id="IIFE_pour_Immediately_Invoked_Function_Expression_ou_expression_de_fonction_immédiatement_appelée">IIFE pour <em>Immediately Invoked Function Expression</em> ou expression de fonction immédiatement appelée</h3> - -<p>On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :</p> - -<pre class="brush: js">var a = "coucou"; -var b = "monde"; - -// IIFE -(function(x, y) { - console.log(x + " " + y); -})(a, b); -// coucou monde -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.5.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.function")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions")}}</li> - <li>{{jsxref("Objets_globaux/Function","L'objet Function")}}</li> - <li>{{jsxref("Instructions/function", "Instruction function")}}</li> - <li>{{jsxref("Instructions/function*", "Instruction function*")}}</li> - <li>{{jsxref("Opérateurs/function*", "Expression function*")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">Les expressions de fonctions asynchrones (l'opérateur <code>async function</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les déclarations de fonctions asynchrones (l'instruction <code>async function</code>)</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/function/index.md b/files/fr/web/javascript/reference/operators/function/index.md new file mode 100644 index 0000000000..34213fa6f1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function/index.md @@ -0,0 +1,129 @@ +--- +title: L'opérateur function +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function +--- +{{jsSidebar("Operators")}} + +Le mot-clé **`function`** permet de définir une fonction à l'intérieur d'une expression. + +> **Note :** Il est également possible de définir des fonctions grâce au constructeur [`Function`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function) et aux [déclarations de fonction](/fr/docs/Web/JavaScript/Reference/Instructions/function). + +{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}} + +## Syntaxe + + function [nom]([param1[, param2[, ..., paramN]]]) { + instructions + } + +### Paramètres + +- `nom` + - : Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction _anonyme_. +- `paramN` + - : Le nom d'un paramètre à passer à la fonction. +- `instructions` + - : Les instructions constituant le corps de la fonction. + +> **Note :** À partir d'ES2015/ES6, on peut également former des expressions de fonction avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es). + +## Description + +Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction [`function`](/fr/docs/Web/JavaScript/Reference/Instructions/function) pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction _anonyme_). Consultez l'article [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions) pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée [immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou _IIFE_ pour _Immediately Invoked Function Expression_ en anglais)](/fr/docs/Glossaire/IIFE). + +### Remontée (_hoisting_) des expressions de fonction + +En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition : + +```js +nonRemontée(); // TypeError: nonRemontée is not a function + +var nonRemontée = function() { + console.log("truc"); +} +``` + +## Exemples + +L'exemple qui suit définit une fonction anonyme et l'assigne à une variable `x`. La fonction renvoie le carré de son paramètre : + +```js +var x = function(y) { + return y * y; +}; +``` + +### Expression nommée + +Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee). + +```js +var math = { + 'factorielle': function factorielle(n) { + if (n <= 1) { + return 1; + } + return n * factorielle(n - 1); + } +}; +``` + +La variable affectée à l'expression de fonction aura une propriété `name`. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) : + +```js +var toto = function() {}; +console.log(toto.name); // "toto" + +var toto2 = toto; +console.log(toto2.name); // "toto" + +var truc = function machin() {} +console.log(truc.name); // "machin" +``` + +### IIFE pour _Immediately Invoked Function Expression_ ou expression de fonction immédiatement appelée + +On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition : + +```js +var a = "coucou"; +var b = "monde"; + +// IIFE +(function(x, y) { + console.log(x + " " + y); +})(a, b); +// coucou monde +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.function")}} + +## Voir aussi + +- {{jsxref("Fonctions", "Fonctions et portée des fonctions")}} +- {{jsxref("Objets_globaux/Function","L'objet Function")}} +- {{jsxref("Instructions/function", "Instruction function")}} +- {{jsxref("Instructions/function*", "Instruction function*")}} +- {{jsxref("Opérateurs/function*", "Expression function*")}} +- {{jsxref("GeneratorFunction")}} +- [Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) +- [Les expressions de fonctions asynchrones (l'opérateur `async function`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function) +- [Les déclarations de fonctions asynchrones (l'instruction `async function`)](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html deleted file mode 100644 index 8ffb95d5bd..0000000000 --- a/files/fr/web/javascript/reference/operators/function_star_/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Expression function* -slug: Web/JavaScript/Reference/Operators/function* -tags: - - ECMAScript 2015 - - Function - - Iterator - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/function* -original_slug: Web/JavaScript/Reference/Opérateurs/function* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Le mot-clé <strong><code>function*</code></strong> peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">function* [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { - <em>instructions</em> -}</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>nom</code></dt> - <dd>Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction <em>anonyme</em>. Le nom sera local par rapport au corps de la fonction.</dd> - <dt><code>paramN</code></dt> - <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd> - <dt><code>instructions</code></dt> - <dd>Les instructions qui forment le corps de la fonction.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Une expression <code>function*</code> est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression <code>function*</code> et une instruction <code>function*</code> est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice<em> anonyme</em>. Voir également le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> pour plus d'informations.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable <code>x</code>. Cette fonction génèrera le carré de son argument :</p> - -<pre class="brush: js">var x = function*(y) { - yield y * y; -}; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.function_star")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> - <li>L'objet {{jsxref("GeneratorFunction")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol">Le protocole itérateur</a></li> - <li>{{jsxref("Opérateurs/yield", "yield")}}</li> - <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li> - <li>L'objet {{jsxref("Function")}}</li> - <li>L'instruction {{jsxref("Instructions/function", "function")}}</li> - <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li> - <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.md b/files/fr/web/javascript/reference/operators/function_star_/index.md new file mode 100644 index 0000000000..2585ad0c1b --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function_star_/index.md @@ -0,0 +1,70 @@ +--- +title: Expression function* +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function* +original_slug: Web/JavaScript/Reference/Opérateurs/function* +--- +{{jsSidebar("Operators")}} + +Le mot-clé **`function*`** peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression. + +{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}} + +## Syntaxe + + function* [nom]([param1[, param2[, ..., paramN]]]) { + instructions + } + +### Paramètres + +- `nom` + - : Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction _anonyme_. Le nom sera local par rapport au corps de la fonction. +- `paramN` + - : Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments. +- `instructions` + - : Les instructions qui forment le corps de la fonction. + +## Description + +Une expression `function*` est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression `function*` et une instruction `function*` est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice _anonyme_. Voir également le chapitre sur les [fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour plus d'informations. + +## Exemples + +L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable `x`. Cette fonction génèrera le carré de son argument : + +```js +var x = function*(y) { + yield y * y; +}; +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.function_star")}} + +## Voir aussi + +- L'instruction {{jsxref("Instructions/function*", "function*")}} +- L'objet {{jsxref("GeneratorFunction")}} +- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol) +- {{jsxref("Opérateurs/yield", "yield")}} +- {{jsxref("Opérateurs/yield*", "yield*")}} +- L'objet {{jsxref("Function")}} +- L'instruction {{jsxref("Instructions/function", "function")}} +- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}} +- {{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}} diff --git a/files/fr/web/javascript/reference/operators/greater_than/index.html b/files/fr/web/javascript/reference/operators/greater_than/index.html deleted file mode 100644 index 84d44509a0..0000000000 --- a/files/fr/web/javascript/reference/operators/greater_than/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Supérieur strict (>) -slug: Web/JavaScript/Reference/Operators/Greater_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.greater_than -translation-of: Web/JavaScript/Reference/Operators/Greater_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur supérieur strict (<code>></code>) renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit et <code>false</code> sinon.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x > y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="number_to_number_comparison">Comparaison numérique</h3> - -<pre class="brush: js"> -console.log(5 > 3); // true -console.log(3 > 3); // false -console.log(3 > 5); // false -</pre> - -<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3> - -<pre class="brush: js"> -console.log(5n > 3); // true -console.log(3 > 5n); // false -</pre> - -<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("a" > "b"); // false -console.log("a" > "a"); // false -console.log("a" > "3"); // true -</pre> - -<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("5" > 3); // true -console.log("3" > 3); // false -console.log("3" > 5); // false - -console.log("coucou" > 5); // false -console.log(5 > "coucou"); // false - -console.log("5" > 3n); // true -console.log("3" > 5n); // false -</pre> - -<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3> - -<pre class="brush: js"> -console.log(true > false); // true -console.log(false > true); // false - -console.log(true > 0); // true -console.log(true > 1); // false - -console.log(null > 0); // false -console.log(1 > null); // true - -console.log(undefined > 3); // false -console.log(3 > undefined); // false - -console.log(3 > NaN); // false -console.log(NaN > 3); // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/greater_than/index.md b/files/fr/web/javascript/reference/operators/greater_than/index.md new file mode 100644 index 0000000000..a9e72a200e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/greater_than/index.md @@ -0,0 +1,97 @@ +--- +title: Supérieur strict (>) +slug: Web/JavaScript/Reference/Operators/Greater_than +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.greater_than +--- +{{jsSidebar("Operators")}} + +L'opérateur supérieur strict (`>`) renvoie `true` si l'opérande gauche est strictement supérieur à l'opérande droit et `false` sinon. + +{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}} + +## Syntaxe + +```js +x > y +``` + +## Description + +Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme. + +## Exemples + +### Comparaison numérique + +```js +console.log(5 > 3); // true +console.log(3 > 3); // false +console.log(3 > 5); // false +``` + +### Comparaison entre un nombre et un BigInt + +```js +console.log(5n > 3); // true +console.log(3 > 5n); // false +``` + +### Comparaison entre chaînes de caractères + +```js +console.log("a" > "b"); // false +console.log("a" > "a"); // false +console.log("a" > "3"); // true +``` + +### Comparaison entre nombres et chaînes de caractères + +```js +console.log("5" > 3); // true +console.log("3" > 3); // false +console.log("3" > 5); // false + +console.log("coucou" > 5); // false +console.log(5 > "coucou"); // false + +console.log("5" > 3n); // true +console.log("3" > 5n); // false +``` + +### Comparaison avec des booléens, null, undefined, NaN + +```js +console.log(true > false); // true +console.log(false > true); // false + +console.log(true > 0); // true +console.log(true > 1); // false + +console.log(null > 0); // false +console.log(1 > null); // true + +console.log(undefined > 3); // false +console.log(3 > undefined); // false + +console.log(3 > NaN); // false +console.log(NaN > 3); // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) +- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html deleted file mode 100644 index 4737d5161d..0000000000 --- a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Supérieur ou égal (>=) -slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.greater_than_or_equal -translation-of: Web/JavaScript/Reference/Operators/Greater_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur supérieur ou égal (<code>>=</code>) renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit et <code>false</code> sinon.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x >= y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="number_to_number_comparison">Comparaison numérique</h3> - -<pre class="brush: js"> -console.log(5 >= 3); // true -console.log(3 >= 3); // true -console.log(3 >= 5); // false -</pre> - -<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3> - -<pre class="brush: js"> -console.log(5n >= 3); // true -console.log(3 >= 3n); // true -console.log(3 >= 5n); // false -</pre> - -<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("a" >= "b"); // false -console.log("a" >= "a"); // true -console.log("a" >= "3"); // true -</pre> - -<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("5" >= 3); // true -console.log("3" >= 3); // true -console.log("3" >= 5); // false - -console.log("coucou" >= 5); // false -console.log(5 >= "coucou"); // false -</pre> - -<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3> - -<pre class="brush: js"> -console.log(true >= false); // true -console.log(true >= true); // true -console.log(false >= true); // false - -console.log(true >= 0); // true -console.log(true >= 1); // true - -console.log(null >= 0); // true -console.log(1 >= null); // true - -console.log(undefined >= 3); // false -console.log(3 >= undefined); // false - -console.log(3 >= NaN); // false -console.log(NaN >= 3); // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md new file mode 100644 index 0000000000..f1a7c6bb8b --- /dev/null +++ b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md @@ -0,0 +1,96 @@ +--- +title: Supérieur ou égal (>=) +slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.greater_than_or_equal +--- +{{jsSidebar("Operators")}} + +L'opérateur supérieur ou égal (`>=`) renvoie `true` si l'opérande gauche est supérieur ou égal à l'opérande droit et `false` sinon. + +{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}} + +## Syntaxe + +```js +x >= y +``` + +## Description + +Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme. + +## Exemples + +### Comparaison numérique + +```js +console.log(5 >= 3); // true +console.log(3 >= 3); // true +console.log(3 >= 5); // false +``` + +### Comparaison entre un nombre et un BigInt + +```js +console.log(5n >= 3); // true +console.log(3 >= 3n); // true +console.log(3 >= 5n); // false +``` + +### Comparaison entre chaînes de caractères + +```js +console.log("a" >= "b"); // false +console.log("a" >= "a"); // true +console.log("a" >= "3"); // true +``` + +### Comparaison entre nombres et chaînes de caractères + +```js +console.log("5" >= 3); // true +console.log("3" >= 3); // true +console.log("3" >= 5); // false + +console.log("coucou" >= 5); // false +console.log(5 >= "coucou"); // false +``` + +### Comparaison avec des booléens, null, undefined, NaN + +```js +console.log(true >= false); // true +console.log(true >= true); // true +console.log(false >= true); // false + +console.log(true >= 0); // true +console.log(true >= 1); // true + +console.log(null >= 0); // true +console.log(1 >= null); // true + +console.log(undefined >= 3); // false +console.log(3 >= undefined); // false + +console.log(3 >= NaN); // false +console.log(NaN >= 3); // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) +- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/fr/web/javascript/reference/operators/grouping/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html deleted file mode 100644 index 50bc0b5125..0000000000 --- a/files/fr/web/javascript/reference/operators/grouping/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Opérateur de groupement -slug: Web/JavaScript/Reference/Operators/Grouping -tags: - - JavaScript - - Operator - - Primary Expressions -translation_of: Web/JavaScript/Reference/Operators/Grouping -original_slug: Web/JavaScript/Reference/Opérateurs/Groupement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de groupement <code>( )</code> contrôle la précédence de l'évaluation dans les expressions.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"> ( )</pre> - -<h2 id="Description">Description</h2> - -<p>L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la <a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">précédence normale des opérateurs </a>afin que les expressions dont la précédence est plus basse soient évaluées avant.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.</p> - -<pre class="brush:js">var a = 1; -var b = 2; -var c = 3; - -// précédence normale -a + b * c // 7 -// l'évaluation est effectuée de cette façon -a + (b * c) // 7 - -// précédence surchargée avec le groupement -// on additionne avant de multiplier -(a + b) * c // 9 - -// mathématiquement, cela est équivalent à -a * c + b * c // 9 -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale, implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.grouping")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">Précédence des opérators</a></li> - <li>{{jsxref("Operators/delete", "delete")}}</li> - <li>{{jsxref("Operators/typeof", "typeof")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/grouping/index.md b/files/fr/web/javascript/reference/operators/grouping/index.md new file mode 100644 index 0000000000..0705c32d1e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/grouping/index.md @@ -0,0 +1,64 @@ +--- +title: Opérateur de groupement +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/Grouping +original_slug: Web/JavaScript/Reference/Opérateurs/Groupement +--- +{{jsSidebar("Operators")}} + +L'opérateur de groupement `( )` contrôle la précédence de l'évaluation dans les expressions. + +{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}} + +## Syntaxe + + ( ) + +## Description + +L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la [précédence normale des opérateurs ](/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs)afin que les expressions dont la précédence est plus basse soient évaluées avant. + +## Exemples + +Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement. + +```js +var a = 1; +var b = 2; +var c = 3; + +// précédence normale +a + b * c // 7 +// l'évaluation est effectuée de cette façon +a + (b * c) // 7 + +// précédence surchargée avec le groupement +// on additionne avant de multiplier +(a + b) * c // 9 + +// mathématiquement, cela est équivalent à +a * c + b * c // 9 +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.grouping")}} + +## Voir aussi + +- [Précédence des opérators](/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs) +- {{jsxref("Operators/delete", "delete")}} +- {{jsxref("Operators/typeof", "typeof")}} diff --git a/files/fr/web/javascript/reference/operators/in/index.html b/files/fr/web/javascript/reference/operators/in/index.html deleted file mode 100644 index da96f277bc..0000000000 --- a/files/fr/web/javascript/reference/operators/in/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: L'opérateur in -slug: Web/JavaScript/Reference/Operators/in -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/in -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>opérateur <code>in</code></strong> renvoie <code>true</code> si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>propriété</em> in <em>nomObjet</em> -</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>propriété</code></dt> - <dd>Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.</dd> - <dt><code>nomObjet</code></dt> - <dd>Le nom de l'objet qu'on souhaite inspecter.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Les exemples suivants illustrent certaines utilisation de l'opérateur <code>in</code>.</p> - -<pre class="brush: js">// Tableaux -var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"]; -0 in arbres // renvoie true -3 in arbres // renvoie true -6 in arbres // renvoie false -"hêtre" in arbres // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice) -"length" in arbres // renvoie true (length est une propriété des objets Array) -Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6) - -// Objets prédéfinis -"PI" in Math // renvoie true -var ma_chaine = new String("corail"); -"length" in ma_chaine // renvoie true - -// Objets personnalisés -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; -"marque" in voiture // renvoie true -"modèle" in voiture // renvoie true -"marque" in voiture // renvoie true -"Accord" in voiture // renvoie false -</pre> - -<p>L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur <code>String</code>, mais pas une chaîne littérale.</p> - -<pre class="brush: js">var couleur1 = new String("vert"); -"length" in couleur1 // renvoie true -var couleur2 = "corail"; -"length" in couleur2 // génère une erreur (couleur n'est pas un objet String) -</pre> - -<h3 id="Utilisation_de_l'opérateur_in_avec_des_propriétés_supprimées_ou_indéfinies">Utilisation de l'opérateur <code>in</code> avec des propriétés supprimées ou indéfinies</h3> - -<p>Si une propriété est supprimée avec l'opérateur <code><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete">delete</a></code>, l'opérateur <code>in</code> renvoie <code>false</code> pour cette propriété.</p> - -<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; -delete voiture.marque; -"marque" in voiture // renvoie false - -var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); -delete arbres[3]; -3 in arbres // renvoie false -</pre> - -<p>Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur <code>in</code> renverra <code>true</code> pour cette propriété.</p> - -<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; -voiture.marque = undefined; -"marque" in voiture // renvoie true - -var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); -arbres[3] = undefined; -3 in arbres // renvoie true -</pre> - -<h3 id="Propriétés_héritées">Propriétés héritées</h3> - -<p>L'opérateur <code>in</code> renvoie <code>true</code> pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.</p> - -<pre class="brush: js">"toString" in {}; // renvoie true</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.in")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/for...in","for...in")}}</li> - <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li> - <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> - <li>{{jsxref("Reflect.has()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable des propriétés et rattachement</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/in/index.md b/files/fr/web/javascript/reference/operators/in/index.md new file mode 100644 index 0000000000..cb4f40c8e2 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/in/index.md @@ -0,0 +1,117 @@ +--- +title: L'opérateur in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/in +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in +--- +{{jsSidebar("Operators")}} + +L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype). + +{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}} + +## Syntaxe + + propriété in nomObjet + +### Paramètres + +- `propriété` + - : Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau. +- `nomObjet` + - : Le nom de l'objet qu'on souhaite inspecter. + +## Description + +Les exemples suivants illustrent certaines utilisation de l'opérateur `in`. + +```js +// Tableaux +var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"]; +0 in arbres // renvoie true +3 in arbres // renvoie true +6 in arbres // renvoie false +"hêtre" in arbres // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice) +"length" in arbres // renvoie true (length est une propriété des objets Array) +Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6) + +// Objets prédéfinis +"PI" in Math // renvoie true +var ma_chaine = new String("corail"); +"length" in ma_chaine // renvoie true + +// Objets personnalisés +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +"marque" in voiture // renvoie true +"modèle" in voiture // renvoie true +"marque" in voiture // renvoie true +"Accord" in voiture // renvoie false +``` + +L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur `String`, mais pas une chaîne littérale. + +```js +var couleur1 = new String("vert"); +"length" in couleur1 // renvoie true +var couleur2 = "corail"; +"length" in couleur2 // génère une erreur (couleur n'est pas un objet String) +``` + +### Utilisation de l'opérateur `in` avec des propriétés supprimées ou indéfinies + +Si une propriété est supprimée avec l'opérateur [`delete`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete), l'opérateur `in` renvoie `false` pour cette propriété. + +```js +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +delete voiture.marque; +"marque" in voiture // renvoie false + +var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); +delete arbres[3]; +3 in arbres // renvoie false +``` + +Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur `in` renverra `true` pour cette propriété. + +```js +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +voiture.marque = undefined; +"marque" in voiture // renvoie true + +var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); +arbres[3] = undefined; +3 in arbres // renvoie true +``` + +### Propriétés héritées + +L'opérateur `in` renvoie `true` pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}. + +```js +"toString" in {}; // renvoie true +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.4. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.in")}} + +## Voir aussi + +- {{jsxref("Instructions/for...in","for...in")}} +- {{jsxref("Opérateurs/L_opérateur_delete","delete")}} +- {{jsxref("Object.prototype.hasOwnProperty()")}} +- {{jsxref("Reflect.has()")}} +- [Caractère énumérable des propriétés et rattachement](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) diff --git a/files/fr/web/javascript/reference/operators/increment/index.html b/files/fr/web/javascript/reference/operators/increment/index.html deleted file mode 100644 index ab9d79b09f..0000000000 --- a/files/fr/web/javascript/reference/operators/increment/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Incrémentation (++) -slug: Web/JavaScript/Reference/Operators/Increment -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.increment -translation_of: Web/JavaScript/Reference/Operators/Increment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'incrémentation (<code>++</code>) permet d'incrémenter (c'est-à-dire d'ajouter un) à son opérande et de renvoyer une valeur qui est le résultat avant ou après la modification.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var>++ ou ++<var>x</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans <code><var>x</var>++</code>, l'opérateur incrémentera la valeur et renverra la valeur avant l'incrément.</p> - -<p>Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans <code>++<var>x</var></code>, l'opérateur incrémentera la valeur et renverra la valeur après l'incrément.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="postfix_increment">Incrément en suffixe</h3> - -<pre class="brush: js">let x = 3; -let y = x++; - -// y = 3 -// x = 4 -</pre> - -<h3 id="prefix_increment">Incrément en préfixe</h3> - -<pre class="brush: js">let a = 2; -let b = ++a; - -// a = 3 -// b = 3 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur de plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/increment/index.md b/files/fr/web/javascript/reference/operators/increment/index.md new file mode 100644 index 0000000000..cedb7c38b6 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/increment/index.md @@ -0,0 +1,70 @@ +--- +title: Incrémentation (++) +slug: Web/JavaScript/Reference/Operators/Increment +tags: + - JavaScript + - Language feature + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Increment +browser-compat: javascript.operators.increment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'incrémentation (`++`) permet d'incrémenter (c'est-à-dire d'ajouter un) à son opérande et de renvoyer une valeur qui est le résultat avant ou après la modification. + +{{EmbedInteractiveExample("pages/js/expressions-increment.html")}} + +## Syntaxe + +```js +Opérateur : x++ ou ++x +``` + +## Description + +Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans `x++`, l'opérateur incrémentera la valeur et renverra la valeur avant l'incrément. + +Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans `++x`, l'opérateur incrémentera la valeur et renverra la valeur après l'incrément. + +## Exemples + +### Incrément en suffixe + +```js +let x = 3; +let y = x++; + +// y = 3 +// x = 4 +``` + +### Incrément en préfixe + +```js +let a = 2; +let b = ++a; + +// a = 3 +// b = 3 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur de plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/index.html b/files/fr/web/javascript/reference/operators/index.html deleted file mode 100644 index 48e7718b29..0000000000 --- a/files/fr/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Expressions et opérateurs -slug: Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Landing page - - Operators - - Overview - - Reference -translation_of: Web/JavaScript/Reference/Operators -original_slug: Web/JavaScript/Reference/Opérateurs -browser-compat: javascript.operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés pour le langage JavaScript.</p> - -<h2 id="expressions_and_operators_by_category">Expressions et opérateurs par catégorie</h2> - -<p>Pour une liste triée par ordre alphabétique, voir sur la barre de navigation à gauche.</p> - -<h3 id="primary_expressions">Expressions primaires</h3> - -<p>Mots-clés de base et expressions générales en JavaScript.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a></dt> - <dd>Le mot-clé <code>this</code> fait référence à une propriété spéciale indiquant le contexte d'exécution.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/function"><code>function</code></a></dt> - <dd>Le mot-clé <code>function</code> définit une expression de fonction.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/class"><code>class</code></a></dt> - <dd>Le mot-clé <code>class</code> définit une expression de classe.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/function*"><code>function*</code></a></dt> - <dd>Le mot-clé <code>function*</code> définit une expression de générateur.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield"><code>yield</code></a></dt> - <dd>Ce mot-clé permet de suspendre ou de reprendre l'exécution d'une fonction génératrice.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield*"><code>yield*</code></a></dt> - <dd>Ce mot-clé délègue à une autre fonction génératrice ou à un objet itérable.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/async_function"><code>async function</code></a></dt> - <dd>Le couple de mots-clés <code>async function</code> définit une expression de fonction asynchrone.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a></dt> - <dd>Ce mot-clé permet de suspendre et de reprendre l'exécution d'une fonction asynchrone et d'attendre la résolution ou l'échec de la promesse.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>[]</code></a></dt> - <dd>Syntaxe d'initialisation littérale pour les tableaux.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer"><code>{}</code></a></dt> - <dd>Syntaxe d'initialisation littérale pour les objets.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>/ab+c/i</code></a></dt> - <dd>Syntaxe pour les expressions littérales d'expressions rationnelles.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Grouping"><code>( )</code></a></dt> - <dd>Opérateur de groupement.</dd> -</dl> - -<h3 id="left-hand-side_expressions">Expression « vers la gauche »</h3> - -<p>Les valeurs situées à gauche sont la cible de l'affectation.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Accesseurs de propriété</a></dt> - <dd>Les opérateurs d'accès aux membres permettent d'accéder à une propriété ou à une méthode d'un objet.<br> - (cela regroupe <code>objet.propriete</code> et <code>objet["propriete"]</code>).</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></dt> - <dd>L'opérateur <code>new</code> crée une instance grâce à un constructeur.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a></dt> - <dd>Pour les constructeurs, <code>new.target</code> fait référence au constructeur invoqué avec <a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt> - <dd>Un objet qui expose des métadonnées spécifiques au contexte pour un module JavaScript.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/super"><code>super</code></a></dt> - <dd>Le mot-clé <code>super</code> appelle le constructeur parent.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax"><code>...obj</code></a></dt> - <dd>La syntaxe de décomposition permet de développer une expression là où plusieurs arguments (dans le cas des appels à une fonction) ou là où plusieurs éléments (dans le cas des tableaux) sont attendus.</dd> -</dl> - -<h3 id="increment_and_decrement">Incrémentation et décrémentation</h3> - -<p>Des opérateurs préfixes ou suffixes pour incrémenter/décrémenter.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment"><code>A++</code></a></dt> - <dd>L'opérateur d'incrémentation suffixe.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement"><code>A--</code></a></dt> - <dd>L'opérateur de décrémentation suffixe.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment"><code>++A</code></a></dt> - <dd>L'opérateur d'incrémentation préfixe.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement"><code>--A</code></a></dt> - <dd>L'opérateur de décrémentation préfixe.</dd> -</dl> - -<h3 id="unary_operators">Opérateurs unaires</h3> - -<p>Une opération unaire est une opération qui ne manipule qu'un seul opérande.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a></dt> - <dd>L'opérateur <code>delete</code> permet de supprimer une propriété d'un objet.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/void"><code>void</code></a></dt> - <dd>L'opérateur <code>void</code> permet d'ignorer la valeur de retour d'une expression.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a></dt> - <dd>L'opérateur <code>typeof</code> détermine le type d'un objet donné.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus"><code>+</code></a></dt> - <dd>L'opérateur unaire <code>+</code> convertit son opérande en une valeur de type <code>number</code>.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation"><code>-</code></a></dt> - <dd>L'opérateur unaire <code>-</code> convertit son opérande en nombre puis prend son opposé.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT"><code>~</code></a></dt> - <dd>L'opérateur binaire NON.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT"><code>!</code></a></dt> - <dd>L'opérateur logique NON.</dd> -</dl> - -<h3 id="arithmetic_operators">Opérateurs arithmétiques</h3> - -<p>Les opérateurs arithmétiques utilisent des valeurs numériques (littérales ou variables) pour leurs opérandes et renvoient une seule valeur numérique en résultat.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition"><code>+</code></a></dt> - <dd>L'opérateur d'addition.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction"><code>-</code></a></dt> - <dd>L'opérateur de soustraction.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division"><code>/</code></a></dt> - <dd>L'opérateur de division.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication"><code>*</code></a></dt> - <dd>L'opérateur de multiplication.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder"><code>%</code></a></dt> - <dd>L'opérateur du reste.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation"><code>**</code></a></dt> - <dd>L'opérateur d'exponentiation.</dd> -</dl> - -<h3 id="relational_operators">Opérateurs relationnels</h3> - -<p>Un opérateur de comparaison compare ses opérandes et renvoie une valeur booléenne en fonction de la vérité de cette comparaison.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a></dt> - <dd>L'opérateur <code>in</code> détermine la présence d'une propriété donnée au sein d'un objet.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a></dt> - <dd>L'opérateur <code>instanceof</code> détermine si un objet est une instance d'un autre objet.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than"><code><</code></a></dt> - <dd>L'opérateur d'infériorité strict.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than"><code>></code></a></dt> - <dd>L'opérateur de supériorité stricte.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal"><code><=</code></a></dt> - <dd>L'opérateur d'infériorité.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal"><code>>=</code></a></dt> - <dd>L'opérateur de supériorité.</dd> -</dl> - -<div class="notecard note"> -<p><strong>Note :</strong> <code>=></code> n'est pas un opérateur mais la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">les fonctions fléchées</a>.</p> -</div> - -<h3 id="equality_operators">Opérateurs d'égalité</h3> - -<p>Le résultat de l'évaluation fournie par un opérateur d'égalité est toujours un booléen, fonction de la vérité de la comparaison effectuée.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality"><code>==</code></a></dt> - <dd>L'opérateur d'égalité.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality"><code>!=</code></a></dt> - <dd>L'opérateur d'inégalité.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality"><code>===</code></a></dt> - <dd>L'opérateur d'identité.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality"><code>!==</code></a></dt> - <dd>L'opérateur d'inégalité stricte.</dd> -</dl> - -<h3 id="bitwise_shift_operators">Opérateurs de décalage binaires</h3> - -<p>Ces opérations permettent de décaler les bits de la représentation binaire de l'opérande.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift"><code><<</code></a></dt> - <dd>Opérateur de décalage binaire à gauche.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift"><code>>></code></a></dt> - <dd>Opérateur de décalage binaire à droite.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift"><code>>>></code></a></dt> - <dd>Opérateur de décalage binaire à droite non signé.</dd> -</dl> - -<h3 id="Binary_bitwise_operators">Opérateurs binaires booléens</h3> - -<p>Ces opérateurs manipulent leurs opérandes comme des ensembles de 32 bits et renvoient des valeurs numériques standard.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND"><code>&</code></a></dt> - <dd>Opérateur ET/AND binaire.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR"><code>|</code></a></dt> - <dd>Opérateur OU/OR binaire.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR"><code>^</code></a></dt> - <dd>Opérateur OU exclusif/XOR binaire.</dd> -</dl> - -<h3 id="binary_logical_operators">Opérateurs logiques</h3> - -<p>Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes, quand c'est le cas, la valeur de retour de l'expression est une valeur booléenne.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND"><code>&&</code></a></dt> - <dd>Opérateur logique ET/AND.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR"><code>||</code></a></dt> - <dd>Opérateur logique OU/OR.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"><code>??</code></a></dt> - <dd>Opérateur de coalescence des nuls.</dd> -</dl> - -<h3 id="conditional_ternary_operator">Opérateur conditionnel ternaire</h3> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"><code>(condition ? ifTrue : ifFalse)</code></a></dt> - <dd> - <p>L'opérateur conditionnel renvoie une valeur parmi deux selon la valeur logique de la condition portée par le premier opérande.</p> - </dd> -</dl> - -<h3 id="optional_chaining_operator">Opérateur de chaînage optionnel</h3> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining"><code>?.</code></a></dt> - <dd> - <p>L'opérateur de chaînage optionnel renvoie <code>undefined</code> plutôt que de causer une erreur si une référence vaut <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>.</p> - </dd> -</dl> - -<h3 id="assignment_operators">Opérateurs d'affectation</h3> - -<p>Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en fonction de la valeur de son opérande droit.</p> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Assignment"><code>=</code></a></dt> - <dd>Opérateur d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment"><code>*=</code></a></dt> - <dd>Opérateur de multiplication et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment"><code>**=</code></a></dt> - <dd>Opérateur d'exponentiation et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment"><code>/=</code></a></dt> - <dd>Opérateur de division et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment"><code>%=</code></a></dt> - <dd>Opérateur de reste et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment"><code>+=</code></a></dt> - <dd>Opérateur d'addition et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment"><code>-=</code></a></dt> - <dd>Opérateur de soustraction et d'affectation</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment"><code><<=</code></a></dt> - <dd>Opérateur de décalage à gauche et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment"><code>>>=</code></a></dt> - <dd>Opérateur de décalage à droite et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment"><code>>>>=</code></a></dt> - <dd>Opérateur de décalage à droite non signé et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment"><code>&=</code></a></dt> - <dd>Opérateur binaire ET et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment"><code>^=</code></a></dt> - <dd>Opérateur binaire OU exclusif et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment"><code>|=</code></a></dt> - <dd>Opérateur binaire OU et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment"><code>&&=</code></a></dt> - <dd>Opérateur booléen ET et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment"><code>||=</code></a></dt> - <dd>Opérateur booléen OU et d'affectation.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment"><code>??=</code></a></dt> - <dd>Opérateur d'affectation et de logique nulle.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"><code>[a, b] = [1, 2]</code></a><br> - <a href="/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"><code>{a, b} = {a:1, b:2}</code></a></dt> - <dd> - <p>L'affectation par décomposition permet d'affecter les propriétés d'un tableau ou d'un objet à des variables en utilisant une syntaxe similaire à celle des littéraux pour les tableaux et les objets.</p> - </dd> -</dl> - -<h3 id="comma_operator">Opérateur virgule</h3> - -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator"><code>,</code></a></dt> - <dd>L'opérateur virgule permet d'évaluer plusieurs expressions dans une seule instruction et renvoie le résultat de la dernière expression.</dd> -</dl> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Précédence des opérateurs en JavaScript</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/index.md b/files/fr/web/javascript/reference/operators/index.md new file mode 100644 index 0000000000..f042113b24 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/index.md @@ -0,0 +1,248 @@ +--- +title: Expressions et opérateurs +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Landing page + - Operators + - Overview + - Reference +translation_of: Web/JavaScript/Reference/Operators +original_slug: Web/JavaScript/Reference/Opérateurs +browser-compat: javascript.operators +--- +{{jsSidebar("Operators")}} + +Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés pour le langage JavaScript. + +## Expressions et opérateurs par catégorie + +Pour une liste triée par ordre alphabétique, voir sur la barre de navigation à gauche. + +### Expressions primaires + +Mots-clés de base et expressions générales en JavaScript. + +- [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) + - : Le mot-clé `this` fait référence à une propriété spéciale indiquant le contexte d'exécution. +- [`function`](/fr/docs/Web/JavaScript/Reference/Operators/function) + - : Le mot-clé `function` définit une expression de fonction. +- [`class`](/fr/docs/Web/JavaScript/Reference/Operators/class) + - : Le mot-clé `class` définit une expression de classe. +- [`function*`](/fr/docs/Web/JavaScript/Reference/Operators/function*) + - : Le mot-clé `function*` définit une expression de générateur. +- [`yield`](/fr/docs/Web/JavaScript/Reference/Operators/yield) + - : Ce mot-clé permet de suspendre ou de reprendre l'exécution d'une fonction génératrice. +- [`yield*`](/fr/docs/Web/JavaScript/Reference/Operators/yield*) + - : Ce mot-clé délègue à une autre fonction génératrice ou à un objet itérable. +- [`async function`](/fr/docs/Web/JavaScript/Reference/Operators/async_function) + - : Le couple de mots-clés `async function` définit une expression de fonction asynchrone. +- [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) + - : Ce mot-clé permet de suspendre et de reprendre l'exécution d'une fonction asynchrone et d'attendre la résolution ou l'échec de la promesse. +- [`[]`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) + - : Syntaxe d'initialisation littérale pour les tableaux. +- [`{}`](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer) + - : Syntaxe d'initialisation littérale pour les objets. +- [`/ab+c/i`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) + - : Syntaxe pour les expressions littérales d'expressions rationnelles. +- [`( )`](/fr/docs/Web/JavaScript/Reference/Operators/Grouping) + - : Opérateur de groupement. + +### Expression « vers la gauche » + +Les valeurs situées à gauche sont la cible de l'affectation. + +- [Accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) + - : Les opérateurs d'accès aux membres permettent d'accéder à une propriété ou à une méthode d'un objet. + (cela regroupe `objet.propriete` et `objet["propriete"]`). +- [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new) + - : L'opérateur `new` crée une instance grâce à un constructeur. +- [`new.target`](/fr/docs/Web/JavaScript/Reference/Operators/new.target) + - : Pour les constructeurs, `new.target` fait référence au constructeur invoqué avec [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). +- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Statements/import.meta) + - : Un objet qui expose des métadonnées spécifiques au contexte pour un module JavaScript. +- [`super`](/fr/docs/Web/JavaScript/Reference/Operators/super) + - : Le mot-clé `super` appelle le constructeur parent. +- [`...obj`](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax) + - : La syntaxe de décomposition permet de développer une expression là où plusieurs arguments (dans le cas des appels à une fonction) ou là où plusieurs éléments (dans le cas des tableaux) sont attendus. + +### Incrémentation et décrémentation + +Des opérateurs préfixes ou suffixes pour incrémenter/décrémenter. + +- [`A++`](/fr/docs/Web/JavaScript/Reference/Operators/Increment) + - : L'opérateur d'incrémentation suffixe. +- [`A--`](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) + - : L'opérateur de décrémentation suffixe. +- [`++A`](/fr/docs/Web/JavaScript/Reference/Operators/Increment) + - : L'opérateur d'incrémentation préfixe. +- [`--A`](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) + - : L'opérateur de décrémentation préfixe. + +### Opérateurs unaires + +Une opération unaire est une opération qui ne manipule qu'un seul opérande. + +- [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete) + - : L'opérateur `delete` permet de supprimer une propriété d'un objet. +- [`void`](/fr/docs/Web/JavaScript/Reference/Operators/void) + - : L'opérateur `void` permet d'ignorer la valeur de retour d'une expression. +- [`typeof`](/fr/docs/Web/JavaScript/Reference/Operators/typeof) + - : L'opérateur `typeof` détermine le type d'un objet donné. +- [`+`](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) + - : L'opérateur unaire `+` convertit son opérande en une valeur de type `number`. +- [`-`](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) + - : L'opérateur unaire `-` convertit son opérande en nombre puis prend son opposé. +- [`~`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT) + - : L'opérateur binaire NON. +- [`!`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT) + - : L'opérateur logique NON. + +### Opérateurs arithmétiques + +Les opérateurs arithmétiques utilisent des valeurs numériques (littérales ou variables) pour leurs opérandes et renvoient une seule valeur numérique en résultat. + +- [`+`](/fr/docs/Web/JavaScript/Reference/Operators/Addition) + - : L'opérateur d'addition. +- [`-`](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) + - : L'opérateur de soustraction. +- [`/`](/fr/docs/Web/JavaScript/Reference/Operators/Division) + - : L'opérateur de division. +- [`*`](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) + - : L'opérateur de multiplication. +- [`%`](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) + - : L'opérateur du reste. +- [`**`](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) + - : L'opérateur d'exponentiation. + +### Opérateurs relationnels + +Un opérateur de comparaison compare ses opérandes et renvoie une valeur booléenne en fonction de la vérité de cette comparaison. + +- [`in`](/fr/docs/Web/JavaScript/Reference/Operators/in) + - : L'opérateur `in` détermine la présence d'une propriété donnée au sein d'un objet. +- [`instanceof`](/fr/docs/Web/JavaScript/Reference/Operators/instanceof) + - : L'opérateur `instanceof` détermine si un objet est une instance d'un autre objet. +- [`<`](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) + - : L'opérateur d'infériorité strict. +- [`>`](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than) + - : L'opérateur de supériorité stricte. +- [`<=`](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) + - : L'opérateur d'infériorité. +- [`>=`](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) + - : L'opérateur de supériorité. + +> **Note :** `=>` n'est pas un opérateur mais la notation utilisée pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions). + +### Opérateurs d'égalité + +Le résultat de l'évaluation fournie par un opérateur d'égalité est toujours un booléen, fonction de la vérité de la comparaison effectuée. + +- [`==`](/fr/docs/Web/JavaScript/Reference/Operators/Equality) + - : L'opérateur d'égalité. +- [`!=`](/fr/docs/Web/JavaScript/Reference/Operators/Inequality) + - : L'opérateur d'inégalité. +- [`===`](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) + - : L'opérateur d'identité. +- [`!==`](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) + - : L'opérateur d'inégalité stricte. + +### Opérateurs de décalage binaires + +Ces opérations permettent de décaler les bits de la représentation binaire de l'opérande. + +- [`<<`](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift) + - : Opérateur de décalage binaire à gauche. +- [`>>`](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift) + - : Opérateur de décalage binaire à droite. +- [`>>>`](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) + - : Opérateur de décalage binaire à droite non signé. + +### Opérateurs binaires booléens + +Ces opérateurs manipulent leurs opérandes comme des ensembles de 32 bits et renvoient des valeurs numériques standard. + +- [`&`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) + - : Opérateur ET/AND binaire. +- [`|`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) + - : Opérateur OU/OR binaire. +- [`^`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR) + - : Opérateur OU exclusif/XOR binaire. + +### Opérateurs logiques + +Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes, quand c'est le cas, la valeur de retour de l'expression est une valeur booléenne. + +- [`&&`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND) + - : Opérateur logique ET/AND. +- [`||`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR) + - : Opérateur logique OU/OR. +- [`??`](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) + - : Opérateur de coalescence des nuls. + +### Opérateur conditionnel ternaire + +- [`(condition ? ifTrue : ifFalse)`](/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) + - : L'opérateur conditionnel renvoie une valeur parmi deux selon la valeur logique de la condition portée par le premier opérande. + +### Opérateur de chaînage optionnel + +- [`?.`](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining) + - : L'opérateur de chaînage optionnel renvoie `undefined` plutôt que de causer une erreur si une référence vaut [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined). + +### Opérateurs d'affectation + +Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en fonction de la valeur de son opérande droit. + +- [`=`](/fr/docs/Web/JavaScript/Reference/Operators/Assignment) + - : Opérateur d'affectation. +- [`*=`](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment) + - : Opérateur de multiplication et d'affectation. +- [`**=`](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment) + - : Opérateur d'exponentiation et d'affectation. +- [`/=`](/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment) + - : Opérateur de division et d'affectation. +- [`%=`](/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment) + - : Opérateur de reste et d'affectation. +- [`+=`](/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment) + - : Opérateur d'addition et d'affectation. +- [`-=`](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment) + - : Opérateur de soustraction et d'affectation +- [`<<=`](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) + - : Opérateur de décalage à gauche et d'affectation. +- [`>>=`](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) + - : Opérateur de décalage à droite et d'affectation. +- [`>>>=`](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) + - : Opérateur de décalage à droite non signé et d'affectation. +- [`&=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) + - : Opérateur binaire ET et d'affectation. +- [`^=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment) + - : Opérateur binaire OU exclusif et d'affectation. +- [`|=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) + - : Opérateur binaire OU et d'affectation. +- [`&&=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment) + - : Opérateur booléen ET et d'affectation. +- [`||=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) + - : Opérateur booléen OU et d'affectation. +- [`??=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment) + - : Opérateur d'affectation et de logique nulle. +- [`[a, b] = [1, 2]`](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) + [`{a, b} = {a:1, b:2}`](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) + - : L'affectation par décomposition permet d'affecter les propriétés d'un tableau ou d'un objet à des variables en utilisant une syntaxe similaire à celle des littéraux pour les tableaux et les objets. + +### Opérateur virgule + +- [`,`](/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator) + - : L'opérateur virgule permet d'évaluer plusieurs expressions dans une seule instruction et renvoie le résultat de la dernière expression. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Précédence des opérateurs en JavaScript](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) diff --git a/files/fr/web/javascript/reference/operators/inequality/index.html b/files/fr/web/javascript/reference/operators/inequality/index.html deleted file mode 100644 index d9465f8ba5..0000000000 --- a/files/fr/web/javascript/reference/operators/inequality/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Inégalité (!=) -slug: Web/JavaScript/Reference/Operators/Inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.inequality -translation-of: Web/JavaScript/Reference/Operators/Inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'inégalité (<code>!=</code>) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">d'inégalité stricte</a>, l'opérateur d'inégalité tente une conversion de ses opérandes avant la comparaison si ceux-ci sont de types différents.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x != y -</pre> - -<h2 id="description">Description</h2> - -<p>L'opérateur d'inégalité vérifie si ses deux opérandes ne sont pas égaux. Il s'agit de la négation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a> et les deux lignes suivantes fourniront donc toujours le même résultat :</p> - -<pre class="brush: js"> -x != y -!(x == y) -</pre> - -<p>Pour plus de détails sur l'algorithme de comparaison utilisé, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">la page relative à l'opérateur d'égalité</a>. -</p> - -<p>À l'instar de l'opérateur d'égalité, l'opérateur d'inégalité tentera une conversion des opérandes si ceux-ci ne sont pas de même type :</p> - -<pre class="brush: js"> -3 != "3"; // false -</pre> - -<p>Si cette conversion implicite n'est pas souhaitable et qu'on souhaite considérer des valeurs de types différents comme étant différentes, on privilégiera <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">l'opérateur d'inégalité stricte</a> à la place :</p> - -<pre class="brush: js"> -3 !== "3"; // true -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="comparison_with_no_type_conversion">Comparaison sans conversion de types</h3> - -<pre class="brush: js"> -1 != 2; // true -"hello" != "hola"; // true - -1 != 1; // false -"hello" != "hello"; // false -</pre> - -<h3 id="comparison_with_type_conversion">Comparaison avec conversion de types</h3> - -<pre class="brush: js"> -"1" != 1; // false -1 != "1"; // false -0 != false; // false -0 != null; // true -0 != undefined; // true -0 != !!null; // false, voir la documentation pour !! -0 != !!undefined; // false, voir la documentation pour !! -null != undefined; // false - -const number1 = new Number(3); -const number2 = new Number(3); -number1 != 3; // false -number1 != number2; // true -</pre> - -<h3 id="comparison_of_objects">Comparaison d'objets</h3> - -<pre class="brush: js"> -const objet1 = {"clé": "valeur"} -const objet2 = {"clé": "valeur"}; - -objet1 != objet2 // true -objet2 != objet2 // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/inequality/index.md b/files/fr/web/javascript/reference/operators/inequality/index.md new file mode 100644 index 0000000000..7d54f35adb --- /dev/null +++ b/files/fr/web/javascript/reference/operators/inequality/index.md @@ -0,0 +1,98 @@ +--- +title: Inégalité (!=) +slug: Web/JavaScript/Reference/Operators/Inequality +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.inequality +--- +{{jsSidebar("Operators")}} + +L'opérateur d'inégalité (`!=`) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de l'opérateur [d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality), l'opérateur d'inégalité tente une conversion de ses opérandes avant la comparaison si ceux-ci sont de types différents. + +{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}} + +## Syntaxe + +```js +x != y +``` + +## Description + +L'opérateur d'inégalité vérifie si ses deux opérandes ne sont pas égaux. Il s'agit de la négation de [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) et les deux lignes suivantes fourniront donc toujours le même résultat : + +```js +x != y +!(x == y) +``` + +Pour plus de détails sur l'algorithme de comparaison utilisé, voir [la page relative à l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality). + +À l'instar de l'opérateur d'égalité, l'opérateur d'inégalité tentera une conversion des opérandes si ceux-ci ne sont pas de même type : + +```js +3 != "3"; // false +``` + +Si cette conversion implicite n'est pas souhaitable et qu'on souhaite considérer des valeurs de types différents comme étant différentes, on privilégiera [l'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) à la place : + +```js +3 !== "3"; // true +``` + +## Exemples + +### Comparaison sans conversion de types + +```js +1 != 2; // true +"hello" != "hola"; // true + +1 != 1; // false +"hello" != "hello"; // false +``` + +### Comparaison avec conversion de types + +```js +"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +0 != !!null; // false, voir la documentation pour !! +0 != !!undefined; // false, voir la documentation pour !! +null != undefined; // false + +const number1 = new Number(3); +const number2 = new Number(3); +number1 != 3; // false +number1 != number2; // true +``` + +### Comparaison d'objets + +```js +const objet1 = {"clé": "valeur"} +const objet2 = {"clé": "valeur"}; + +objet1 != objet2 // true +objet2 != objet2 // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) +- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index c620472cbe..0000000000 --- a/files/fr/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -tags: - - JavaScript - - Operator - - Prototype - - Reference - - instanceof -translation_of: Web/JavaScript/Reference/Operators/instanceof -original_slug: Web/JavaScript/Reference/Opérateurs/instanceof ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>opérateur <code>instanceof</code></strong> permet de tester si un objet possède, dans sa chaîne de prototype, la propriété <code>prototype</code> d'un certain constructeur.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><em>objet</em> instanceof <em>constructeur</em></pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>objet</code></dt> - <dd>L'objet qu'on souhaite analyser.</dd> - <dt><code>constructeur</code></dt> - <dd>La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'opérateur <code>instanceof</code> teste la présence de <code>constructeur.prototype</code> dans la chaîne de prototypes d'<code>objet</code>.</p> - -<pre class="brush: js notranslate">function C(){} // Définition du constructeur -function D(){} // Définition d'un autre constructeur - -var o = new C(); - -// true, car : Object.getPrototypeOf(o) === C.prototype -o instanceof C; - -// false, car D.prototype n'existe pas dans la chaîne de prototype de o -o instanceof D; - -o instanceof Object; // true, car: -C.prototype instanceof Object // true - -C.prototype = {}; -var o2 = new C(); - -o2 instanceof C; // true - -// false, car C.prototype n'existe plus dans la chaîne de prototype de o -o instanceof C; - -D.prototype = new C(); // Utilisation de l'héritage -var o3 = new D(); -o3 instanceof D; // true -o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3 -</pre> - -<p>À noter que la valeur retournée par <code>instanceof</code> peut être différente suite à un changement de la propriété <code>prototype</code> du constructeur, notamment via la méthode <code>Object.setPrototypeOf()</code>. On peut aussi utiliser la pseudo-propriété <code>__proto__</code> qui n'était pas standard avant ECMAScript 2015.</p> - -<h3 id="instanceof_dans_dautres_contextes_frames_ou_fenêtres"><code>instanceof</code> dans d'autres contextes (frames ou fenêtres)</h3> - -<p>Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, <code>[] instanceof window.frames[0].Array</code> renverra <code>false</code>, car <code>Array !== </code><code>window.frames[0].Array</code> et que les tableaux héritent de leur constructeur.</p> - -<p>Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser <code>Array.isArray(myObj)</code> pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.</p> - -<p>Ainsi, pour vérifier qu'un <a href="/fr/docs/Web/API/Node">nœud</a> est bien un objet de type <a href="/fr/docs/Web/API/SVGElement">SVGElement</a> dans un autre contexte, on pourra utiliser <code>monNœud instanceof monNœud.documentMaitre.vue.SVGElement</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Démonstration_que_String_et_Date_sont_de_type_Object_et_cas_aux_limites_des_littéraux">Démonstration que <code>String</code> et <code>Date</code> sont de type <code>Object</code> et cas aux limites des littéraux</h3> - -<p>Le code suivant utilise <code>instanceof</code> pour démontrer que les objets <code>String</code> et <code>Date</code> sont aussi de type <code>Object</code> (ils dérivent d'<code>Object</code>).</p> - -<p>Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, <code>instanceof Object</code> renvoie <code>true</code>.</p> - -<pre class="brush: js notranslate">var chaîneSimple = "Une chaîne simple"; -var maChaîne = new String(); -var newChaîne = new String("Chaîne créée avec un constructeur"); -var maDate = new Date(); -var monObjet = {}; -var monNonObjet = Object.create(null); - -chaîneSimple instanceof String; //false car le prototype vaut undefined -maChaîne instanceof String; // true -newChaîne instanceof String; // true -maChaîne instanceof Object; // true - -monObjet instanceof Object; // true, bien que le protoype soit undefined -({}) instanceof Object; // true, comme pour le cas précédent -monNonObjet instance Object; // false - -maChaîne instanceof Date; // false - -maDate instanceof Date; // true -maDate instanceof Object; // true -maDate instanceof String; // false -</pre> - -<h3 id="Démonstration_que_mavoiture_est_de_type_Voiture_et_de_type_Object">Démonstration que <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code></h3> - -<p>Le code suivant créé un objet de type <code>Voiture</code> et une instance de cet objet, <code>mavoiture</code>. L'opérateur <code>instanceof</code> montre que l'objet <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code>.</p> - -<pre class="brush: js notranslate">function Voiture(fabricant, modele, annee) { - this.fabricant = fabricant; - this.modele = modele; - this.annee = annee; -} -var mavoiture = new Voiture("Citroën", "C3", 2006); -var a = mavoiture instanceof Voiture; // retourne true -var b = mavoiture instanceof Object; // retourne true -</pre> - -<h3 id="Attention_à_la_précédence_des_opérateurs">Attention à la précédence des opérateurs</h3> - -<p>Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test <code>!(monObj instanceof Constructor)</code>. Toutefois, attention à ne pas écrire <code>!monObj instanceof Constructor</code> car <code>!monObj</code> serait traité en priorité et on testerait donc <code>false instanceof Constructor</code> qui sera toujours faux.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.4.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.instanceof")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}</li> - <li>{{jsxref("Symbol.hasInstance")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.md b/files/fr/web/javascript/reference/operators/instanceof/index.md new file mode 100644 index 0000000000..b6bb3248cd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/instanceof/index.md @@ -0,0 +1,140 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Operator + - Prototype + - Reference + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +original_slug: Web/JavaScript/Reference/Opérateurs/instanceof +--- +{{jsSidebar("Operators")}} + +L'**opérateur `instanceof`** permet de tester si un objet possède, dans sa chaîne de prototype, la propriété `prototype` d'un certain constructeur. + +{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}} + +## Syntaxe + + objet instanceof constructeur + +### Paramètres + +- `objet` + - : L'objet qu'on souhaite analyser. +- `constructeur` + - : La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes. + +## Description + +L'opérateur `instanceof` teste la présence de `constructeur.prototype` dans la chaîne de prototypes d'`objet`. + +```js +function C(){} // Définition du constructeur +function D(){} // Définition d'un autre constructeur + +var o = new C(); + +// true, car : Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, car D.prototype n'existe pas dans la chaîne de prototype de o +o instanceof D; + +o instanceof Object; // true, car: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, car C.prototype n'existe plus dans la chaîne de prototype de o +o instanceof C; + +D.prototype = new C(); // Utilisation de l'héritage +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3 +``` + +À noter que la valeur retournée par `instanceof` peut être différente suite à un changement de la propriété `prototype` du constructeur, notamment via la méthode `Object.setPrototypeOf()`. On peut aussi utiliser la pseudo-propriété `__proto__` qui n'était pas standard avant ECMAScript 2015. + +### `instanceof` dans d'autres contextes (frames ou fenêtres) + +Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, `[] instanceof window.frames[0].Array` renverra `false`, car ` Array !== ``window.frames[0].Array` et que les tableaux héritent de leur constructeur. + +Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser `Array.isArray(myObj)` pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau. + +Ainsi, pour vérifier qu'un [nœud](/fr/docs/Web/API/Node) est bien un objet de type [SVGElement](/fr/docs/Web/API/SVGElement) dans un autre contexte, on pourra utiliser `monNœud instanceof monNœud.documentMaitre.vue.SVGElement`. + +## Exemples + +### Démonstration que `String` et `Date` sont de type `Object` et cas aux limites des littéraux + +Le code suivant utilise `instanceof` pour démontrer que les objets `String` et `Date` sont aussi de type `Object` (ils dérivent d'`Object`). + +Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, `instanceof Object` renvoie `true`. + +```js +var chaîneSimple = "Une chaîne simple"; +var maChaîne = new String(); +var newChaîne = new String("Chaîne créée avec un constructeur"); +var maDate = new Date(); +var monObjet = {}; +var monNonObjet = Object.create(null); + +chaîneSimple instanceof String; //false car le prototype vaut undefined +maChaîne instanceof String; // true +newChaîne instanceof String; // true +maChaîne instanceof Object; // true + +monObjet instanceof Object; // true, bien que le protoype soit undefined +({}) instanceof Object; // true, comme pour le cas précédent +monNonObjet instance Object; // false + +maChaîne instanceof Date; // false + +maDate instanceof Date; // true +maDate instanceof Object; // true +maDate instanceof String; // false +``` + +### Démonstration que `mavoiture` est de type `Voiture` et de type `Object` + +Le code suivant créé un objet de type `Voiture` et une instance de cet objet, `mavoiture`. L'opérateur `instanceof` montre que l'objet `mavoiture` est de type `Voiture` et de type `Object`. + +```js +function Voiture(fabricant, modele, annee) { + this.fabricant = fabricant; + this.modele = modele; + this.annee = annee; +} +var mavoiture = new Voiture("Citroën", "C3", 2006); +var a = mavoiture instanceof Voiture; // retourne true +var b = mavoiture instanceof Object; // retourne true +``` + +### Attention à la précédence des opérateurs + +Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test `!(monObj instanceof Constructor)`. Toutefois, attention à ne pas écrire `!monObj instanceof Constructor` car `!monObj` serait traité en priorité et on testerait donc `false instanceof Constructor` qui sera toujours faux. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.4. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.instanceof")}} + +## Voir aussi + +- {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} +- {{jsxref("Symbol.hasInstance")}} diff --git a/files/fr/web/javascript/reference/operators/left_shift/index.html b/files/fr/web/javascript/reference/operators/left_shift/index.html deleted file mode 100644 index 325adc9947..0000000000 --- a/files/fr/web/javascript/reference/operators/left_shift/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Décalage binaire à gauche (<<) -slug: Web/JavaScript/Reference/Operators/Left_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.left_shift -translation-of: Web/JavaScript/Reference/Operators/Left_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de <strong>décalage binaire à gauche (<code><<</code>)</strong> décale la séquence de bits représentée par le premier opérande d'autant de bits vers la gauche que le nombre indiqué par le second opérande. Les bits en excès à gauche sont écartés et des bits à zéro sont introduits à droite.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> << <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Cet opérateur décale les bits du premier opérande vers la gauche, d'autant que le nombre indiqué par le second opérande. Les bits qui dépassent à gauche sont abandonnés et des zéros sont introduits à droite.</p> - -<p>Ainsi, <code>9 << 2</code> donnera la valeur 36 (en base 10) :</p> - -<pre class="brush: js"> - 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- - 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Le décalage binaire de tout nombre <code>x</code> de <code>y</code> bits vers la gauche donnera comme résultat <code>x * 2 ** y</code>. Par exemple, <code>9 << 3</code> pourra être reformulé en <code>9 * (2 ** 3) = 9 * (8) = 72</code>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_left_shift">Utiliser le décalage binaire à gauche</h3> - -<pre class="brush: js"> -9 << 3; // 72 - -// 9 * (2 ** 3) = 9 * (8) = 72 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">L'opérateur de décalage binaire à gauche et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/left_shift/index.md b/files/fr/web/javascript/reference/operators/left_shift/index.md new file mode 100644 index 0000000000..f1749017db --- /dev/null +++ b/files/fr/web/javascript/reference/operators/left_shift/index.md @@ -0,0 +1,59 @@ +--- +title: Décalage binaire à gauche (<<) +slug: Web/JavaScript/Reference/Operators/Left_shift +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.left_shift +--- +{{jsSidebar("Operators")}} + +L'opérateur de **décalage binaire à gauche (`<<`)** décale la séquence de bits représentée par le premier opérande d'autant de bits vers la gauche que le nombre indiqué par le second opérande. Les bits en excès à gauche sont écartés et des bits à zéro sont introduits à droite. + +{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}} + +## Syntaxe + +```js +a << b +``` + +## Description + +Cet opérateur décale les bits du premier opérande vers la gauche, d'autant que le nombre indiqué par le second opérande. Les bits qui dépassent à gauche sont abandonnés et des zéros sont introduits à droite. + +Ainsi, `9 << 2` donnera la valeur 36 (en base 10) : + +```js + 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- + 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +``` + +Le décalage binaire de tout nombre `x` de `y` bits vers la gauche donnera comme résultat `x * 2 ** y`. Par exemple, `9 << 3` pourra être reformulé en `9 * (2 ** 3) = 9 * (8) = 72`. + +## Exemples + +### Utiliser le décalage binaire à gauche + +```js +9 << 3; // 72 + +// 9 * (2 ** 3) = 9 * (8) = 72 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur de décalage binaire à gauche et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) diff --git a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html deleted file mode 100644 index 85b349301b..0000000000 --- a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Affectation après décalage à gauche (<<=) -slug: Web/JavaScript/Reference/Operators/Left_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation-of: Web/JavaScript/Reference/Operators/Left_shift_assignment -browser-compat: javascript.operators.left_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de décalage à gauche et d'affectation (<code><<=</code>) décale la séquence de bits représentée par l'opérande gauche d'autant de bits qu'indiqué par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x <<= y -<strong>Signification :</strong> x = x << y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_left_shift_assignment">Utiliser l'opérateur de décalage à gauche et d'affectation</h3> - -<pre class="brush: js"> -let a = 5; -// 00000000000000000000000000000101 - -a <<= 2; // 20 -// 00000000000000000000000000010100 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift">L'opérateur de décalage à gauche binaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md new file mode 100644 index 0000000000..a19e39c4f8 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: Affectation après décalage à gauche (<<=) +slug: Web/JavaScript/Reference/Operators/Left_shift_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.left_shift_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de décalage à gauche et d'affectation (`<<=`) décale la séquence de bits représentée par l'opérande gauche d'autant de bits qu'indiqué par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x <<= y +Signification : x = x << y +``` + +## Exemples + +### Utiliser l'opérateur de décalage à gauche et d'affectation + +```js +let a = 5; +// 00000000000000000000000000000101 + +a <<= 2; // 20 +// 00000000000000000000000000010100 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de décalage à gauche binaire](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift) diff --git a/files/fr/web/javascript/reference/operators/less_than/index.html b/files/fr/web/javascript/reference/operators/less_than/index.html deleted file mode 100644 index 5748798f15..0000000000 --- a/files/fr/web/javascript/reference/operators/less_than/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Inférieur strict (<) -slug: Web/JavaScript/Reference/Operators/Less_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation-of: Web/JavaScript/Reference/Operators/Less_than -browser-compat: javascript.operators.less_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur inférieur strict (<code><</code>) renvoie <code>true</code> si son opérande gauche est strictement inférieur à son opérande droit et <code>false</code> sinon.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x < y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a> résumé comme suit :</p> - -<ul> - <li>Tout d'abord, les objets sont convertis en valeurs primitives avec <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> en utilisant le paramètre <code>hint</code> avec la valeur <code>'number'</code>.</li> - <li>Si les deux valeurs sont des chaînes de caractères, elles sont comparées comme telles selon les valeurs des codes Unicode qu'elles contiennent.</li> - <li>Sinon, le moteur JavaScript tente de convertir les valeurs primitives non-numériques en valeurs numériques : - <ul> - <li>Les valeurs booléennes <code>true</code> et <code>false</code> sont respectivement converties en 1 et 0.</li> - <li><code>null</code> est converti en 0.</li> - <li><code>undefined</code> est converti en <code>NaN</code>.</li> - <li>Les chaînes de caractères sont converties en fonction de la valeur qu'elles contiennent et, si elles ne contiennent pas de valeurs numériques, elles sont converties en <code>NaN</code>.</li> - </ul> - </li> - <li>Si l'une des valeurs vaut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>, l'opérateur renverra <code>false</code>.</li> - <li>Sinon, les valeurs sont comparées numériquement.</li> -</ul> - -<h2 id="examples">Exemples</h2> - -<h3 id="number_to_number_comparison">Comparaison numérique</h3> - -<pre class="brush: js"> -console.log(5 < 3); // false -console.log(3 < 3); // false -console.log(3 < 5); // true -</pre> - -<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3> - -<pre class="brush: js"> -console.log(5n < 3); // false -console.log(3 < 5n); // true -</pre> - -<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("a" < "b"); // true -console.log("a" < "a"); // false -console.log("a" < "3"); // false -</pre> - -<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("5" < 3); // false -console.log("3" < 3); // false -console.log("3" < 5); // true - -console.log("coucou" < 5); // false -console.log(5 < "coucou"); // false - -console.log("5" < 3n); // false -console.log("3" < 5n); // true -</pre> - -<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3> - -<pre class="brush: js"> -console.log(true < false); // false -console.log(false < true); // true - -console.log(0 < true); // true -console.log(true < 1); // false - -console.log(null < 0); // false -console.log(null < 1); // true - -console.log(undefined < 3); // false -console.log(3 < undefined); // false - -console.log(3 < NaN); // false -console.log(NaN < 3); // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/less_than/index.md b/files/fr/web/javascript/reference/operators/less_than/index.md new file mode 100644 index 0000000000..1ba272b20e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/less_than/index.md @@ -0,0 +1,109 @@ +--- +title: Inférieur strict (<) +slug: Web/JavaScript/Reference/Operators/Less_than +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.less_than +--- +{{jsSidebar("Operators")}} + +L'opérateur inférieur strict (`<`) renvoie `true` si son opérande gauche est strictement inférieur à son opérande droit et `false` sinon. + +{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}} + +## Syntaxe + +```js +x < y +``` + +## Description + +Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison) résumé comme suit : + +- Tout d'abord, les objets sont convertis en valeurs primitives avec [`Symbol.ToPrimitive`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) en utilisant le paramètre `hint` avec la valeur `'number'`. +- Si les deux valeurs sont des chaînes de caractères, elles sont comparées comme telles selon les valeurs des codes Unicode qu'elles contiennent. +- Sinon, le moteur JavaScript tente de convertir les valeurs primitives non-numériques en valeurs numériques : + + - Les valeurs booléennes `true` et `false` sont respectivement converties en 1 et 0. + - `null` est converti en 0. + - `undefined` est converti en `NaN`. + - Les chaînes de caractères sont converties en fonction de la valeur qu'elles contiennent et, si elles ne contiennent pas de valeurs numériques, elles sont converties en `NaN`. + +- Si l'une des valeurs vaut [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN), l'opérateur renverra `false`. +- Sinon, les valeurs sont comparées numériquement. + +## Exemples + +### Comparaison numérique + +```js +console.log(5 < 3); // false +console.log(3 < 3); // false +console.log(3 < 5); // true +``` + +### Comparaison entre un nombre et un BigInt + +```js +console.log(5n < 3); // false +console.log(3 < 5n); // true +``` + +### Comparaison entre chaînes de caractères + +```js +console.log("a" < "b"); // true +console.log("a" < "a"); // false +console.log("a" < "3"); // false +``` + +### Comparaison entre nombres et chaînes de caractères + +```js +console.log("5" < 3); // false +console.log("3" < 3); // false +console.log("3" < 5); // true + +console.log("coucou" < 5); // false +console.log(5 < "coucou"); // false + +console.log("5" < 3n); // false +console.log("3" < 5n); // true +``` + +### Comparaison avec des booléens, null, undefined, NaN + +```js +console.log(true < false); // false +console.log(false < true); // true + +console.log(0 < true); // true +console.log(true < 1); // false + +console.log(null < 0); // false +console.log(null < 1); // true + +console.log(undefined < 3); // false +console.log(3 < undefined); // false + +console.log(3 < NaN); // false +console.log(NaN < 3); // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html deleted file mode 100644 index 19d84e0f8c..0000000000 --- a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Inférieur ou égal (<=) -slug: Web/JavaScript/Reference/Operators/Less_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation-of: Web/JavaScript/Reference/Operators/Less_than_or_equal -browser-compat: javascript.operators.less_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur inférieur ou égal (<code><=</code>) renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit et <code>false</code> sinon.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x <= y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="number_to_number_comparison">Comparaison numérique</h3> - -<pre class="brush: js"> -console.log(5 <= 3); // false -console.log(3 <= 3); // true -console.log(3 <= 5); // true -</pre> - -<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3> - -<pre class="brush: js"> -console.log(5n <= 3); // false -console.log(3 <= 3n); // true -console.log(3 <= 5n); // true -</pre> - -<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("a" <= "b"); // true -console.log("a" <= "a"); // true -console.log("a" <= "3"); // false -</pre> - -<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3> - -<pre class="brush: js"> -console.log("5" <= 3); // false -console.log("3" <= 3); // true -console.log("3" <= 5); // true - -console.log("coucou" <= 5); // false -console.log(5 <= "coucou"); // false -</pre> - -<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3> - -<pre class="brush: js"> -console.log(true <= false); // false -console.log(true <= true); // true -console.log(false <= true); // true - -console.log(true <= 0); // false -console.log(true <= 1); // true - -console.log(null <= 0); // true -console.log(1 <= null); // false - -console.log(undefined <= 3); // false -console.log(3 <= undefined); // false - -console.log(3 <= NaN); // false -console.log(NaN <= 3); // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md new file mode 100644 index 0000000000..c601782b2a --- /dev/null +++ b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md @@ -0,0 +1,96 @@ +--- +title: Inférieur ou égal (<=) +slug: Web/JavaScript/Reference/Operators/Less_than_or_equal +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.less_than_or_equal +--- +{{jsSidebar("Operators")}} + +L'opérateur inférieur ou égal (`<=`) renvoie `true` si l'opérande gauche est inférieur ou égal à l'opérande droit et `false` sinon. + +{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}} + +## Syntaxe + +```js +x <= y +``` + +## Description + +Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme. + +## Exemples + +### Comparaison numérique + +```js +console.log(5 <= 3); // false +console.log(3 <= 3); // true +console.log(3 <= 5); // true +``` + +### Comparaison entre un nombre et un BigInt + +```js +console.log(5n <= 3); // false +console.log(3 <= 3n); // true +console.log(3 <= 5n); // true +``` + +### Comparaison entre chaînes de caractères + +```js +console.log("a" <= "b"); // true +console.log("a" <= "a"); // true +console.log("a" <= "3"); // false +``` + +### Comparaison entre nombres et chaînes de caractères + +```js +console.log("5" <= 3); // false +console.log("3" <= 3); // true +console.log("3" <= 5); // true + +console.log("coucou" <= 5); // false +console.log(5 <= "coucou"); // false +``` + +### Comparaison avec des booléens, null, undefined, NaN + +```js +console.log(true <= false); // false +console.log(true <= true); // true +console.log(false <= true); // true + +console.log(true <= 0); // false +console.log(true <= 1); // true + +console.log(null <= 0); // true +console.log(1 <= null); // false + +console.log(undefined <= 3); // false +console.log(3 <= undefined); // false + +console.log(3 <= NaN); // false +console.log(NaN <= 3); // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) diff --git a/files/fr/web/javascript/reference/operators/logical_and/index.html b/files/fr/web/javascript/reference/operators/logical_and/index.html deleted file mode 100644 index c40d0a1c2c..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_and/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: ET logique (&&) -slug: Web/JavaScript/Reference/Operators/Logical_AND -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -browser-compat: javascript.operators.logical_and -translation-of: Web/JavaScript/Reference/Operators/Logical_AND ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur ET logique (<code>&&</code>) (conjonction logique) renvoie vrai si et uniquement si ses deux opérandes sont <code>true</code> ou équivalents à <code>true</code>. Il est généralement utilisé avec des valeurs booléennes et, quand c'est le cas, il renvoie une valeur booléenne. Toutefois, l'opérateur <code>&&</code> renvoie en fait la valeur d'un de ses opérandes et, si cet opérateur est utilisé avec des valeurs non-booléennes, il renverra une valeur non-booléenne.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>expr1</var> && <var>expr2</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Si <code>expr1</code> peut être converti en <code>true</code>, le résultat sera <code>expr2</code> ; sinon, ce sera <code>expr1</code>. -</p> - -<p>Si une valeur peut être convertie en <code>true</code>, elle peut être qualifiée de <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. Si une valeur peut être convertie en <code>false</code>, on la qualifiera alors de <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p> - -<p>Parmi les expressions qui peuvent être converties en <code>false</code>, on a :</p> - -<ul> - <li><code>null</code> ;</li> - <li><code>NaN</code> ;</li> - <li><code>0</code> ;</li> - <li>la chaîne de caractères vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li> - <li><code>undefined</code>.</li> -</ul> - -<p>Bien que l'opérateur <code>&&</code> puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">une valeur primitive booléenne</a>. Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT">opérateur NON (<code>!</code>)</a> ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean"><code>Boolean()</code></a>.</p> - -<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3> - -<p>L'expression utilisant un ET logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :</p> - -<p><code>(une expression équivalente à faux) && <var>expr</var></code> sera court-circuité pour fournir directement le résultat de l'expression équivalente à faux.</p> - -<p>Cette notion de court-circuit indique que la partie <code><var>expr</var></code> ci-avant <strong>n'est pas évaluée</strong>, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :</p> - -<pre class="brush: js"> -function A(){ - console.log('A a été appelée'); - return false; -} - -function B(){ - console.log('B a été appelée'); - return true; -} - -console.log( A() && B() ); -// affichera "A a été appelée" dans la console via l'appel de la fonction -// puis affichera false (la valeur du résultat de l'expression avec l'opérateur) -// on voit que la fonction B n'est pas du tout appelée -</pre> - -<h3 id="operator_precedence">Précédence des opérateurs</h3> - -<p>Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur <code>&&</code> est exécuté avant l'opérateur <code>||</code> (voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">l'article sur la précédence des opérateurs</a>).</p> - -<pre class="brush: js"> -true || false && false // renvoie true, car && est exécuté en premier -(true || false) && false // renvoie false, car la précédence par défaut ne s'applique pas - // avec les parenthèses -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_AND">Utiliser le ET logique</h3> - -<p>Le code suivant illustre quelques usages de l'opérateur ET logique <code>&&</code>.</p> - -<pre class="brush: js"> -a1 = true && true // t && t renvoie true -a2 = true && false // t && f renvoie false -a3 = false && true // f && t renvoie false -a4 = false && (3 == 4) // f && f renvoie false -a5 = 'Chat' && 'Chien' // t && t renvoie "Chien" -a6 = false && 'Chat' // f && t renvoie false -a7 = 'Chat' && false // t && f renvoie false -a8 = '' && false // f && f renvoie "" -a9 = false && '' // f && f renvoie false -</pre> - -<h3 id="conversion_rules_for_booleans">Règles de conversion booléennes</h3> - -<h4 id="converting_and_to_or">Convertir ET en OU</h4> - -<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p> - -<pre class="brush: js"> -bCondition1 && bCondition2 -</pre> - -<p>sera toujours équivalente à :</p> - -<pre class="brush: js"> -!(!bCondition1 || !bCondition2) -</pre> - -<h4 id="converting_or_to_and">Convertir OU en ET</h4> - -<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p> - -<pre class="brush: js"> -bCondition1 || bCondition2 -</pre> - -<p>sera toujours équivalente à :</p> - -<pre class="brush: js"> -!(!bCondition1 && !bCondition2) -</pre> - -<h3 id="removing_nested_parentheses">Retrait des parenthèses imbriquées</h3> - -<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.</p> - -<p>L'opération composite suivant, qui utilise des <strong>booléens</strong> :</p> - -<pre class="brush: js"> -bCondition1 || (bCondition2 && bCondition3) -</pre> - -<p>sera toujours égale à :</p> - -<pre class="brush: js"> -bCondition1 || bCondition2 && bCondition3 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li> - <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li> - <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_and/index.md b/files/fr/web/javascript/reference/operators/logical_and/index.md new file mode 100644 index 0000000000..ba907bd2c3 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_and/index.md @@ -0,0 +1,151 @@ +--- +title: ET logique (&&) +slug: Web/JavaScript/Reference/Operators/Logical_AND +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference +browser-compat: javascript.operators.logical_and +--- +{{jsSidebar("Operators")}} + +L'opérateur ET logique (`&&`) (conjonction logique) renvoie vrai si et uniquement si ses deux opérandes sont `true` ou équivalents à `true`. Il est généralement utilisé avec des valeurs booléennes et, quand c'est le cas, il renvoie une valeur booléenne. Toutefois, l'opérateur `&&` renvoie en fait la valeur d'un de ses opérandes et, si cet opérateur est utilisé avec des valeurs non-booléennes, il renverra une valeur non-booléenne. + +{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}} + +## Syntaxe + +```js +expr1 && expr2 +``` + +## Description + +Si `expr1` peut être converti en `true`, le résultat sera `expr2` ; sinon, ce sera `expr1`. + +Si une valeur peut être convertie en `true`, elle peut être qualifiée de [_truthy_](/fr/docs/Glossary/Truthy). Si une valeur peut être convertie en `false`, on la qualifiera alors de [_falsy_](/fr/docs/Glossary/Falsy). + +Parmi les expressions qui peuvent être converties en `false`, on a : + +- `null` ; +- `NaN` ; +- `0` ; +- la chaîne de caractères vide (`""` ou `''` ou ` `` `) ; +- `undefined`. + +Bien que l'opérateur `&&` puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en [une valeur primitive booléenne](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double [opérateur NON (`!`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT) ou le constructeur [`Boolean()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean). + +### Évaluation en court-circuit + +L'expression utilisant un ET logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante : + +`(une expression équivalente à faux) && expr` sera court-circuité pour fournir directement le résultat de l'expression équivalente à faux. + +Cette notion de court-circuit indique que la partie `expr` ci-avant **n'est pas évaluée**, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si `expr` est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple : + +```js +function A(){ + console.log('A a été appelée'); + return false; +} + +function B(){ + console.log('B a été appelée'); + return true; +} + +console.log( A() && B() ); +// affichera "A a été appelée" dans la console via l'appel de la fonction +// puis affichera false (la valeur du résultat de l'expression avec l'opérateur) +// on voit que la fonction B n'est pas du tout appelée +``` + +### Précédence des opérateurs + +Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur `&&` est exécuté avant l'opérateur `||` (voir [l'article sur la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)). + +```js +true || false && false // renvoie true, car && est exécuté en premier +(true || false) && false // renvoie false, car la précédence par défaut ne s'applique pas + // avec les parenthèses +``` + +## Exemples + +### Utiliser le ET logique + +Le code suivant illustre quelques usages de l'opérateur ET logique `&&`. + +```js +a1 = true && true // t && t renvoie true +a2 = true && false // t && f renvoie false +a3 = false && true // f && t renvoie false +a4 = false && (3 == 4) // f && f renvoie false +a5 = 'Chat' && 'Chien' // t && t renvoie "Chien" +a6 = false && 'Chat' // f && t renvoie false +a7 = 'Chat' && false // t && f renvoie false +a8 = '' && false // f && f renvoie "" +a9 = false && '' // f && f renvoie false +``` + +### Règles de conversion booléennes + +#### Convertir ET en OU + +L'opération suivante, utilisant des **booléens** : + +```js +bCondition1 && bCondition2 +``` + +sera toujours équivalente à : + +```js +!(!bCondition1 || !bCondition2) +``` + +#### Convertir OU en ET + +L'opération suivante, utilisant des **booléens** : + +```js +bCondition1 || bCondition2 +``` + +sera toujours équivalente à : + +```js +!(!bCondition1 && !bCondition2) +``` + +### Retrait des parenthèses imbriquées + +Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles. + +L'opération composite suivant, qui utilise des **booléens** : + +```js +bCondition1 || (bCondition2 && bCondition3) +``` + +sera toujours égale à : + +```js +bCondition1 || bCondition2 && bCondition3 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [_Truthy_](/fr/docs/Glossary/Truthy) +- [_Falsy_](/fr/docs/Glossary/Falsy) diff --git a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html deleted file mode 100644 index e788d794d6..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Affectation après ET logique (&&=) -slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment -tags: - - JavaScript - - Language feature - - Logical assignment - - Operator - - Reference -browser-compat: javascript.operators.logical_and_assignment -translation-of: Web/JavaScript/Reference/Operators/Logical_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après ET logique (<code>x &&= y</code>) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est <a href="/fr/docs/Glossary/Truthy">équivalent à vrai (<i>truthy</i>)</a>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>expr1</var> &&= <var>expr2</var> -</pre> - -<h2 id="description">Description</h2> - -<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3> - -<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND">ET logique</a> est évalué de gauche à droite et le moteur vérifie s'il peut utiliser un court-circuit avec la régle suivante :</p> - -<p><code>(une expression équivalente à faux) && expr</code> sera court-circuitée pour fournir directement l'expression équivalente à faux.</p> - -<p>Ce « court-circuit » indique que <code><var>expr</var></code> <strong>n'est pas évaluée</strong>. Tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas exécutée).</p> - -<p>L'opérateur d'affectation après ET logique utilise également ce court-circuit et <code>x &&= y</code> est donc équivalent à :</p> - -<pre class="brush: js"> -x && (x = y); -</pre> - -<p>En revanche, <strong>il n'est pas équivalent</strong> à ce qui suit, et qui effectue quoi qu'il arrive une affectation :</p> - -<pre class="brush: js example-bad"> -x = x && y; -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_logical_and_assignment">Utiliser l'affectation après ET logique</h3> - -<pre class="brush: js"> -let x = 0; -let y = 1; - -x &&= 0; // 0 -x &&= 1; // 0 -y &&= 1; // 1 -y &&= 0; // 0 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND">L'opérateur ET logique (&&)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur d'affectation après ET binaire (<code>&=</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Le type <code>Boolean</code></a> - <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li> - <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md new file mode 100644 index 0000000000..167b775d28 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md @@ -0,0 +1,75 @@ +--- +title: Affectation après ET logique (&&=) +slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment +tags: + - JavaScript + - Language feature + - Logical assignment + - Operator + - Reference +browser-compat: javascript.operators.logical_and_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après ET logique (`x &&= y`) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est [équivalent à vrai (_truthy_)](/fr/docs/Glossary/Truthy). + +{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}} + +## Syntaxe + +```js +expr1 &&= expr2 +``` + +## Description + +### Évaluation en court-circuit + +L'opérateur [ET logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND) est évalué de gauche à droite et le moteur vérifie s'il peut utiliser un court-circuit avec la régle suivante : + +`(une expression équivalente à faux) && expr` sera court-circuitée pour fournir directement l'expression équivalente à faux. + +Ce « court-circuit » indique que `expr` **n'est pas évaluée**. Tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple si `expr` est un appel de fonction, la fonction n'est pas exécutée). + +L'opérateur d'affectation après ET logique utilise également ce court-circuit et `x &&= y` est donc équivalent à : + +```js +x && (x = y); +``` + +En revanche, **il n'est pas équivalent** à ce qui suit, et qui effectue quoi qu'il arrive une affectation : + +```js example-bad +x = x && y; +``` + +## Exemples + +### Utiliser l'affectation après ET logique + +```js +let x = 0; +let y = 1; + +x &&= 0; // 0 +x &&= 1; // 0 +y &&= 1; // 1 +y &&= 0; // 0 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur ET logique (&&)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND) +- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [L'opérateur d'affectation après ET binaire (`&=`)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) +- [Le type `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [_Truthy_](/fr/docs/Glossary/Truthy) +- [_Falsy_](/fr/docs/Glossary/Falsy) diff --git a/files/fr/web/javascript/reference/operators/logical_not/index.html b/files/fr/web/javascript/reference/operators/logical_not/index.html deleted file mode 100644 index da1f26ea14..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_not/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: NON logique (!) -slug: Web/JavaScript/Reference/Operators/Logical_NOT -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -browser-compat: javascript.operators.logical_not -translation-of: Web/JavaScript/Reference/Operators/Logical_NOT ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur logique NON (<code>!</code>) prend l'opposé logique de la valeur fournie par son opérande. Vrai devient faux et vice versa. Il est généralement utilisé avec les <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">booléens</a>. Lorsque cet opérateur est utilisé avec une valeur non-booléenne, il renvoie <code>false</code> si son opérande peut être converti en <code>true</code> et <code>true</code> sinon.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -!<var>expr</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Cet opérateur renvoie <code>false</code> si son opérande peut être converti en <code>true</code> ; sinon il renvoie <code>true</code>.</p> - -<p>Si une valeur peut être convertie en <code>true</code>, on dira en anglais qu'elle est <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. À l'inverse, si elle peut être convertie en <code>false</code>, on dira en anglais qu'elle est <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p> - -<p>Voici des exemples d'expression qui peuvent être converties en <code>false</code> :</p> - -<ul> - <li><code>null</code> ;</li> - <li><code>NaN</code> ;</li> - <li><code>0</code> ;</li> - <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li> - <li><code>undefined</code>.</li> -</ul> - -<p>Bien que l'opérateur <code>!</code> puisse être utilisé avec des opérandes non booléens, sa valeur de retour sera toujours un <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">booléen</a>. Pour convertir une valeur (ou une expression) en sa valeur booléenne correspondante, on pourra utiliser un double NON ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_NOT">Utiliser NON</h3> - -<p>Le code suivant illustre l'utilisation de l'opérateur <code>!</code> pour le NON logique.</p> - -<pre class="brush: js"> -let n1 = !true // !t renvoie false -let n2 = !false // !f renvoie true -let n3 = !'' // !f renvoie true -let n4 = !'Cat' // !t renvoie false -</pre> - -<h3 id="Double_NOT_!!">Double NON (<code>!!</code>)</h3> - -<p>Il est possible d'utiliser deux opérateurs NON à la suite pour convertir n'importe quelle valeur en booléen selon qu'elle est <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a> ou <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p> - -<p>Une conversion équivalente pourra être obtenue avec le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p> - -<pre class="brush: js"> -let n1 = !!true // !!truthy renvoie true -let n2 = !!{} // !!truthy renvoie true : <strong>tout</strong> objet est truthy -let n3 = !!(new Boolean(false)) // Attention, un objet Boolean est toujours truthy ! -let n4 = !!false // !!falsy renvoie false -let n5 = !!"" // !!falsy renvoie false -let n6 = !!Boolean(false) // !!falsy renvoie false -</pre> - -<h3 id="Converting_between_NOTs">Équivalence booléenne de la double négation</h3> - -<p>L'expression qui suit, utilisée avec des booléens :</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>est toujours égale à :</p> - -<pre class="brush: js">bCondition</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_not/index.md b/files/fr/web/javascript/reference/operators/logical_not/index.md new file mode 100644 index 0000000000..783ba35fb0 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_not/index.md @@ -0,0 +1,94 @@ +--- +title: NON logique (!) +slug: Web/JavaScript/Reference/Operators/Logical_NOT +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference +browser-compat: javascript.operators.logical_not +--- +{{jsSidebar("Operators")}} + +L'opérateur logique NON (`!`) prend l'opposé logique de la valeur fournie par son opérande. Vrai devient faux et vice versa. Il est généralement utilisé avec les [booléens](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Lorsque cet opérateur est utilisé avec une valeur non-booléenne, il renvoie `false` si son opérande peut être converti en `true` et `true` sinon. + +{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}} + +## Syntaxe + +```js +!expr +``` + +## Description + +Cet opérateur renvoie `false` si son opérande peut être converti en `true` ; sinon il renvoie `true`. + +Si une valeur peut être convertie en `true`, on dira en anglais qu'elle est [_truthy_](/fr/docs/Glossary/Truthy). À l'inverse, si elle peut être convertie en `false`, on dira en anglais qu'elle est [_falsy_](/fr/docs/Glossary/Falsy). + +Voici des exemples d'expression qui peuvent être converties en `false` : + +- `null` ; +- `NaN` ; +- `0` ; +- la chaîne vide (`""` ou `''` ou ` `` `) ; +- `undefined`. + +Bien que l'opérateur `!` puisse être utilisé avec des opérandes non booléens, sa valeur de retour sera toujours un [booléen](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir une valeur (ou une expression) en sa valeur booléenne correspondante, on pourra utiliser un double NON ou le constructeur [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean). + +## Exemples + +### Utiliser NON + +Le code suivant illustre l'utilisation de l'opérateur `!` pour le NON logique. + +```js +let n1 = !true // !t renvoie false +let n2 = !false // !f renvoie true +let n3 = !'' // !f renvoie true +let n4 = !'Cat' // !t renvoie false +``` + +### Double NON (`!!`) + +Il est possible d'utiliser deux opérateurs NON à la suite pour convertir n'importe quelle valeur en booléen selon qu'elle est [_truthy_](/fr/docs/Glossary/Truthy) ou [_falsy_](/fr/docs/Glossary/Falsy). + +Une conversion équivalente pourra être obtenue avec le constructeur [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean). + +```js +let n1 = !!true // !!truthy renvoie true +let n2 = !!{} // !!truthy renvoie true : tout objet est truthy +let n3 = !!(new Boolean(false)) // Attention, un objet Boolean est toujours truthy ! +let n4 = !!false // !!falsy renvoie false +let n5 = !!"" // !!falsy renvoie false +let n6 = !!Boolean(false) // !!falsy renvoie false +``` + +### Équivalence booléenne de la double négation + +L'expression qui suit, utilisée avec des booléens : + +```js +!!bCondition +``` + +est toujours égale à : + +```js +bCondition +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- {{jsxref("Boolean")}} +- {{Glossary("Truthy")}} +- {{Glossary("Falsy")}} diff --git a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html deleted file mode 100644 index 4860c3558b..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Affectation après coalescence des nuls (??=) -slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -browser-compat: javascript.operators.logical_nullish_assignment -translation-of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après coalescence des nuls (<code>x ??= y</code>) effectue une affectation uniquement si l'opérande de gauche (<code>x</code>) vaut <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>undefined</code></a>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>expr1</var> ??= <var>expr2</var> -</pre> - -<h2 id="description">Description</h2> - -<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3> - -<p>L'opérateur de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">coalescence des nuls</a> est évalué de gauche à droite et le moteur teste s'il est possible d'utiliser un court-circuit grâce à la règle suivante :</p> - -<p><code>(une expression qui renvoie null ou undefined) ?? expr</code> sera court-circuité pour fournir l'opérande gauche si celle-ci ne vaut ni <code>null</code> ni <code>undefined</code>.</p> - -<p>Ce « court-circuit » implique que l'expression <code><var>expr</var></code> <strong>n'est pas évaluée</strong> si ce n'est pas nécessaire. Ainsi, tout effet de bord lié à celle-ci n'aura pas lieu (par exemple, si <code><var>expr</var></code> appelle une fonction, cette dernière n'est pas exécutée).</p> - -<p>L'opérateur d'affectation après coalescence des nuls obéit également à cette logique. Ainsi, <code>x ??= y</code> sera équivalent à :</p> - -<pre class="brush: js"> -x ?? (x = y); -</pre> - -<p>En revanche, ce ne sera pas équivalent à l'expression suivante qui effectue une affectation quoi qu'il arrive :</p> - -<pre class="brush: js example-bad"> -x = x ?? y; -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_logical_nullish_assignment">Utiliser l'opérateur d'affectation après coalescence des nuls</h3> - -<pre class="brush: js"> -function config(options) { - options.duration ??= 100; - options.speed ??= 25; - return options; -} - -config({ duration: 125 }); // { duration: 125, speed: 25 } -config({}); // { duration: 100, speed: 25 } -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li> - <li><a href="/fr/docs/Glossary/Nullish"><i>Nullish</i></a></li> - <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li> - <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md new file mode 100644 index 0000000000..907a4722a1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md @@ -0,0 +1,75 @@ +--- +title: Affectation après coalescence des nuls (??=) +slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference +browser-compat: javascript.operators.logical_nullish_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après coalescence des nuls (`x ??= y`) effectue une affectation uniquement si l'opérande de gauche (`x`) vaut [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null). + +{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}} + +## Syntaxe + +```js +expr1 ??= expr2 +``` + +## Description + +### Évaluation en court-circuit + +L'opérateur de [coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) est évalué de gauche à droite et le moteur teste s'il est possible d'utiliser un court-circuit grâce à la règle suivante : + +`(une expression qui renvoie null ou undefined) ?? expr` sera court-circuité pour fournir l'opérande gauche si celle-ci ne vaut ni `null` ni `undefined`. + +Ce « court-circuit » implique que l'expression `expr` **n'est pas évaluée** si ce n'est pas nécessaire. Ainsi, tout effet de bord lié à celle-ci n'aura pas lieu (par exemple, si `expr` appelle une fonction, cette dernière n'est pas exécutée). + +L'opérateur d'affectation après coalescence des nuls obéit également à cette logique. Ainsi, `x ??= y` sera équivalent à : + +```js +x ?? (x = y); +``` + +En revanche, ce ne sera pas équivalent à l'expression suivante qui effectue une affectation quoi qu'il arrive : + +```js example-bad +x = x ?? y; +``` + +## Exemples + +### Utiliser l'opérateur d'affectation après coalescence des nuls + +```js +function config(options) { + options.duration ??= 100; + options.speed ??= 25; + return options; +} + +config({ duration: 125 }); // { duration: 125, speed: 25 } +config({}); // { duration: 100, speed: 25 } +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [_Nullish_](/fr/docs/Glossary/Nullish) +- [_Truthy_](/fr/docs/Glossary/Truthy) +- [_Falsy_](/fr/docs/Glossary/Falsy) diff --git a/files/fr/web/javascript/reference/operators/logical_or/index.html b/files/fr/web/javascript/reference/operators/logical_or/index.html deleted file mode 100644 index 1ea61c09f6..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_or/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: OU logique (||) -slug: Web/JavaScript/Reference/Operators/Logical_OR -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -browser-compat: javascript.operators.logical_or -translation-of: Web/JavaScript/Reference/Operators/Logical_OR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur OU logique (<code>||</code>) (disjonction logique) renvoie vrai si et seulement si au moins un de ses opérandes est vrai. Cet opérateur est généralement utilisé avec des valeurs booléennes et, lorsque c'est le cas, il renvoie une valeur booléenne. Toutefois, <code>||</code> peut aussi être utilisé avec des valeurs non-booléennes et, dans ce cas, renverra une valeur non-booléenne.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}</div> - -<h2 id="syntax">Syntax</h2> - -<pre class="brush: js"> -<var>expr1</var> || <var>expr2</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Si <code>expr1</code> peut être converti en <code>true</code>, c'est <code>expr1</code> qui sera renvoyé, sinon ce sera <code>expr2</code>.</p> - -<p>Si une valeur peut être convertie en <code>true</code>, elle peut être qualifiée de <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. Si une valeur peut être convertie en <code>false</code>, on la qualifiera alors de <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p> - -<p>Parmi les expressions qui peuvent être converties en <code>false</code>, on a :</p> - -<ul> - <li><code>null</code> ;</li> - <li><code>NaN</code> ;</li> - <li><code>0</code> ;</li> - <li>la chaîne de caractères vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li> - <li><code>undefined</code>.</li> -</ul> - -<p>Bien que l'opérateur <code>||</code> puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">une valeur primitive booléenne</a>. Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT">opérateur NON (<code>!</code>)</a> ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean"><code>Boolean()</code></a>.</p> - -<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3> - -<p>L'expression utilisant un OU logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :</p> - -<p><code>(une expression équivalente à vrai) || <var>expr</var></code> sera court-circuité pour fournir directement le résultat de l'expression équivalente à vrai.</p> - -<p>Cette notion de court-circuit indique que la partie <code><var>expr</var></code> ci-avant <strong>n'est pas évaluée</strong>, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :</p> - -<pre class="brush: js"> -function A(){ - console.log('A a été appelée'); - return false; -} - -function B(){ - console.log('B a été appelée'); - return true; -} - -console.log( B() || A() ); -// affichera "B a été appelée" dans la console via l'appel de la fonction -// puis affichera true (la valeur du résultat de l'expression avec l'opérateur) -// on voit que la fonction A n'est pas du tout appelée -</pre> - -<h3 id="operator_precedence">Précédence des opérateurs</h3> - -<p>Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur <code>&&</code> est exécuté avant l'opérateur <code>||</code> (voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">l'article sur la précédence des opérateurs</a>).</p> - -<pre class="brush: js"> -true || false && false // renvoie true, car && est exécuté en premier -(true || false) && false // renvoie false, car la précédence par défaut ne s'applique pas - // avec les parenthèses -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_or">Utiliser le OU logique</h3> - -<p>Le code suivant illustre quelques usages de l'opérateur OU logique <code>||</code>.</p> - -<pre class="brush: js"> -o1 = true || true // t || t renvoie true -o2 = false || true // f || t renvoie true -o3 = true || false // t || f renvoie true -o4 = false || (3 == 4) // f || f renvoie false -o5 = 'Chat' || 'Chien' // t || t renvoie "Chat" -o6 = false || 'Chat' // f || t renvoie "Chat" -o7 = 'Chat' || false // t || f renvoie "Chat" -o8 = '' || false // f || f renvoie false -o9 = false || '' // f || f renvoie "" -o10 = false || varObject // f || object renvoie varObject -</pre> - -<div class="notecard note"> - <p><strong>Note :</strong> Si vous utilisez cet opérateur afin de fournir une valeur par défaut à une variable. Soyez conscient⋅e qu'une valeur équivalente à <code>false</code> ne pourra pas être utilisée ainsi. Si vous souhaitez uniquement écarter <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, privilégiez l'utilisation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">l'opérateur de coalescence des nuls</a>.</p> -</div> - -<h3 id="conversion_rules_for_booleans">Règles de conversion booléennes</h3> - -<h4 id="converting_and_to_or">Convertir ET en OU</h4> - -<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>sera toujours équivalente à :</p> - -<pre class="brush: js"> -!(!bCondition1 || !bCondition2) -</pre> - -<h4 id="converting_or_to_and">Convertir OU en ET</h4> - -<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>sera toujours équivalente à :</p> - -<pre class="brush: js"> -!(!bCondition1 && !bCondition2) -</pre> - -<h3 id="removing_nested_parentheses">Retrait des parenthèses imbriquées</h3> - -<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.</p> - -<p>L'opération composite suivante, utilisant des <strong>booléens</strong> :</p> - -<pre class="brush: js"> -bCondition1 && (bCondition2 || bCondition3) -</pre> - -<p>sera toujours équivalente à :</p> - -<pre class="brush: js"> -!(!bCondition1 || !bCondition2 && !bCondition3) -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li> - <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li> - <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_or/index.md b/files/fr/web/javascript/reference/operators/logical_or/index.md new file mode 100644 index 0000000000..cb78f16e10 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_or/index.md @@ -0,0 +1,155 @@ +--- +title: OU logique (||) +slug: Web/JavaScript/Reference/Operators/Logical_OR +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference +browser-compat: javascript.operators.logical_or +--- +{{jsSidebar("Operators")}} + +L'opérateur OU logique (`||`) (disjonction logique) renvoie vrai si et seulement si au moins un de ses opérandes est vrai. Cet opérateur est généralement utilisé avec des valeurs booléennes et, lorsque c'est le cas, il renvoie une valeur booléenne. Toutefois, `||` peut aussi être utilisé avec des valeurs non-booléennes et, dans ce cas, renverra une valeur non-booléenne. + +{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}} + +## Syntax + +```js +expr1 || expr2 +``` + +## Description + +Si `expr1` peut être converti en `true`, c'est `expr1` qui sera renvoyé, sinon ce sera `expr2`. + +Si une valeur peut être convertie en `true`, elle peut être qualifiée de [_truthy_](/fr/docs/Glossary/Truthy). Si une valeur peut être convertie en `false`, on la qualifiera alors de [_falsy_](/fr/docs/Glossary/Falsy). + +Parmi les expressions qui peuvent être converties en `false`, on a : + +- `null` ; +- `NaN` ; +- `0` ; +- la chaîne de caractères vide (`""` ou `''` ou ` `` `) ; +- `undefined`. + +Bien que l'opérateur `||` puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en [une valeur primitive booléenne](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double [opérateur NON (`!`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT) ou le constructeur [`Boolean()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean). + +### Évaluation en court-circuit + +L'expression utilisant un OU logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante : + +`(une expression équivalente à vrai) || expr` sera court-circuité pour fournir directement le résultat de l'expression équivalente à vrai. + +Cette notion de court-circuit indique que la partie `expr` ci-avant **n'est pas évaluée**, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si `expr` est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple : + +```js +function A(){ + console.log('A a été appelée'); + return false; +} + +function B(){ + console.log('B a été appelée'); + return true; +} + +console.log( B() || A() ); +// affichera "B a été appelée" dans la console via l'appel de la fonction +// puis affichera true (la valeur du résultat de l'expression avec l'opérateur) +// on voit que la fonction A n'est pas du tout appelée +``` + +### Précédence des opérateurs + +Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur `&&` est exécuté avant l'opérateur `||` (voir [l'article sur la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)). + +```js +true || false && false // renvoie true, car && est exécuté en premier +(true || false) && false // renvoie false, car la précédence par défaut ne s'applique pas + // avec les parenthèses +``` + +## Exemples + +### Utiliser le OU logique + +Le code suivant illustre quelques usages de l'opérateur OU logique `||`. + +```js +o1 = true || true // t || t renvoie true +o2 = false || true // f || t renvoie true +o3 = true || false // t || f renvoie true +o4 = false || (3 == 4) // f || f renvoie false +o5 = 'Chat' || 'Chien' // t || t renvoie "Chat" +o6 = false || 'Chat' // f || t renvoie "Chat" +o7 = 'Chat' || false // t || f renvoie "Chat" +o8 = '' || false // f || f renvoie false +o9 = false || '' // f || f renvoie "" +o10 = false || varObject // f || object renvoie varObject +``` + +> **Note :** Si vous utilisez cet opérateur afin de fournir une valeur par défaut à une variable. Soyez conscient⋅e qu'une valeur équivalente à `false` ne pourra pas être utilisée ainsi. Si vous souhaitez uniquement écarter [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined), privilégiez l'utilisation de [l'opérateur de coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). + +### Règles de conversion booléennes + +#### Convertir ET en OU + +L'opération suivante, utilisant des **booléens** : + +```js +bCondition1 && bCondition2 +``` + +sera toujours équivalente à : + +```js +!(!bCondition1 || !bCondition2) +``` + +#### Convertir OU en ET + +L'opération suivante, utilisant des **booléens** : + +```js +bCondition1 || bCondition2 +``` + +sera toujours équivalente à : + +```js +!(!bCondition1 && !bCondition2) +``` + +### Retrait des parenthèses imbriquées + +Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles. + +L'opération composite suivante, utilisant des **booléens** : + +```js +bCondition1 && (bCondition2 || bCondition3) +``` + +sera toujours équivalente à : + +```js +!(!bCondition1 || !bCondition2 && !bCondition3) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [_Truthy_](/fr/docs/Glossary/Truthy) +- [_Falsy_](/fr/docs/Glossary/Falsy) diff --git a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html deleted file mode 100644 index 433c5f2109..0000000000 --- a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Affectation après OU logique (||=) -slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -browser-compat: javascript.operators.logical_or_assignment -translation-of: Web/JavaScript/Reference/Operators/Logical_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après OU logique (<code>x ||= y</code>) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est <a href="/fr/docs/Glossary/Falsy">équivalent à faux (<i>falsy</i>)</a>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>expr1</var> ||= <var>expr2</var> -</pre> - -<h2 id="description">Description</h2> - -<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3> - -<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR">OU logique</a> fonctionne ainsi :</p> - -<pre class="brush: js"> -x || y; -// renvoie x lorsque x est équivalent à vrai -// renvoie y lorsque x n'est pas équivalent à vrai -</pre> - -<p>L'opérateur OU logique peut utiliser un court-circuit : le second opérande est uniquement évalué si le premier opérande n'est pas équivalent à vrai.</p> - -<p>L'opérateur d'affectation après OU logique observe les mêmes règles : l'affectation a uniquement lieu si l'opération logique a besoin d'évaluer l'opérande droit. Autrement dit, <code>x ||= y</code> est équivalent à :</p> - -<pre class="brush: js"> -x || (x = y); -</pre> - -<p>En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation :</p> - -<pre class="brush: js example-bad"> -x = x || y; -</pre> - -<p>On notera que ce comportement est différent entre les opérateurs binaires et les opérateurs logiques.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="setting_default_content">Affecter une valeur par défaut</h3> - -<p>Dans l'exemple qui suit, si <code>paroles</code> est vide, on y place une valeur par défaut :</p> - -<pre class="brush: js"> -document.getElementById('paroles').textContent ||= 'Aucune parole.' -</pre> - -<p>Ici, la notion de court-circuit est utile, car l'élément ne sera pas mis à jour si ce n'est pas nécessaire. Il n'y aura pas d'effet de bord indésiré comme une autre étape de rendu ou la perte du focus, etc.</p> - -<p>Attention toutefois à la valeur qu'on teste. Si on souhaite affecter une valeur lorsqu'on rencontre une chaîne de caractère vide (équivalente à faux), on pourra utiliser <code>||=</code>. Sinon, si on souhaite uniquement distinguer <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>undefined</code></a>, on utilisera l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"><code>??=</code></a>.</p> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR">L'opérateur OU logique (||)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">L'opérateur d'affectation après OU binaire (<code>|=</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Le type <code>Boolean</code></a> - <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li> - <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md new file mode 100644 index 0000000000..34d97a79f8 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md @@ -0,0 +1,81 @@ +--- +title: Affectation après OU logique (||=) +slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference +browser-compat: javascript.operators.logical_or_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après OU logique (`x ||= y`) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est [équivalent à faux (_falsy_)](/fr/docs/Glossary/Falsy). + +{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}} + +## Syntaxe + +```js +expr1 ||= expr2 +``` + +## Description + +### Évaluation en court-circuit + +L'opérateur [OU logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR) fonctionne ainsi : + +```js +x || y; +// renvoie x lorsque x est équivalent à vrai +// renvoie y lorsque x n'est pas équivalent à vrai +``` + +L'opérateur OU logique peut utiliser un court-circuit : le second opérande est uniquement évalué si le premier opérande n'est pas équivalent à vrai. + +L'opérateur d'affectation après OU logique observe les mêmes règles : l'affectation a uniquement lieu si l'opération logique a besoin d'évaluer l'opérande droit. Autrement dit, `x ||= y` est équivalent à : + +```js +x || (x = y); +``` + +En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation : + +```js example-bad +x = x || y; +``` + +On notera que ce comportement est différent entre les opérateurs binaires et les opérateurs logiques. + +## Exemples + +### Affecter une valeur par défaut + +Dans l'exemple qui suit, si `paroles` est vide, on y place une valeur par défaut : + +```js +document.getElementById('paroles').textContent ||= 'Aucune parole.' +``` + +Ici, la notion de court-circuit est utile, car l'élément ne sera pas mis à jour si ce n'est pas nécessaire. Il n'y aura pas d'effet de bord indésiré comme une autre étape de rendu ou la perte du focus, etc. + +Attention toutefois à la valeur qu'on teste. Si on souhaite affecter une valeur lorsqu'on rencontre une chaîne de caractère vide (équivalente à faux), on pourra utiliser `||=`. Sinon, si on souhaite uniquement distinguer [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), on utilisera l'opérateur [`??=`](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator). + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur OU logique (||)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR) +- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [L'opérateur d'affectation après OU binaire (`|=`)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) +- [Le type `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) +- [_Truthy_](/fr/docs/Glossary/Truthy) +- [_Falsy_](/fr/docs/Glossary/Falsy) diff --git a/files/fr/web/javascript/reference/operators/multiplication/index.html b/files/fr/web/javascript/reference/operators/multiplication/index.html deleted file mode 100644 index 8729f46328..0000000000 --- a/files/fr/web/javascript/reference/operators/multiplication/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Multiplication (*) -slug: Web/JavaScript/Reference/Operators/Multiplication -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.multiplication -translation-of: Web/JavaScript/Reference/Operators/Multiplication ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de multiplication (<code>*</code>) fournit le produit de la multiplication des deux opérandes.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var> * <var>y</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="multiplication_using_numbers">Avec des nombres</h3> - -<pre class="brush: js"> 2 * 2 // 4 --2 * 2 // -4 -</pre> - -<h3 id="multiplication_with_infinity">Avec l'infini</h3> - -<pre class="brush: js"> -Infinity * 0 // NaN -Infinity * Infinity // Infinity -</pre> - -<h3 id="multiplication_with_non-numbers">Avec des valeurs non-numériques</h3> - -<pre class="brush: js"> -'foo' * 2 // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/multiplication/index.md b/files/fr/web/javascript/reference/operators/multiplication/index.md new file mode 100644 index 0000000000..484d2b45f3 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/multiplication/index.md @@ -0,0 +1,63 @@ +--- +title: Multiplication (*) +slug: Web/JavaScript/Reference/Operators/Multiplication +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.multiplication +--- +{{jsSidebar("Operators")}} + +L'opérateur de multiplication (`*`) fournit le produit de la multiplication des deux opérandes. + +{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}} + +## Syntaxe + +```js +Opérateur : x * y +``` + +## Exemples + +### Avec des nombres + +```js + 2 * 2 // 4 +-2 * 2 // -4 +``` + +### Avec l'infini + +```js +Infinity * 0 // NaN +Infinity * Infinity // Infinity +``` + +### Avec des valeurs non-numériques + +```js +'foo' * 2 // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html deleted file mode 100644 index 13d0a6d9e7..0000000000 --- a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Affectation après multiplication (*=) -slug: Web/JavaScript/Reference/Operators/Multiplication_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.multiplication_assignment -translation-of: Web/JavaScript/Reference/Operators/Multiplication_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de multiplication et d'affectation (<code>*=</code>) multiplie une variable fournie par l'opérande gauche par la valeur fournie par l'opérande droit puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x *= y -<strong>Signification :</strong> x = x * y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_multiplication_assignment">Utiliser l'opérateur de multiplication et d'affectation</h3> - -<pre class="brush: js"> -let truc = 5; -truc *= 2; // 10 -truc *= 'toto'; // NaN</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">L'opérateur de multiplication</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md new file mode 100644 index 0000000000..abe84b04c2 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md @@ -0,0 +1,46 @@ +--- +title: Affectation après multiplication (*=) +slug: Web/JavaScript/Reference/Operators/Multiplication_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.multiplication_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de multiplication et d'affectation (`*=`) multiplie une variable fournie par l'opérande gauche par la valeur fournie par l'opérande droit puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x *= y +Signification : x = x * y +``` + +## Exemples + +### Utiliser l'opérateur de multiplication et d'affectation + +```js +let truc = 5; +truc *= 2; // 10 +truc *= 'toto'; // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) diff --git a/files/fr/web/javascript/reference/operators/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html deleted file mode 100644 index 16544ca4fa..0000000000 --- a/files/fr/web/javascript/reference/operators/new.target/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: new.target -slug: Web/JavaScript/Reference/Operators/new.target -tags: - - ECMAScript 2015 - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Operators/new.target -original_slug: Web/JavaScript/Reference/Opérateurs/new.target ---- -<div>{{JSSidebar("Operators")}}</div> - -<p>La syntaxe<strong> <code>new.target</code></strong> est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec <code>new</code>. Dans les constructeurs, il fait référence au constructeur invoqué par <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. Dans les appels de fonction « normaux », <code>new.target</code> vaut {{jsxref("undefined")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">new.target</pre> - -<h2 id="Description">Description</h2> - -<p>La syntaxe <code>new.target</code> se compose du mot-clé <code>new</code>, suivi d'un point puis d'un nom de propriété (ici <code>target</code>). Généralement et par ailleurs, <code>new.</code> est utilisé comme contexte pour accéder à une propriété. Ici, <code>new.</code> ne fait pas réellement référence à un objet. Dans les appels de constructeurs, <code>new.target</code> fait référence au constructeur qui a été appelé par <code>new</code>. Cette syntaxe permet donc de récupérer cette valeur.</p> - -<p><code>new.target</code> est une méta-propriété, disponible pour toutes les fonctions. Dans <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>, <code>new.target</code> fait référence au <code>new.target</code> de la fonction englobante.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utilisation_de_new.target_dans_les_appels_de_fonction">Utilisation de <code>new.target</code> dans les appels de fonction</h3> - -<p>Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), <code>new.target</code> vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new">new</a></code> :</p> - -<pre class="brush: js">function Toto(){ - if (!new.target) throw "Toto() doit être appelé avec new" - console.log("Toto instancié avec new"); -} - -new Toto(); // affiche "Toto instancié avec new" dans la console -Toto(); // lève l'exception avec "Toto doit être appelé avec new" -</pre> - -<h3 id="Utilisation_de_new.target_dans_les_constructeurs">Utilisation de <code>new.target</code> dans les constructeurs</h3> - -<p>Utilisés dans les appels de constructeurs de classe, <code>new.target</code> fait référence au constructeur utilisé directement avec <code>new</code>. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :</p> - -<pre class="brush: js">class A { - constructor() { - console.log(new.target.name); - } -} - -class B extends A { constructor() { super(); } } - -var a = new A(); // affiche "A" -var b = new B(); // affiche "B" - -class C { - constructor() { - console.log(new.target); - } -} - -class D extends C { - constructor() { - super(); - } -} - -var c = new C(); // function C() -var d = new D(); // function D() -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.new_target")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code></li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code></li> - <li><a href="https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage">Cet article sur les classes traduit en français</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/new.target/index.md b/files/fr/web/javascript/reference/operators/new.target/index.md new file mode 100644 index 0000000000..3b55b94273 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new.target/index.md @@ -0,0 +1,92 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +original_slug: Web/JavaScript/Reference/Opérateurs/new.target +--- +{{JSSidebar("Operators")}} + +La syntaxe** `new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}. + +{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}} + +## Syntaxe + + new.target + +## Description + +La syntaxe `new.target` se compose du mot-clé `new`, suivi d'un point puis d'un nom de propriété (ici `target`). Généralement et par ailleurs, `new.` est utilisé comme contexte pour accéder à une propriété. Ici, `new.` ne fait pas réellement référence à un objet. Dans les appels de constructeurs, `new.target` fait référence au constructeur qui a été appelé par `new`. Cette syntaxe permet donc de récupérer cette valeur. + +`new.target` est une méta-propriété, disponible pour toutes les fonctions. Dans [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es), `new.target` fait référence au `new.target` de la fonction englobante. + +## Exemples + +### Utilisation de `new.target` dans les appels de fonction + +Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), `new.target` vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec [`new`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new) : + +```js +function Toto(){ + if (!new.target) throw "Toto() doit être appelé avec new" + console.log("Toto instancié avec new"); +} + +new Toto(); // affiche "Toto instancié avec new" dans la console +Toto(); // lève l'exception avec "Toto doit être appelé avec new" +``` + +### Utilisation de `new.target` dans les constructeurs + +Utilisés dans les appels de constructeurs de classe, `new.target` fait référence au constructeur utilisé directement avec `new`. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils : + +```js +class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // affiche "A" +var b = new B(); // affiche "B" + +class C { + constructor() { + console.log(new.target); + } +} + +class D extends C { + constructor() { + super(); + } +} + +var c = new C(); // function C() +var d = new D(); // function D() +``` + +## Spécifications + +| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.new_target")}} + +## Voir aussi + +- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) +- [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new) +- [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) +- [Cet article sur les classes traduit en français](https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage) diff --git a/files/fr/web/javascript/reference/operators/new/index.html b/files/fr/web/javascript/reference/operators/new/index.html deleted file mode 100644 index 1e4074256c..0000000000 --- a/files/fr/web/javascript/reference/operators/new/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: L'opérateur new -slug: Web/JavaScript/Reference/Operators/new -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/new -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p> - -<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p> - -<ol> - <li>Il crée un nouvel objet à partir de zéro</li> - <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li> - <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li> - <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li> -</ol> - -<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>constructeur</code></dt> - <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd> - <dt><code>arguments</code></dt> - <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>La création d'un objet personnalisé se fait en deux étapes :</p> - -<ol> - <li>Définition du type d'objet en écrivant une fonction.</li> - <li>Création d'une instance de l'objet avec <code>new</code>.</li> -</ol> - -<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p> - -<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p> - -<ol> - <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li> - <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li> - <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li> -</ol> - -<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p> - -<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p> - -<pre class="brush: js">function Voiture() {} -voiture1 = new Voiture(); -voiture2 = new Voiture(); - -console.log(voiture1.couleur); // undefined - -Voiture.prototype.couleur = "couleur standard"; -console.log(voiture1.couleur); // couleur standard - -voiture1.couleur = "noir"; -console.log(voiture1.couleur); // noir - -console.log(voiture1.__proto__.couleur); // couleur standard -console.log(voiture2.__proto__.couleur); // couleur standard -console.log(voiture1.couleur); // noir -console.log(voiture2.couleur); // couleur standard -</pre> - -<div class="note"> -<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3> - -<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p> - -<pre class="brush: js">function Voiture(marque, modèle, année) { - this.marque = marque; - this.modèle = modèle; - this.année = année; -} -</pre> - -<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p> - -<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); -</pre> - -<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p> - -<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p> - -<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992); -</pre> - -<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3> - -<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p> - -<pre class="brush: js">function Personne(nom, age, surnom) { - this.nom = nom; - this.age = age; - this.surnom = surnom; -} -</pre> - -<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p> - -<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy"); -ken = new Personne("Ken Jones", 39, "Kenny"); -</pre> - -<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p> - -<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) { - this.marque = marque; - this.modèle = modèle; - this.année = année; - this.propriétaire = propriétaire; -} -</pre> - -<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p> - -<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand); -voiture2 = new Voiture("Nissan", "300ZX", 1992, ken); -</pre> - -<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p> - -<pre class="brush: js">voiture2.propriétaire.nom -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.new")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Reflect.construct()")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/new/index.md b/files/fr/web/javascript/reference/operators/new/index.md new file mode 100644 index 0000000000..7a0424c8fa --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new/index.md @@ -0,0 +1,164 @@ +--- +title: L'opérateur new +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/new +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new +--- +{{jsSidebar("Operators")}} + +L'**opérateur `new`** permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur). + +Le mot-clé `new`, utilisé avec une fonction, applique les 4 étapes suivantes : + +1. Il crée un nouvel objet à partir de zéro +2. Il lie cet objet à un autre objet en le définissant comme son prototype. +3. Le nouvel objet, créé à l'étape 1, est passé comme valeur `this` à la fonction +4. Si la fonction ne renvoie pas d'objet, c'est la valeur `this` qui est renvoyée. + +{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}} + +## Syntaxe + + new constructeur[([arguments])] + +### Paramètres + +- `constructeur` + - : Une fonction ou une classe qui définit le type de l'objet qui sera une instance. +- `arguments` + - : Une liste de valeurs correspondant aux arguments avec lesquels appeler le `constructeur`. + +## Description + +La création d'un objet personnalisé se fait en deux étapes : + +1. Définition du type d'objet en écrivant une fonction. +2. Création d'une instance de l'objet avec `new`. + +Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous. + +Lorsque le code `new Toto(...)` est exécuté, voici ce qui se passe : + +1. Un nouvel objet est créé qui hérite de `Toto.prototype`. +2. La fonction constructrice `Toto` est appelée avec les arguments fournis, [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) étant lié au nouvel objet créé. `new Toto` sera équivalent à `new Toto()` (i.e. un appel sans argument). +3. L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient `new`. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour). + +Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction `voiture1.couleur = "noir"` ajoute une propriété couleur à `voiture1`, et lui assigne une valeur : "`noir`". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet `Voiture`. + +Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété [`Function.prototype`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype). Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur `"couleur standard"` à tous les objets de type `Voiture`, et redéfinit ensuite cette valeur avec la chaîne "`noir`" uniquement pour l'instance d'objet `voiture1`. Pour plus d'informations, voir la page sur [prototype](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain). + +```js +function Voiture() {} +voiture1 = new Voiture(); +voiture2 = new Voiture(); + +console.log(voiture1.couleur); // undefined + +Voiture.prototype.couleur = "couleur standard"; +console.log(voiture1.couleur); // couleur standard + +voiture1.couleur = "noir"; +console.log(voiture1.couleur); // noir + +console.log(voiture1.__proto__.couleur); // couleur standard +console.log(voiture2.__proto__.couleur); // couleur standard +console.log(voiture1.couleur); // noir +console.log(voiture2.couleur); // couleur standard +``` + +> **Note :** Si on n'écrit pas l'appel du constructeur avec l'opérateur `new`, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de `this` sera différente. + +## Exemples + +### Exemple : type d'objet et instance d'objet + +Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante : + +```js +function Voiture(marque, modèle, année) { + this.marque = marque; + this.modèle = modèle; + this.année = année; +} +``` + +À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante : + +```js +ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); +``` + +Cette instruction crée l'objet `ma_voiture` et assigne les valeurs spécifiées à ses propriétés. La valeur de `ma_voiture.marque` est alors la chaîne `"Volkswagen"`, celle de `ma_voiture.année` est l'entier 1997, et ainsi de suite. + +Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple : + +```js +voiture_de_ken = new Voiture("Nissan", "300ZX", 1992); +``` + +### Exemple : propriété d'objet qui est elle-même un autre objet + +Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante : + +```js +function Personne(nom, age, surnom) { + this.nom = nom; + this.age = age; + this.surnom = surnom; +} +``` + +Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante : + +```js +rand = new Personne("Rand McNally", 33, "Randy"); +ken = new Personne("Ken Jones", 39, "Kenny"); +``` + +Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci : + +```js +function Voiture(marque, modèle, année, propriétaire) { + this.marque = marque; + this.modèle = modèle; + this.année = année; + this.propriétaire = propriétaire; +} +``` + +Pour instancier les nouveaux objets, vous utiliserez ensuite : + +```js +voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand); +voiture2 = new Voiture("Nissan", "300ZX", 1992, ken); +``` + +Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante : + +```js +voiture2.propriétaire.nom +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.new")}} + +## Voir aussi + +- {{jsxref("Function")}} +- {{jsxref("Reflect.construct()")}} +- {{jsxref("Object.prototype")}} diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html deleted file mode 100644 index c703a8d82e..0000000000 --- a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Opérateur de coalescence des nuls (Nullish coalescing operator) -slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator -tags: - - Coalescence - - JavaScript - - Opérateur - - Reference - - falsy - - nullish -translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator -original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator ---- -<p>{{JSSidebar("Operators")}}</p> - -<p>L'<strong>opérateur de coalescence des nuls</strong> (<code>??</code>), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut <code>{{jsxref("null")}}</code> ou <code>{{jsxref("undefined")}}</code> et qui renvoie son opérande de gauche sinon.</p> - -<p>Contrairement à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">l'opérateur logique OU (<code>||</code>)</a>, l'opérande de gauche sera renvoyé s'il s'agit d'une <a href="/fr/docs/Glossaire/Falsy">valeur équivalente à <code>false</code></a> <strong>qui n'est ni</strong> <code>null</code><strong>, ni</strong> <code>undefined</code>. En d'autres termes, si vous utilisez <code>||</code> pour fournir une valeur par défaut à une variable <code>foo</code>, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs <em>falsy</em> comme utilisables (par exemple une chaine vide <code>''</code> ou <code>0</code>). Voir ci-dessous pour plus d'exemples.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> -</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utilisation_de_lopérateur_de_coalescence_des_nuls">Utilisation de l'opérateur de coalescence des nuls</h3> - -<p>Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que <code>null</code> ou <code>undefined</code>.</p> - -<pre class="brush: js notranslate">const valeurNulle = null; -const texteVide = ""; // falsy -const unNombre = 42; - -const valA = valeurNulle ?? "valeur par défaut pour A"; -const valB = texteVide ?? "valeur par défaut pour B"; -const valC = unNombre ?? 0; - -console.log(valA); // "valeur par défaut pour A" -console.log(valB); // "" (car la chaine vide n'est ni `<code>null`</code> ni `<code>undefined`</code>) -console.log(valC); // 42</pre> - -<h3 id="Affectation_dune_valeur_par_défaut_à_une_variable">Affectation d'une valeur par défaut à une variable</h3> - -<p>Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (<code>||</code>) :</p> - -<pre class="brush: js notranslate">let toto; - -// toto ne se voit jamais attribuer de valeur, il vaut donc undefined -let unTexteBateau = toto || 'Coucou !';</pre> - -<p>Cependant, parce que <code>||</code> est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur <em>falsy</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer <code>0</code>, <code>''</code> ou <code>NaN</code> comme des valeurs valides.</p> - -<pre class="brush: js notranslate">let compteur = 0; -let texte = ""; - -let qté = compteur || 42; -let message = texte || "Coucou !"; -console.log(qté); // 42 et non 0 -console.log(message); // "Coucou !" et non "" -</pre> - -<p>L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut <code>null</code> ou <code>undefined</code> (mais pas d'autres valeurs <em>falsy</em>) :</p> - -<pre class="brush: js notranslate">let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy) - -let notFalsyText = monTexte || 'Hello world'; -console.log(notFalsyText); // Hello world - -let preservingFalsy = monTexte ?? 'Salut le voisin'; -console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined) -</pre> - -<h3 id="Court-circuitage">Court-circuitage</h3> - -<p>À l'instar des opérateurs logiques OR (<code>||</code>) et AND (<code>&&</code>), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni <code>null</code> ni <code>undefined</code>.</p> - -<pre class="brush: js notranslate">function A() { console.log('A a été appelée'); return undefined; } -function B() { console.log('B a été appelée'); return false; } -function C() { console.log('C a été appelée'); return "toto"; } - -console.log( A() ?? C() ); -// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto" -// puisque : A() retourne undefined, les deux expressions sont donc évaluées - -console.log( B() ?? C() ); -// Inscrit "B a été appelée" puis false -// puisque : B() retourne false (et non null ou undefined) et -// l'opérande de droite n'est pas évaluée -</pre> - -<h3 id="Pas_de_chaînage_possible_avec_les_opérateurs_AND_ou_OR">Pas de chaînage possible avec les opérateurs AND ou OR</h3> - -<p>Il n'est pas possible de combiner les opérateurs AND (<code>&&</code>) ou OR (<code>||</code>) directement avec l'opérateur de coalescence des nuls (<code>??</code>). Un tel cas lèverait une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code>.</p> - -<pre class="brush: js example-bad notranslate">null || undefined ?? "toto"; // soulève une SyntaxError -true || undefined ?? "toto"; // soulève une SyntaxError</pre> - -<p>Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :</p> - -<pre class="brush: js example-good notranslate">(null || undefined) ?? "toto"; // Renvoie "toto" -</pre> - -<h3 id="Relation_avec_lopérateur_de_chaînage_optionnel_.">Relation avec l'opérateur de chaînage optionnel (<code>?.</code>)</h3> - -<p>Tout comme l'opérateur de coalescence des nuls, l'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">opérateur de chaînage optionnel (?.)</a> traite les valeurs <code>null</code> et <code>undefined</code> comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être <code>null</code> ou <code>undefined</code>.</p> - -<pre class="brush: js notranslate">let toto = { uneProprieteToto: "coucou" }; - -console.log(toto.uneProprieteToto?.toUpperCase()); // "COUCOU" -console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Glossaire/Falsy"><em>Falsy values</em> (Valeurs équivalentes à <code>false</code> dans un contexte booléen)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">Opérateur de chaînage optionnel (<em>optional chaining</em>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR">Opérateur logique OU (<code>||</code>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeurs par défaut des arguments</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md new file mode 100644 index 0000000000..d9b1e5e3b4 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md @@ -0,0 +1,141 @@ +--- +title: Opérateur de coalescence des nuls (Nullish coalescing operator) +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +tags: + - Coalescence + - JavaScript + - Opérateur + - Reference + - falsy + - nullish +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator +--- +{{JSSidebar("Operators")}} + +L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon. + +Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples. + +{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}} + +## Syntaxe + + leftExpr ?? rightExpr + +## Exemples + +### Utilisation de l'opérateur de coalescence des nuls + +Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`. + +```js +const valeurNulle = null; +const texteVide = ""; // falsy +const unNombre = 42; + +const valA = valeurNulle ?? "valeur par défaut pour A"; +const valB = texteVide ?? "valeur par défaut pour B"; +const valC = unNombre ?? 0; + +console.log(valA); // "valeur par défaut pour A" +console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`) +console.log(valC); // 42 +``` + +### Affectation d'une valeur par défaut à une variable + +Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (`||`) : + +```js +let toto; + +// toto ne se voit jamais attribuer de valeur, il vaut donc undefined +let unTexteBateau = toto || 'Coucou !'; +``` + +Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides. + +```js +let compteur = 0; +let texte = ""; + +let qté = compteur || 42; +let message = texte || "Coucou !"; +console.log(qté); // 42 et non 0 +console.log(message); // "Coucou !" et non "" +``` + +L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) : + +```js +let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy) + +let notFalsyText = monTexte || 'Hello world'; +console.log(notFalsyText); // Hello world + +let preservingFalsy = monTexte ?? 'Salut le voisin'; +console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined) +``` + +### Court-circuitage + +À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`. + +```js +function A() { console.log('A a été appelée'); return undefined; } +function B() { console.log('B a été appelée'); return false; } +function C() { console.log('C a été appelée'); return "toto"; } + +console.log( A() ?? C() ); +// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto" +// puisque : A() retourne undefined, les deux expressions sont donc évaluées + +console.log( B() ?? C() ); +// Inscrit "B a été appelée" puis false +// puisque : B() retourne false (et non null ou undefined) et +// l'opérande de droite n'est pas évaluée +``` + +### Pas de chaînage possible avec les opérateurs AND ou OR + +Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError). + +```js example-bad +null || undefined ?? "toto"; // soulève une SyntaxError +true || undefined ?? "toto"; // soulève une SyntaxError +``` + +Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct : + +```js example-good +(null || undefined) ?? "toto"; // Renvoie "toto" +``` + +### Relation avec l'opérateur de chaînage optionnel (`?.`) + +Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`. + +```js +let toto = { uneProprieteToto: "coucou" }; + +console.log(toto.uneProprieteToto?.toUpperCase()); // "COUCOU" +console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined +``` + +## Spécifications + +| Spécification | +| ------------------------------------------------------------------------------------------------ | +| {{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}} | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.nullish_coalescing")}} + +## Voir aussi + +- [_Falsy values_ (Valeurs équivalentes à `false` dans un contexte booléen)](/fr/docs/Glossaire/Falsy) +- [Opérateur de chaînage optionnel (_optional chaining_)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) +- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR) +- [Valeurs par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments) diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html deleted file mode 100644 index b2ee021922..0000000000 --- a/files/fr/web/javascript/reference/operators/object_initializer/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Initialisateur d'objet -slug: Web/JavaScript/Reference/Operators/Object_initializer -tags: - - ECMAScript 2015 - - JavaScript - - Object - - Reference -translation_of: Web/JavaScript/Reference/Operators/Object_initializer -original_slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet ---- -<div>{{JsSidebar("Operators")}}</div> - -<p>Il est possible d'initialiser un objet en utilisant les notations <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object"><code>new Object()</code></a>,<code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create()</a></code>, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (<code>{}</code>).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: js">var o = {}; -var o = { a: "toto", b: 42, c: {} }; - -var a = "toto", b = 42, c = {}; -var o = { a: a, b: b, c: c }; - -var o = { - <var>property: function </var>(<var>paramètres</var>) {}, - get property() {}, - set property(<var>valeur</var>) {} -}; -</pre> - -<h3 id="Nouvelles_notations_ECMAScript_2015_(ES6)">Nouvelles notations ECMAScript 2015 (ES6)</h3> - -<p>ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.</p> - -<pre class="brush: js">// Raccourcis pour les noms de propriétés (ES2015) -var a = "toto", b = 42, c = {}; -var o = { a, b, c }; - -// Raccourcis pour les noms de méthodes(ES2015) -var o = { - <var>property</var>(<var>paramètres</var>) {} -}; - -// Noms calculés pour les propriétés (ES2015) -var prop = "toto"; -var o = { - [prop]: "hey", - ["tr" + "uc"]: "ho", -};</pre> - -<h2 id="Description">Description</h2> - -<p>Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">types de données primitifs</a> ou à partir d'autres objets.</p> - -<h3 id="Créer_des_objets">Créer des objets</h3> - -<p>On peut créer un objet sans aucune propriété grâce à l'expression suivante :</p> - -<pre class="brush: js">var objet = {};</pre> - -<p>Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés <code>"toto"</code>, <code>"âge"</code> et <code>"machin"</code>. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères <code>"truc"</code>, le nombre <code>42</code> et un autre objet.</p> - -<pre class="brush: js">var object = { - toto: 'truc', - âge: 42, - machin: { maProp: 12 }, -}</pre> - -<h3 id="Accéder_à_des_propriétés">Accéder à des propriétés</h3> - -<p>Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> pour plus d'information.</p> - -<pre class="brush: js">object.toto; // "truc" -object['âge']; // 42 - -object.toto = 'machin'; -</pre> - -<h3 id="Définir_des_propriétés">Définir des propriétés</h3> - -<p>On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :</p> - -<pre class="brush: js">var a = 'toto', - b = 42, - c = {}; - -var o = { - a: a, - b: b, - c: c -};</pre> - -<p>Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :</p> - -<pre class="brush: js">var a = 'toto', - b = 42, - c = {}; - -// Raccourcis sur les noms de propriétés (ES2015) -var o = { a, b, c }; - -// Autrement dit -console.log((o.a === { a }.a)); // true -</pre> - -<h4 id="Les_duplicatas_et_les_noms_de_propriétés">Les duplicatas et les noms de propriétés</h4> - -<p>Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :</p> - -<pre class="brush: js">var a = {x: 1, x: 2}; -console.log(a); // { x: 2} -</pre> - -<p>Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.</p> - -<pre class="brush: js">function vérifierSémantiqueES2015(){ - 'use strict'; - try { - ({ prop: 1, prop: 2 }); - - // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées - return true; - } catch (e) { - // Une erreur est renvoyée : les duplicatas sont interdits en mode strict - return false; - } -}</pre> - -<h3 id="Définitions_de_méthodes">Définitions de méthodes</h3> - -<p>Une propriété d'un objet peut être une <a href="/fr/docs/Web/JavaScript/Reference/Functions">function</a>, un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> ou un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> :</p> - -<pre class="brush: js">var o = { - <var>property: function </var>(<var>paramètres</var>) {}, - get <var>property</var>() {}, - set <var>property</var>(<var>valeur</var>) {} -};</pre> - -<p>Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "<code>function</code>".</p> - -<pre class="brush: js">// Raccourci pour les noms de méthodes (ES2015) -var o = { - <var>property</var>(<em>paramètres</em>) {}, - *<var>generator</var>() {} -};</pre> - -<p>Ou encore :</p> - -<pre class="brush: js">var o = { - *generator() { - ... - } -};</pre> - -<p>En utilisant uniquement ECMAScript 5, on aurait écrit :</p> - -<p><em>(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :</em></p> - -<pre class="brush: js">var o = { - generator: function* (){} -}; -</pre> - -<p>Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les<a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions"> définitions de méthode</a>.</p> - -<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3> - -<p>Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets <code>[]</code>, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :</p> - -<pre class="brush: js">// Calcul des noms de propriétés (ES2015) -var i = 0; -var a = { - ['toto' + ++i]: i, - ['toto' + ++i]: i, - ['toto' + ++i]: i -}; - -console.log(a.toto1); // 1 -console.log(a.toto2); // 2 -console.log(a.toto3); // 3 - -var param = 'taille'; -var config = { - [param]: 12, - ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 -}; - -console.log(config); // { taille: 12, mobileTaille: 4 }</pre> - -<h3 id="Décomposition_des_propriétés">Décomposition des propriétés</h3> - -<p>La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.</p> - -<p>Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.</p> - -<pre class="brush: js">var obj1 = { toto: 'truc', x: 42 }; -var obj2 = { toto: 'bidule', y: 13 }; - -var clone = { ...obj1 }; -// Object { toto: 'truc', x: 42 } - -var fusion = { ...obj1, ...obj2 }; -// Object { toto: 'bidule', x: 42, y: 13 }; -</pre> - -<p>On notera que la méthode {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas de l'opérateur de décomposition.</p> - -<h3 id="Changement_de_prototype">Changement de prototype</h3> - -<p>Définir une propriété avec la syntaxe <code>__proto__: valeur</code> ou <code>"__proto__": valeur</code> ne permet pas de créer une propriété avec le nom <code>__proto__</code>. Si la valeur fournie est un objet ou est <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/null"><code>null</code></a>, cela modifie le <code>[[Prototype]]</code> de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)</p> - -<pre class="brush: js">var obj1 = {}; -assert(Object.getPrototypeOf(obj1) === Object.prototype); - -var obj2 = { __proto__: null }; -assert(Object.getPrototypeOf(obj2) === null); - -var protoObj = {}; -var obj3 = { '__proto__': protoObj }; -assert(Object.getPrototypeOf(obj3) === protoObj); - -var obj4 = { __proto__: "not an object or null" }; -assert(Object.getPrototypeOf(obj4) === Object.prototype); -assert(!obj4.hasOwnProperty("__proto__")); -</pre> - -<p>On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.</p> - -<p>Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.</p> - -<pre class="brush: js">var __proto__ = 'variable'; - -var obj1 = { __proto__ }; -assert(Object.getPrototypeOf(obj1) === Object.prototype); -assert(obj1.hasOwnProperty('__proto__')); -assert(obj1.__proto__ === 'variable'); - -var obj2 = { __proto__() { return 'hello'; } }; -assert(obj2.__proto__() === 'hello'); - -var obj3 = { ['__prot' + 'o__']: 17 }; -assert(obj3.__proto__ === 17); -</pre> - -<h2 id="Notation_littérale_et_JSON">Notation littérale et JSON</h2> - -<p>La notation utilisant un littéral objet n'est pas identique à celle utilisée par la <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/fr/docs/JSON">JSON</a>). Bien que ces notations se ressemblent, il existe certaines différences :</p> - -<ul> - <li>JSON ne permet de définir des propriétés qu'en utilisant la syntaxe <code>"propriété": valeur</code>. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.</li> - <li>En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, <code>true</code>, <code>false</code>, <code>null</code>, ou tout autre objet (JSON).</li> - <li>Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.</li> - <li>Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.</li> - <li>{{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.</li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Functions/get">Ajout des <em>getter</em> et </a><em><a href="/fr/docs/Web/JavaScript/Reference/Functions/set">setter</a></em> (accesseur/mutateur).</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.object_initializer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriétés</a></li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Définitions de méthode</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a> de JavaScript</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.md b/files/fr/web/javascript/reference/operators/object_initializer/index.md new file mode 100644 index 0000000000..05f0cabe3f --- /dev/null +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.md @@ -0,0 +1,301 @@ +--- +title: Initialisateur d'objet +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +original_slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet +--- +{{JsSidebar("Operators")}} + +Il est possible d'initialiser un objet en utilisant les notations [`new Object()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object),` Object.create()`, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (`{}`). + +{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}} + +## Syntaxe + +```js +var o = {}; +var o = { a: "toto", b: 42, c: {} }; + +var a = "toto", b = 42, c = {}; +var o = { a: a, b: b, c: c }; + +var o = { + property: function (paramètres) {}, + get property() {}, + set property(valeur) {} +}; +``` + +### Nouvelles notations ECMAScript 2015 (ES6) + +ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après. + +```js +// Raccourcis pour les noms de propriétés (ES2015) +var a = "toto", b = 42, c = {}; +var o = { a, b, c }; + +// Raccourcis pour les noms de méthodes(ES2015) +var o = { + property(paramètres) {} +}; + +// Noms calculés pour les propriétés (ES2015) +var prop = "toto"; +var o = { + [prop]: "hey", + ["tr" + "uc"]: "ho", +}; +``` + +## Description + +Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de [types de données primitifs](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) ou à partir d'autres objets. + +### Créer des objets + +On peut créer un objet sans aucune propriété grâce à l'expression suivante : + +```js +var objet = {}; +``` + +Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés `"toto"`, `"âge"` et `"machin"`. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères `"truc"`, le nombre `42` et un autre objet. + +```js +var object = { + toto: 'truc', + âge: 42, + machin: { maProp: 12 }, +} +``` + +### Accéder à des propriétés + +Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les [accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) pour plus d'information. + +```js +object.toto; // "truc" +object['âge']; // 42 + +object.toto = 'machin'; +``` + +### Définir des propriétés + +On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant : + +```js +var a = 'toto', + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +}; +``` + +Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal : + +```js +var a = 'toto', + b = 42, + c = {}; + +// Raccourcis sur les noms de propriétés (ES2015) +var o = { a, b, c }; + +// Autrement dit +console.log((o.a === { a }.a)); // true +``` + +#### Les duplicatas et les noms de propriétés + +Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte : + +```js +var a = {x: 1, x: 2}; +console.log(a); // { x: 2} +``` + +Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée. + +```js +function vérifierSémantiqueES2015(){ + 'use strict'; + try { + ({ prop: 1, prop: 2 }); + + // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées + return true; + } catch (e) { + // Une erreur est renvoyée : les duplicatas sont interdits en mode strict + return false; + } +} +``` + +### Définitions de méthodes + +Une propriété d'un objet peut être une [function](/fr/docs/Web/JavaScript/Reference/Functions), un [accesseur](/fr/docs/Web/JavaScript/Reference/Functions/get) ou un [mutateur](/fr/docs/Web/JavaScript/Reference/Functions/set) : + +```js +var o = { + property: function (paramètres) {}, + get property() {}, + set property(valeur) {} +}; +``` + +Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "`function`". + +```js +// Raccourci pour les noms de méthodes (ES2015) +var o = { + property(paramètres) {}, + *generator() {} +}; +``` + +Ou encore : + +```js +var o = { + *generator() { + ... + } +}; +``` + +En utilisant uniquement ECMAScript 5, on aurait écrit : + +_(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :_ + +```js +var o = { + generator: function* (){} +}; +``` + +Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les[ définitions de méthode](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions). + +### Noms de propriétés calculés + +Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets `[]`, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets : + +```js +// Calcul des noms de propriétés (ES2015) +var i = 0; +var a = { + ['toto' + ++i]: i, + ['toto' + ++i]: i, + ['toto' + ++i]: i +}; + +console.log(a.toto1); // 1 +console.log(a.toto2); // 2 +console.log(a.toto3); // 3 + +var param = 'taille'; +var config = { + [param]: 12, + ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +}; + +console.log(config); // { taille: 12, mobileTaille: 4 } +``` + +### Décomposition des propriétés + +La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet. + +Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}. + +```js +var obj1 = { toto: 'truc', x: 42 }; +var obj2 = { toto: 'bidule', y: 13 }; + +var clone = { ...obj1 }; +// Object { toto: 'truc', x: 42 } + +var fusion = { ...obj1, ...obj2 }; +// Object { toto: 'bidule', x: 42, y: 13 }; +``` + +On notera que la méthode {{jsxref("Object.assign()")}} déclenche [les mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set), ce qui n'est pas le cas de l'opérateur de décomposition. + +### Changement de prototype + +Définir une propriété avec la syntaxe `__proto__: valeur` ou `"__proto__": valeur` ne permet pas de créer une propriété avec le nom `__proto__`. Si la valeur fournie est un objet ou est [`null`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/null), cela modifie le `[[Prototype]]` de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.) + +```js +var obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +var obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); + +var protoObj = {}; +var obj3 = { '__proto__': protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); + +var obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); +``` + +On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe. + +Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique. + +```js +var __proto__ = 'variable'; + +var obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty('__proto__')); +assert(obj1.__proto__ === 'variable'); + +var obj2 = { __proto__() { return 'hello'; } }; +assert(obj2.__proto__() === 'hello'); + +var obj3 = { ['__prot' + 'o__']: 17 }; +assert(obj3.__proto__ === 17); +``` + +## Notation littérale et JSON + +La notation utilisant un littéral objet n'est pas identique à celle utilisée par la **J**ava**S**cript **O**bject **N**otation ([JSON](/fr/docs/JSON)). Bien que ces notations se ressemblent, il existe certaines différences : + +- JSON ne permet de définir des propriétés qu'en utilisant la syntaxe `"propriété": valeur`. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie. +- En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, `true`, `false`, `null`, ou tout autre objet (JSON). +- Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON. +- Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}. +- {{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | [Ajout des _getter_ et ](/fr/docs/Web/JavaScript/Reference/Functions/get)_[setter](/fr/docs/Web/JavaScript/Reference/Functions/set)_ (accesseur/mutateur). | +| {{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ES2015')}} | Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés. | +| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.object_initializer")}} + +## Voir aussi + +- [Accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) +- [`get`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get) / [`set`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set) +- [Définitions de méthode](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode) +- [Grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) de JavaScript diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html deleted file mode 100644 index ca76cf3985..0000000000 --- a/files/fr/web/javascript/reference/operators/operator_precedence/index.html +++ /dev/null @@ -1,360 +0,0 @@ ---- -title: Précédence des opérateurs -slug: Web/JavaScript/Reference/Operators/Operator_Precedence -tags: - - JavaScript - - Opérateur - - Reference - - precedence -translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence -original_slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La <strong>précédence des opérateurs</strong> détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.</p> - -<p>Ainsi, l'opérateur de multiplication (« <code>*</code> ») (ayant une précédence plus haute que l'opérateur d'addition (« <code>+</code> »)) est évalué en premier et l'expression <code>6 * 4 + 2</code> renverra 26 (et pas 36).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> - - - -<h2 id="Associativité">Associativité</h2> - -<p>L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :</p> - -<pre class="syntaxbox">a OP b OP c -</pre> - -<p>Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme <code>(a OP b) OP c</code>, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme <code>a OP (b OP c)</code>. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :</p> - -<pre class="brush:js">a = b = 5; -</pre> - -<p>avec le résultat attendu que <code>a</code> et <code>b</code> obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, <code>b</code> est défini à la valeur 5. Ensuite, <code>a</code> est défini avec la valeur renvoyée par <code>b = 5</code> qui est 5.</p> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">3 > 2 && 2 > 1 -// renvoie true - -3 > 2 > 1 -// renvoie false car 3 > 2 vaut true et que true > 1 vaut false -// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1 -</pre> - -<h2 id="Tableau">Tableau</h2> - -<p>Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Précédence</th> - <th>Type d'opérateur</th> - <th>Associativité</th> - <th>Opérateurs individuels</th> - </tr> - <tr> - <td>0</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement">Groupement</a></td> - <td>Non applicable</td> - <td><code>( … )</code></td> - </tr> - <tr> - <td colspan="1" rowspan="5">1</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point">Accès à un membre</a></td> - <td>Gauche à droite</td> - <td><code>… . …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">Accès à un membre calculé</a></td> - <td>Gauche à droite</td> - <td><code>… [ … ]</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (avec une liste d'arguments)</td> - <td>Non applicable</td> - <td><code>new … ( … )</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a></td> - <td>Gauche à droite</td> - <td><code>… ( <var>… </var>)</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Chaînage optionnel</a></td> - <td>Gauche à droite</td> - <td><code>?.</code></td> - </tr> - <tr> - <td>2</td> - <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (sans liste d'arguments)</td> - <td>Droite à gauche</td> - <td><code>new …</code></td> - </tr> - <tr> - <td rowspan="2">3</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation suffixe</a></td> - <td>Non applicable</td> - <td><code>… ++</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation suffixe</a></td> - <td>Non applicable</td> - <td><code>… --</code></td> - </tr> - <tr> - <td colspan="1" rowspan="10">4</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29">NON logique</a></td> - <td>Droite à gauche</td> - <td><code>! …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">NON binaire</a></td> - <td>Droite à gauche</td> - <td><code>~ …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)">Plus unaire</a></td> - <td>Droite à gauche</td> - <td><code>+ …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)">Négation unaire</a></td> - <td>Droite à gauche</td> - <td><code>- …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation préfixe</a></td> - <td>Droite à gauche</td> - <td><code>++ …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation préfixe</a></td> - <td>Droite à gauche</td> - <td><code>-- …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code></td> - <td>Droite à gauche</td> - <td><code>typeof …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">void</a></code></td> - <td>Droite à gauche</td> - <td><code>void …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></td> - <td>Droite à gauche</td> - <td><code>delete …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await">await</a></code></td> - <td>Droite à gauche</td> - <td><code>await …</code></td> - </tr> - <tr> - <td rowspan="4">5</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Exponentiation</a></td> - <td>Droite à gauche</td> - <td><code>… ** …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)">Multiplication</a></td> - <td>Gauche à droite</td> - <td><code>… * …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)">Division</a></td> - <td>Gauche à droite</td> - <td><code>… / …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)">Reste</a></td> - <td>Gauche à droite</td> - <td><code>… % …</code></td> - </tr> - <tr> - <td rowspan="2">6</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">Addition</a></td> - <td>Gauche à droite</td> - <td><code>… + …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)">Soustraction</a></td> - <td>Gauche à droite</td> - <td><code>… - …</code></td> - </tr> - <tr> - <td rowspan="3">7</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td> - <td>Gauche à droite</td> - <td><code>… << …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td> - <td>Gauche à droite</td> - <td><code>… >> …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite non-signé</a></td> - <td>Gauche à droite</td> - <td><code>… >>> …</code></td> - </tr> - <tr> - <td rowspan="6">8</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)">Inférieur strict</a></td> - <td>Gauche à droite</td> - <td><code>… < …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)">Inférieur ou égal</a></td> - <td>Gauche à droite</td> - <td><code>… <= …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)">Supérieur strict</a></td> - <td>Gauche à droite</td> - <td><code>… > …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)">Supérieur ou égal</a></td> - <td>Gauche à droite</td> - <td><code>… >= …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td> - <td>Gauche à droite</td> - <td><code>… in …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof">instanceof</a></code></td> - <td>Gauche à droite</td> - <td><code>… instanceof …</code></td> - </tr> - <tr> - <td rowspan="4">9</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité faible</a></td> - <td>Gauche à droite</td> - <td><code>… == …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité faible</a></td> - <td>Gauche à droite</td> - <td><code>… != …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte</a></td> - <td>Gauche à droite</td> - <td><code>… === …</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a></td> - <td>Gauche à droite</td> - <td><code>… !== …</code></td> - </tr> - <tr> - <td>10</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&_.28ET_binaire.29">ET binaire</a></td> - <td>Gauche à droite</td> - <td><code>… & …</code></td> - </tr> - <tr> - <td>11</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29">OU exclusif (<em>XOR</em>) binaire</a></td> - <td>Gauche à droite</td> - <td><code>… ^ …</code></td> - </tr> - <tr> - <td>12</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" title="JavaScript/Reference/Operators/Bitwise_Operators">OU binaire</a></td> - <td>Gauche à droite</td> - <td><code>… | …</code></td> - </tr> - <tr> - <td>13</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&&.29">ET logique</a></td> - <td>Gauche à droite</td> - <td><code>… && …</code></td> - </tr> - <tr> - <td>14</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)">OU logique</a></td> - <td>Gauche à droite</td> - <td><code>… || …</code></td> - </tr> - <tr> - <td>15</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Opérateur conditionnel ternaire</a></td> - <td>Droite à gauche</td> - <td><code>… ? … : …</code></td> - </tr> - <tr> - <td rowspan="13">16</td> - <td rowspan="13"><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation">Affectation</a></td> - <td rowspan="13">Droite à gauche</td> - <td><code>… = …</code></td> - </tr> - <tr> - <td><code>… += …</code></td> - </tr> - <tr> - <td><code>… -= …</code></td> - </tr> - <tr> - <td><code>… *= …</code></td> - </tr> - <tr> - <td><code>… /= …</code></td> - </tr> - <tr> - <td><code>… **= …</code></td> - </tr> - <tr> - <td><code>… %= …</code></td> - </tr> - <tr> - <td><code>… <<= …</code></td> - </tr> - <tr> - <td><code>… >>= …</code></td> - </tr> - <tr> - <td><code>… >>>= …</code></td> - </tr> - <tr> - <td><code>… &= …</code></td> - </tr> - <tr> - <td><code>… ^= …</code></td> - </tr> - <tr> - <td><code>… |= …</code></td> - </tr> - <tr> - <td colspan="1" rowspan="2">17</td> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code></td> - <td>Droite à gauche</td> - <td><code>yield …</code></td> - </tr> - <tr> - <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*">yield*</a></code></td> - <td>Droite à gauche</td> - <td><code>yield* …</code></td> - </tr> - <tr> - <td>18</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">Décomposition</a></td> - <td>Non applicable</td> - <td><code>...</code> …</td> - </tr> - <tr> - <td>19</td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule">Virgule</a></td> - <td>Gauche à droite</td> - <td><code>… , …</code></td> - </tr> - </tbody> -</table> diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.md b/files/fr/web/javascript/reference/operators/operator_precedence/index.md new file mode 100644 index 0000000000..367e9624fb --- /dev/null +++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.md @@ -0,0 +1,620 @@ +--- +title: Précédence des opérateurs +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Opérateur + - Reference + - precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +original_slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs +--- +{{jsSidebar("Operators")}} + +La **précédence des opérateurs** détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier. + +Ainsi, l'opérateur de multiplication (« `*` ») (ayant une précédence plus haute que l'opérateur d'addition (« `+` »)) est évalué en premier et l'expression `6 * 4 + 2` renverra 26 (et pas 36). + +{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}} + +## Associativité + +L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante : + + a OP b OP c + +Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme `(a OP b) OP c`, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme `a OP (b OP c)`. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire : + +```js +a = b = 5; +``` + +avec le résultat attendu que `a` et `b` obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, `b` est défini à la valeur 5. Ensuite, `a` est défini avec la valeur renvoyée par `b = 5` qui est 5. + +## Exemples + +```js +3 > 2 && 2 > 1 +// renvoie true + +3 > 2 > 1 +// renvoie false car 3 > 2 vaut true et que true > 1 vaut false +// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1 +``` + +## Tableau + +Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence. + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Précédence</th> + <th>Type d'opérateur</th> + <th>Associativité</th> + <th>Opérateurs individuels</th> + </tr> + <tr> + <td>0</td> + <td> + <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement" + >Groupement</a + > + </td> + <td>Non applicable</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">1</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point" + >Accès à un membre</a + > + </td> + <td>Gauche à droite</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets" + >Accès à un membre calculé</a + > + </td> + <td>Gauche à droite</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td> + <code + ><a + href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new" + >new</a + ></code + > + (avec une liste d'arguments) + </td> + <td>Non applicable</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td> + <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a> + </td> + <td>Gauche à droite</td> + <td> + <code>… ( <var>… </var>)</code> + </td> + </tr> + <tr> + <td> + <a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining" + >Chaînage optionnel</a + > + </td> + <td>Gauche à droite</td> + <td><code>?.</code></td> + </tr> + <tr> + <td>2</td> + <td> + <code + ><a + href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new" + >new</a + ></code + > + (sans liste d'arguments) + </td> + <td>Droite à gauche</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">3</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)" + >Incrémentation suffixe</a + > + </td> + <td>Non applicable</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)" + >Décrémentation suffixe</a + > + </td> + <td>Non applicable</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">4</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29" + >NON logique</a + > + </td> + <td>Droite à gauche</td> + <td><code>! …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29" + >NON binaire</a + > + </td> + <td>Droite à gauche</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)" + >Plus unaire</a + > + </td> + <td>Droite à gauche</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)" + >Négation unaire</a + > + </td> + <td>Droite à gauche</td> + <td><code>- …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)" + >Incrémentation préfixe</a + > + </td> + <td>Droite à gauche</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)" + >Décrémentation préfixe</a + > + </td> + <td>Droite à gauche</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td> + <code + ><a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof" + >typeof</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td> + <code + ><a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void" + >void</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>void …</code></td> + </tr> + <tr> + <td> + <code + ><a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete" + >delete</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td> + <code + ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await" + >await</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>await …</code></td> + </tr> + <tr> + <td rowspan="4">5</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)" + >Exponentiation</a + > + </td> + <td>Droite à gauche</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)" + >Multiplication</a + > + </td> + <td>Gauche à droite</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)" + >Division</a + > + </td> + <td>Gauche à droite</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)" + >Reste</a + > + </td> + <td>Gauche à droite</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">6</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)" + >Addition</a + > + </td> + <td>Gauche à droite</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)" + >Soustraction</a + > + </td> + <td>Gauche à droite</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">7</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29" + >Décalage binaire à gauche</a + > + </td> + <td>Gauche à droite</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29" + >Décalage binaire à droite</a + > + </td> + <td>Gauche à droite</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29" + >Décalage binaire à droite non-signé</a + > + </td> + <td>Gauche à droite</td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">8</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)" + >Inférieur strict</a + > + </td> + <td>Gauche à droite</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)" + >Inférieur ou égal</a + > + </td> + <td>Gauche à droite</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)" + >Supérieur strict</a + > + </td> + <td>Gauche à droite</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)" + >Supérieur ou égal</a + > + </td> + <td>Gauche à droite</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td> + <code + ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in" + >in</a + ></code + > + </td> + <td>Gauche à droite</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td> + <code + ><a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof" + >instanceof</a + ></code + > + </td> + <td>Gauche à droite</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">9</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)" + >Égalité faible</a + > + </td> + <td>Gauche à droite</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)" + >Inégalité faible</a + > + </td> + <td>Gauche à droite</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)" + >Égalité stricte</a + > + </td> + <td>Gauche à droite</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)" + >Inégalité stricte</a + > + </td> + <td>Gauche à droite</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>10</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&_.28ET_binaire.29" + >ET binaire</a + > + </td> + <td>Gauche à droite</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>11</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29" + >OU exclusif (<em>XOR</em>) binaire</a + > + </td> + <td>Gauche à droite</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>12</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" + title="JavaScript/Reference/Operators/Bitwise_Operators" + >OU binaire</a + > + </td> + <td>Gauche à droite</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>13</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&&.29" + >ET logique</a + > + </td> + <td>Gauche à droite</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>14</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)" + >OU logique</a + > + </td> + <td>Gauche à droite</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>15</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel" + >Opérateur conditionnel ternaire</a + > + </td> + <td>Droite à gauche</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">16</td> + <td rowspan="13"> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation" + >Affectation</a + > + </td> + <td rowspan="13">Droite à gauche</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td colspan="1" rowspan="2">17</td> + <td> + <code + ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield" + >yield</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td> + <code + ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*" + >yield*</a + ></code + > + </td> + <td>Droite à gauche</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>18</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition" + >Décomposition</a + > + </td> + <td>Non applicable</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>19</td> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule" + >Virgule</a + > + </td> + <td>Gauche à droite</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html deleted file mode 100644 index 7fd8595772..0000000000 --- a/files/fr/web/javascript/reference/operators/optional_chaining/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Chaînage optionnel (optional chaining) -slug: Web/JavaScript/Reference/Operators/Optional_chaining -tags: - - Chaînage - - Chaînage optionnel - - Coalescence - - JavaScript - - Operator - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Optional_chaining -original_slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de <strong>chaînage optionnel</strong> <strong><code>?.</code></strong> permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur <code>?.</code> fonctionne de manière similaire à l'opérateur de chaînage <code>.</code>, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec <code>undefined</code> pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne <code>undefined</code> si la fonction donnée n'existe pas.</p> - -<p>Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.</p> - -<p>Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type <code>if (typeof a == "undefined")</code>.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var> -<var>obj</var>?.[<var>expr</var>] -<em>arr?.[index]</em> -<var>func</var>?.(<var>args</var>) -</pre> - -<h2 id="Description">Description</h2> - -<p>L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit <code>undefined</code> ou <code>null</code>.</p> - -<p>Par exemple, considérant un objet <code>obj</code> qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :</p> - -<pre class="brush: js notranslate">let nestedProp = obj.premier && obj.premier.second;</pre> - -<p>La valeur de <code>obj.premier</code> est confirmée comme n'étant pas <code>null</code> (ni <code>undefined</code>) avant que d'accéder à la valeur de <code>obj.premier.second</code>. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement <code>obj.premier.second</code> directement sans vérifier <code>obj.premier</code>.</p> - -<p>Avec l'opérateur de chaînage optionnel (<code>?.</code>), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de <code>obj.premier</code> avant que d'accéder à <code>obj.premier.second</code> :</p> - -<pre class="brush: js notranslate">let nestedProp = obj.<code>premier</code>?.second;</pre> - -<p>En utilisant l'opérateur <code>?.</code> au lieu de l'opérateur <code>.</code>, JavaScript sait implicitement qu'il doit vérifier <code>obj.premier</code> pour être certain qu'il ne soit <code>null</code> ou <code>undefined</code> avant que de tenter d'accéder à <code>obj.first.second</code>. Si <code>obj.premier</code> est <code>null</code> ou <code>undefined</code>, l'expression se court-circuite automatiquement et retourne <code>undefined</code>.</p> - -<p>C'est équivalent à : </p> - -<pre class="brush: js notranslate">let temp = obj.<code>premier</code>; -let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); -</pre> - -<h3 id="Chaînage_optionnel_avec_des_appels_de_fonctions">Chaînage optionnel avec des appels de fonctions</h3> - -<p>Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.</p> - -<p>Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur <code>undefined</code> pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :</p> - -<pre class="brush: js notranslate">let result = uneInterface.uneMéthode?.();</pre> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser <code>?.</code> jètera aussi une exception {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> -</div> - -<h4 id="Réaliser_des_fonctions_de_rappel_optionnelles_ou_des_écouteurs_dévènements">Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements</h4> - -<p>Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">une affectation par décomposition</a>, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant <code>?.</code>, vous pourriez vous passer de cette vérification supplémentaire :</p> - -<pre class="brush: js notranslate">// ES2019 -function doSomething(onContent, onError) { - try { - // ... faire quelque chose avec les données - } - catch (err) { - if (onError) { // vérifier que onError existe réellement - onError(err.message); - } - } -} -</pre> - -<pre class="brush: js notranslate">// Utiliser le chaînage optionnel avec les appels de fonctions -function doSomething(onContent, onError) { - try { - // ... faire quelque chose avec les données - } - catch (err) { - onError?.(err.message); // pas d'exception si onError n'est pas défini - } -} -</pre> - -<h3 id="Chaînage_optionnel_avec_les_expressions">Chaînage optionnel avec les expressions</h3> - -<p>Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notation avec crochets des accesseurs de propriétés</a> :</p> - -<pre class="brush: js notranslate">let nestedProp = obj?.['propName']; -</pre> - -<h3 id="Chaînage_optionnel_invalide_depuis_le_côté_gauche_dune_affectation">Chaînage optionnel invalide depuis le côté gauche d'une affectation</h3> - -<pre class="notranslate"><code>let objet = {}; -objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> - -<h3 id="Accès_aux_éléments_de_tableau_avec_le_chaînage_optionnel">Accès aux éléments de tableau avec le chaînage optionnel</h3> - -<pre class="notranslate">let élément = arr?.[42];</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_basique">Exemple basique</h3> - -<p>Cet exemple cherche la valeur de la propriété <code>name</code> dans un objet stocké comme propriété de nom <code>bar</code> d'un objet Map alors que cet objet <code>bar</code> n'existe pas. Le résultat est donc <code>undefined</code>.</p> - -<pre class="brush: js notranslate">let monMap = new Map(); -monMap.set("foo", {name: "baz", desc: "inga"}); - -let nameBar = monMap.get("bar")?.name;</pre> - -<h3 id="Court-circuiter_une_évaluation">Court-circuiter une évaluation</h3> - -<p>Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est <code>null</code> ou <code>undefined</code>, l'expression ne sera par évaluée. Par exemple :</p> - -<pre class="brush: js notranslate">let objetPotentiellementNul = null; -let x = 0; -let prop = objetPotentiellementNul?.[x++]; - -console.log(x); // 0 car x n'a pas été incrémenté -</pre> - -<h3 id="Empiler_les_opérateurs_de_chaînage_optionnel">Empiler les opérateurs de chaînage optionnel</h3> - -<p>Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :</p> - -<pre class="brush: js notranslate">let client = { - nom: "Carl", - details: { - age: 82, - localisation: "Paradise Falls" - // adresse détaillée inconnue - } -}; -let villeDuClient = client.details?.adresse?.ville; - -// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction -let durée = vacations.trip?.getTime?.(); -</pre> - -<h3 id="Combinaison_avec_lopérateur_de_coalescence_des_nuls_Nullish_coalescing_operator">Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)</h3> - -<p>L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :</p> - -<pre class="notranslate">let client = { - nom: "Carl", - details: { age: 82 } -}; -const villeDuClient = client?.ville ?? "Ville Inconnue"; -console.log(villeDuClient); // Ville inconnue</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.optional_chaining")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.md b/files/fr/web/javascript/reference/operators/optional_chaining/index.md new file mode 100644 index 0000000000..f7f2379ba4 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.md @@ -0,0 +1,185 @@ +--- +title: Chaînage optionnel (optional chaining) +slug: Web/JavaScript/Reference/Operators/Optional_chaining +tags: + - Chaînage + - Chaînage optionnel + - Coalescence + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +original_slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining +--- +{{jsSidebar("Operators")}} + +L'opérateur de **chaînage optionnel** **`?.`** permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur `?.` fonctionne de manière similaire à l'opérateur de chaînage `.`, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec `undefined` pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne `undefined` si la fonction donnée n'existe pas. + +Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises. + +Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type `if (typeof a == "undefined")`. + +{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}} + +## Syntaxe + + obj?.prop + obj?.[expr] + arr?.[index] + func?.(args) + +## Description + +L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit `undefined` ou `null`. + +Par exemple, considérant un objet `obj` qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que : + +```js +let nestedProp = obj.premier && obj.premier.second; +``` + +La valeur de `obj.premier` est confirmée comme n'étant pas `null` (ni `undefined`) avant que d'accéder à la valeur de `obj.premier.second`. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement `obj.premier.second` directement sans vérifier `obj.premier`. + +Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` : + +```js +let nestedProp = obj.premier?.second; +``` + +En utilisant l'opérateur `?.` au lieu de l'opérateur `.`, JavaScript sait implicitement qu'il doit vérifier `obj.premier` pour être certain qu'il ne soit `null` ou `undefined` avant que de tenter d'accéder à `obj.first.second`. Si `obj.premier` est `null` ou `undefined`, l'expression se court-circuite automatiquement et retourne `undefined`. + +C'est équivalent à : + +```js +let temp = obj.premier; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +``` + +### Chaînage optionnel avec des appels de fonctions + +Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur. + +Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur `undefined` pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée : + +```js +let result = uneInterface.uneMéthode?.(); +``` + +> **Note :** S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser `?.` jètera aussi une exception {{jsxref("TypeError")}} (` x.y`` is not a function `). + +#### Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements + +Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec [une affectation par décomposition](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring), vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant `?.`, vous pourriez vous passer de cette vérification supplémentaire : + +```js +// ES2019 +function doSomething(onContent, onError) { + try { + // ... faire quelque chose avec les données + } + catch (err) { + if (onError) { // vérifier que onError existe réellement + onError(err.message); + } + } +} +``` + +```js +// Utiliser le chaînage optionnel avec les appels de fonctions +function doSomething(onContent, onError) { + try { + // ... faire quelque chose avec les données + } + catch (err) { + onError?.(err.message); // pas d'exception si onError n'est pas défini + } +} +``` + +### Chaînage optionnel avec les expressions + +Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant [la notation avec crochets des accesseurs de propriétés](/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation) : + +```js +let nestedProp = obj?.['propName']; +``` + +### Chaînage optionnel invalide depuis le côté gauche d'une affectation + + let objet = {}; + objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment + +### Accès aux éléments de tableau avec le chaînage optionnel + + let élément = arr?.[42]; + +## Exemples + +### Exemple basique + +Cet exemple cherche la valeur de la propriété `name` dans un objet stocké comme propriété de nom `bar` d'un objet Map alors que cet objet `bar` n'existe pas. Le résultat est donc `undefined`. + +```js +let monMap = new Map(); +monMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = monMap.get("bar")?.name; +``` + +### Court-circuiter une évaluation + +Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est `null` ou `undefined`, l'expression ne sera par évaluée. Par exemple : + +```js +let objetPotentiellementNul = null; +let x = 0; +let prop = objetPotentiellementNul?.[x++]; + +console.log(x); // 0 car x n'a pas été incrémenté +``` + +### Empiler les opérateurs de chaînage optionnel + +Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois : + +```js +let client = { + nom: "Carl", + details: { + age: 82, + localisation: "Paradise Falls" + // adresse détaillée inconnue + } +}; +let villeDuClient = client.details?.adresse?.ville; + +// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction +let durée = vacations.trip?.getTime?.(); +``` + +### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator) + +L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée : + + let client = { + nom: "Carl", + details: { age: 82 } + }; + const villeDuClient = client?.ville ?? "Ville Inconnue"; + console.log(villeDuClient); // Ville inconnue + +## Spécifications + +| Specification | +| ---------------------------------------------------------------------------------------------------- | +| {{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}} | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.optional_chaining")}} + +## Voir aussi + +- {{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html deleted file mode 100644 index 8a1ab4bbd6..0000000000 --- a/files/fr/web/javascript/reference/operators/property_accessors/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Accesseurs de propriétés -slug: Web/JavaScript/Reference/Operators/Property_Accessors -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Property_Accessors -original_slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Les <strong>accesseurs de propriété</strong> permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">objet.propriété -objet["propriété"] -</pre> - -<h2 id="Description">Description</h2> - -<p>Les objets peuvent être vus comme des tableaux associatifs (<em>map</em>, dictionnaires, table de hachage, annuaire, etc.). Les <em>clés</em> (<em>keys</em>) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).</p> - -<p>Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.</p> - -<h3 id="Notation_avec_point">Notation avec point</h3> - -<pre class="brush: js">obtenir = objet.propriété; -objet.propriété = définir; -</pre> - -<p><code>propriété</code> doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« <code>_</code> ») et signes dollar (« <code>$</code> »), qui ne peut commencer par un nombre. Par exemple, <code>objet.$1</code> est valide, mais <code>objet.1</code> ne l'est pas.</p> - -<pre class="brush: js">document.createElement('pre'); -</pre> - -<p>Ici, la méthode <code>createElement</code> est obtenue depuis l'objet <code>document</code> et est appelée.</p> - -<p>Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :</p> - -<pre class="brush: js">77 .toExponential(); -// ou -77 -.toExponential(); -// ou, mieux pour la lisibilité -(77).toExponential(); -// ou encore -77.0.toExponential(); -// 77. correspond à 77.0 et là il n'y a aucun doute -</pre> - -<h3 id="Notation_avec_crochets">Notation avec crochets</h3> - -<pre class="brush: js">obtenir = objet[nom_de_propriété]; -objet[nom_de_propriété] = définir; -</pre> - -<p><code>nom_de_propriété</code> est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple <code>"1foo"</code>, <code>"!bar!"</code> ou même <code>" "</code> (une espace).</p> - -<h4 id="Exemple">Exemple</h4> - -<pre class="brush: js">document['createElement']('pre'); -</pre> - -<p>Cette ligne fait exactement la même chose que l'exemple précédent.</p> - -<h3 id="Noms_de_propriétés">Noms de propriétés</h3> - -<p>Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString"><code>toString</code></a>.</p> - -<h4 id="Exemples">Exemples</h4> - -<pre class="brush: js">var objet = {}; -objet['1'] = 'valeur'; -console.log(objet[1]); -</pre> - -<p>Ceci affichera « valeur », étant donné que le nombre <code>1</code> sera converti en une chaîne <code>"1"</code>.</p> - -<pre class="brush: js">var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; -objet[toto] = 'valeur'; -console.log(objet[truc]); -</pre> - -<p>Ce code affichera également « valeur », étant donné que <code>toto</code> et <code>truc</code> seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript <a href="fr/SpiderMonkey">SpiderMonkey</a>, cette chaîne serait <code>"['object Object']"</code>.</p> - -<h3 id="Liaison_de_méthodes">Liaison de méthodes</h3> - -<p>Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, <code>this</code> n'est pas défini dans une méthode, c'est-à-dire que <code>this</code> ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, <code>this</code> est « passé » par l'appel de la fonction.</p> - -<p>Pour plus d'informations, consultez la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes">l'opérateur <code>this</code> et les liaisons de méthodes</a>.</p> - -<h3 id="Note_concernant_eval">Note concernant <code>eval</code></h3> - -<p>Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.</p> - -<pre class="brush: js">x = eval('document.formulaire.' + controle + '.value'); -</pre> - -<p><code>eval</code> est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :</p> - -<pre class="brush: js">x = document.formulaire[controle].value; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale, implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.property_accessors")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Object")}}</li> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">L'affectation par décomposition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.md b/files/fr/web/javascript/reference/operators/property_accessors/index.md new file mode 100644 index 0000000000..c71814b931 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.md @@ -0,0 +1,134 @@ +--- +title: Accesseurs de propriétés +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +original_slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres +--- +{{jsSidebar("Operators")}} + +Les **accesseurs de propriété** permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets + +{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}} + +## Syntaxe + + objet.propriété + objet["propriété"] + +## Description + +Les objets peuvent être vus comme des tableaux associatifs (_map_, dictionnaires, table de hachage, annuaire, etc.). Les _clés_ (_keys_) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}). + +Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets. + +### Notation avec point + +```js +obtenir = objet.propriété; +objet.propriété = définir; +``` + +`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas. + +```js +document.createElement('pre'); +``` + +Ici, la méthode `createElement` est obtenue depuis l'objet `document` et est appelée. + +Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal : + +```js +77 .toExponential(); +// ou +77 +.toExponential(); +// ou, mieux pour la lisibilité +(77).toExponential(); +// ou encore +77.0.toExponential(); +// 77. correspond à 77.0 et là il n'y a aucun doute +``` + +### Notation avec crochets + +```js +obtenir = objet[nom_de_propriété]; +objet[nom_de_propriété] = définir; +``` + +`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace). + +#### Exemple + +```js +document['createElement']('pre'); +``` + +Cette ligne fait exactement la même chose que l'exemple précédent. + +### Noms de propriétés + +Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode [`toString`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString). + +#### Exemples + +```js +var objet = {}; +objet['1'] = 'valeur'; +console.log(objet[1]); +``` + +Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`. + +```js +var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; +objet[toto] = 'valeur'; +console.log(objet[truc]); +``` + +Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`. + +### Liaison de méthodes + +Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction. + +Pour plus d'informations, consultez la page sur [l'opérateur `this` et les liaisons de méthodes](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes). + +### Note concernant `eval` + +Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts. + +```js +x = eval('document.formulaire.' + controle + '.value'); +``` + +`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets : + +```js +x = document.formulaire[controle].value; +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.property_accessors")}} + +## Voir aussi + +- {{jsxref("Object")}} +- {{jsxref("Object.defineProperty()")}} +- [L'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition) +- [Le chaînage optionnel](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining) diff --git a/files/fr/web/javascript/reference/operators/remainder/index.html b/files/fr/web/javascript/reference/operators/remainder/index.html deleted file mode 100644 index c5df6dd43d..0000000000 --- a/files/fr/web/javascript/reference/operators/remainder/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Reste (%) -slug: Web/JavaScript/Reference/Operators/Remainder -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.remainder -translation-of: Web/JavaScript/Reference/Operators/Remainder ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur du reste (<code>%</code>) renvoie le reste de la division de l'opérande gauche par l'opérande droit. Le résultat a toujours le signe du numérateur.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> - -<p>Bien que dans la plupart des langages, <code>%</code> est un opérateur de reste, pour d'autres (par exemple <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python, Perl</a>) c'est un opérateur de modulo. Lorsqu'on utilise des valeurs positives, les deux opérateurs sont équivalents mais lorsque le numérateur et de dénominateur ont des signes différents, le reste et le modulo fourniront des signes différents. Pour obtenir une opération équivalente au modulo en JavaScript, on pourra utiliser <code>((a % n ) + n ) % n</code>.</p> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>var1</var> % <var>var2</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="remainder_with_positive_dividend">Reste avec numérateur positif</h3> - -<pre class="brush: js"> -12 % 5 // 2 - 1 % -2 // 1 - 1 % 2 // 1 - 2 % 3 // 2 -5.5 % 2 // 1.5 -</pre> - -<h3 id="remainder_with_negative_dividend">Reste avec numérateur négatif</h3> - -<pre class="brush: js"> --12 % 5 // -2 --1 % 2 // -1 --4 % 2 // -0 -</pre> - -<h3 id="remainder_with_nan">Reste avec NaN</h3> - -<pre class="brush: js"> -NaN % 2 // NaN -</pre> - -<h3 id="remainder_with_infinity">Reste avec l'infini</h3> - -<pre class="brush: js"> -Infinity % 2 // NaN -Infinity % 0 // NaN -Infinity % Infinity // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/remainder/index.md b/files/fr/web/javascript/reference/operators/remainder/index.md new file mode 100644 index 0000000000..7cafa91697 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/remainder/index.md @@ -0,0 +1,77 @@ +--- +title: Reste (%) +slug: Web/JavaScript/Reference/Operators/Remainder +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.remainder +--- +{{jsSidebar("Operators")}} + +L'opérateur du reste (`%`) renvoie le reste de la division de l'opérande gauche par l'opérande droit. Le résultat a toujours le signe du numérateur. + +{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}} + +Bien que dans la plupart des langages, `%` est un opérateur de reste, pour d'autres (par exemple [Python, Perl](https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages)) c'est un opérateur de modulo. Lorsqu'on utilise des valeurs positives, les deux opérateurs sont équivalents mais lorsque le numérateur et de dénominateur ont des signes différents, le reste et le modulo fourniront des signes différents. Pour obtenir une opération équivalente au modulo en JavaScript, on pourra utiliser `((a % n ) + n ) % n`. + +## Syntaxe + +```js +Opérateur : var1 % var2 +``` + +## Exemples + +### Reste avec numérateur positif + +```js +12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +``` + +### Reste avec numérateur négatif + +```js +-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0 +``` + +### Reste avec NaN + +```js +NaN % 2 // NaN +``` + +### Reste avec l'infini + +```js +Infinity % 2 // NaN +Infinity % 0 // NaN +Infinity % Infinity // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/remainder_assignment/index.html b/files/fr/web/javascript/reference/operators/remainder_assignment/index.html deleted file mode 100644 index 87a47940d9..0000000000 --- a/files/fr/web/javascript/reference/operators/remainder_assignment/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Affectation après reste (%=) -slug: Web/JavaScript/Reference/Operators/Remainder_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.remainder_assignment -translation-of: Web/JavaScript/Reference/Operators/Remainder_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de reste et d'affectation (<code>%=</code>) calcule le reste de la division de l'opérande gauche par l'opérande droit et affecte ce résultat à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x %= y -<strong>Signification :</strong> x = x % y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_remainder_assignment">Utiliser l'opérateur de reste et d'affectation</h3> - -<pre class="brush: js"> -let truc = 5; -truc %= 2; // 1 -truc %= 'toto'; // NaN -truc %= 0; // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">L'opérateur de reste</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/remainder_assignment/index.md b/files/fr/web/javascript/reference/operators/remainder_assignment/index.md new file mode 100644 index 0000000000..a31cc9a472 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/remainder_assignment/index.md @@ -0,0 +1,47 @@ +--- +title: Affectation après reste (%=) +slug: Web/JavaScript/Reference/Operators/Remainder_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.remainder_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de reste et d'affectation (`%=`) calcule le reste de la division de l'opérande gauche par l'opérande droit et affecte ce résultat à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x %= y +Signification : x = x % y +``` + +## Exemples + +### Utiliser l'opérateur de reste et d'affectation + +```js +let truc = 5; +truc %= 2; // 1 +truc %= 'toto'; // NaN +truc %= 0; // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) diff --git a/files/fr/web/javascript/reference/operators/right_shift/index.html b/files/fr/web/javascript/reference/operators/right_shift/index.html deleted file mode 100644 index 79c94864a3..0000000000 --- a/files/fr/web/javascript/reference/operators/right_shift/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Décalage binaire à droite (>>) -slug: Web/JavaScript/Reference/Operators/Right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.right_shift -translation-of: Web/JavaScript/Reference/Operators/Right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de <strong>décalage binaire à droite (<code>>></code>)</strong> décale la séquence de bits représentée par le premier opérande d'autant de bits vers la droite que le nombre indiqué par le second opérande. Les bits en excès à droite sont écartés. Pour le remplissage des bits par la gauche, c'est le bit le plus à gauche initialement qui est recopié autant de fois que nécessaire. Aussi, le bit le plus à gauche dans le résultat sera le même que le bit le plus à gauche de l'opérande et les deux valeurs auront donc le même signe.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> >> <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Cet opérateur décale les bits de la valeur fournie par le premier opérande d'autant de fois qu'indiqué par le deuxième opérande. Les bits en excès à droite sont écartés et pour les bits les plus à gauche, c'est le bit initialement le plus à gauche qui est dupliqué. On garde ainsi le même signe entre la valeur du premier opérande et la valeur fournie par le résultat.</p> - -<p>Ainsi, <code>9 >> 2</code> donnera <code>2</code> :</p> - -<pre class="brush: js"> - 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- - 9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>De même, <code>-9 >> 2</code> donnera <code>-3</code>, car le signe est préservé :</p> - -<pre class="brush: js"> - -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- - -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_right_shift">Utiliser le décalage à droite</h3> - -<pre class="brush: js"> - 9 >> 2; // 2 --9 >> 2; // -3 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">L'opérateur de décalage binaire à droite et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/right_shift/index.md b/files/fr/web/javascript/reference/operators/right_shift/index.md new file mode 100644 index 0000000000..ebd9092f33 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/right_shift/index.md @@ -0,0 +1,64 @@ +--- +title: Décalage binaire à droite (>>) +slug: Web/JavaScript/Reference/Operators/Right_shift +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.right_shift +--- +{{jsSidebar("Operators")}} + +L'opérateur de **décalage binaire à droite (`>>`)** décale la séquence de bits représentée par le premier opérande d'autant de bits vers la droite que le nombre indiqué par le second opérande. Les bits en excès à droite sont écartés. Pour le remplissage des bits par la gauche, c'est le bit le plus à gauche initialement qui est recopié autant de fois que nécessaire. Aussi, le bit le plus à gauche dans le résultat sera le même que le bit le plus à gauche de l'opérande et les deux valeurs auront donc le même signe. + +{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}} + +## Syntaxe + +```js +a >> b +``` + +## Description + +Cet opérateur décale les bits de la valeur fournie par le premier opérande d'autant de fois qu'indiqué par le deuxième opérande. Les bits en excès à droite sont écartés et pour les bits les plus à gauche, c'est le bit initialement le plus à gauche qui est dupliqué. On garde ainsi le même signe entre la valeur du premier opérande et la valeur fournie par le résultat. + +Ainsi, `9 >> 2` donnera `2` : + +```js + 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- + 9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +``` + +De même, `-9 >> 2` donnera `-3`, car le signe est préservé : + +```js + -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- + -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +``` + +## Exemples + +### Utiliser le décalage à droite + +```js + 9 >> 2; // 2 +-9 >> 2; // -3 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur de décalage binaire à droite et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) diff --git a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html deleted file mode 100644 index 1674985313..0000000000 --- a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Affectation après décalage à droite (>>=) -slug: Web/JavaScript/Reference/Operators/Right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.right_shift_assignment -translation: Web/JavaScript/Reference/Operators/Right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de décalage à droite et d'affectation (<code>>>=</code>) décale la séquence de bits indiquée par l'opérande gauche d'autant de bits qu'indiqués par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x >>= y -<strong>Signification :</strong> x = x >> y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_right_shift_assignment">Utiliser l'opérateur de décalage à droite et d'affectation</h3> - -<pre class="brush: js"> -let a = 5; // (00000000000000000000000000000101) -a >>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift">L'opérateur de décalage à droite</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md new file mode 100644 index 0000000000..255478be31 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: Affectation après décalage à droite (>>=) +slug: Web/JavaScript/Reference/Operators/Right_shift_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.right_shift_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de décalage à droite et d'affectation (`>>=`) décale la séquence de bits indiquée par l'opérande gauche d'autant de bits qu'indiqués par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x >>= y +Signification : x = x >> y +``` + +## Exemples + +### Utiliser l'opérateur de décalage à droite et d'affectation + +```js +let a = 5; // (00000000000000000000000000000101) +a >>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>= 2; // -2 (-00000000000000000000000000000010) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift) diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index a9e21fa187..0000000000 --- a/files/fr/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Syntaxe de décomposition -slug: Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - ECMAScript 2015 - - ECMAScript6 - - JavaScript - - Reference - - Syntaxe -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La <strong>syntaxe de décomposition</strong> permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>Pour l'utilisation de la décomposition dans les appels de fonction :</p> - -<pre class="syntaxbox notranslate">f(...objetIterable); -</pre> - -<p>Pour les littéraux de tableaux :</p> - -<pre class="syntaxbox notranslate">[...objetIterable, 4, 5, 6]</pre> - -<p>Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :</p> - -<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_la_décomposition_dans_les_appels_de_fonction">Utiliser la décomposition dans les appels de fonction</h3> - -<h4 id="Améliorer_la_fonction_apply">Améliorer la fonction <code>apply()</code></h4> - -<p>Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :</p> - -<pre class="brush: js notranslate">function f(x, y, z) { } -var args = [0, 1, 2]; -f.apply(null, args);</pre> - -<p>avec la décomposition, on peut désormais écrire :</p> - -<pre class="brush: js notranslate">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - -<p>Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.</p> - -<pre class="brush: js notranslate">function f(v, w, x, y, z) { } -var args = [0, 1]; -f(-1, ...args, 2, ...[3]);</pre> - -<h4 id="Utiliser_apply_avec_lopérateur_new">Utiliser <code>apply()</code> avec l'opérateur <code>new</code></h4> - -<p>Avec ES5, il n'est pas possible d'utiliser <code>new</code> avec <code>apply</code> (selon ES5 <code>apply</code> effectue un appel <code>[[Call]]</code> et pas un appel <code>[[Construct]]</code>). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :</p> - -<pre class="brush: js notranslate">var champsDate = lireChampsDate(maBaseDeDonnées); -var d = new Date(...champsDate);</pre> - -<p>Afin d'utiliser <code>new</code> avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :</p> - -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { - function partial () { - return constructor.apply(this, args); - }; - if (typeof constructor.prototype === "object") { - partial.prototype = Object.create(constructor.prototype); - } - return partial; -} - - -function monConstructeur () { - console.log("arguments.length: " + arguments.length); - console.log(arguments); - this.prop1="val1"; - this.prop2="val2"; -}; - -var mesArguments = ["bi", "bop", "bup", null]; -var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments); - -console.log(new monConstructeurAvecArguments); -// (log fourni par monConstructeur): arguments.length: 4 -// (log fourni par monConstructeur): ["bi", "bop", "bup", null] -// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"} -</pre> - -<h3 id="Utiliser_la_décomposition_dans_les_littéraux_de_tableau">Utiliser la décomposition dans les littéraux de tableau</h3> - -<h4 id="Améliorer_les_littéraux_de_tableau">Améliorer les littéraux de tableau</h4> - -<p>À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :</p> - -<pre class="brush: js notranslate">var articulations = ['épaules', 'genoux']; -var corps = ['têtes', ...articulations, 'bras', 'pieds']; -// ["têtes", "épaules", "genoux", "bras", "pieds"] -</pre> - -<p>Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.</p> - -<h4 id="Copier_un_tableau">Copier un tableau</h4> - -<pre class="brush: js notranslate">var arr = [1, 2, 3]; -var arr2 = [...arr]; -arr2.push(4); - -console.log(arr2); // [1, 2, 3, 4] -console.log(arr); // [1, 2, 3] (inchangé) -</pre> - -<div class="note"> -<p><strong>Note :</strong> Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).</p> -</div> - -<pre class="brush: js notranslate">var a = [[1], [2], [3]]; -var b = [...a]; // b vaut [[1], [2], [3]] - -b.shift().shift(); // *a* vaut désormais [[], [2], [3]]; -</pre> - -<h4 id="Une_meilleure_façon_de_concaténer_des_tableaux">Une meilleure façon de concaténer des tableaux</h4> - -<p>{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// On ajoute les éléments de arr2 après ceux de arr1 -var nouveauTableau = arr1.concat(arr2);</pre> - -<p>Avec ES2015 et la décomposition, on peut écrire :</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5] -</pre> - -<p>{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// On ajoute tous les éléments -// de arr2 au début de arr1 -Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]</pre> - -<p>Avec ES2015 et la décomposition, on peut écrire :</p> - -<pre class="brush: js notranslate">var arr1 = [4, 5, 6]; -var arr2 = [1, 2, 3]; -arr1 = [...arr2, ...arr1]; -// arr1 vaut désormais [1, 2, 3, 4, 5, 6] -</pre> - -<div class="note"> -<p><strong>Note :</strong> Il y a une différence avec <code>unshift()</code> : ici, on crée un nouveau tableau qui est affecté à <code>arr1</code>, le tableau original de <code>arr1</code> n'est pas modifié "sur place".</p> -</div> - -<h3 id="Utiliser_la_décomposition_avec_les_littéraux_objet">Utiliser la décomposition avec les littéraux objet</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)</a> vise à ajouter la décomposition des propriétés pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">les littéraux objets</a>. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.</p> - -<p>Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.</p> - -<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false }; -var profilMisAJour = { nom: 'Dupont', profilComplet: true }; - -var clone = { ...profil }; -// Object { prenom: 'Sarah', profilComplet: false } - -var fusion = { ...profil, ...profilMisAJour }; -// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };</pre> - -<p>On notera que {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas pour la syntaxe de décomposition.</p> - -<p>Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :</p> - -<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false }; -var profilMisAJour = { nom: 'Dupont', profilComplet: true }; - -const fusionner = ( ...objets) => {...objets}; -var nouveauProfil = fusionner(profil, profilMisAJour); -// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } } - -var autreNouveauProfil = fusion({}, obj1, obj2); -// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } } -</pre> - -<p>Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.</p> - -<h3 id="La_décomposition_ne_sapplique_quaux_itérables">La décomposition ne s'applique qu'aux itérables</h3> - -<p>Pour rappel : la syntaxe de décomposition ne s'applique qu'<a href="/fr/docs/Web/JavaScript/Guide/iterable">aux objets itérables</a> :</p> - -<pre class="brush: js notranslate">var obj = {"clé1" : "valeur1"}; -function maFonction(x) { - console.log(x); // undefined -} -maFonction(...obj); -var args = [...obj]; -console.log(args, args.length) //[] 0</pre> - -<h3 id="Utiliser_la_décomposition_avec_de_nombreuses_valeurs">Utiliser la décomposition avec de nombreuses valeurs</h3> - -<p>Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.</p> - -<h2 id="Les_paramètres_du_reste">Les paramètres du reste</h2> - -<p>La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définie dans plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">initialisateur de tableau</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">listes d'argument</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> - <td>{{Spec2('ES2018')}}</td> - <td>Définie dans la section sur les <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">initialisateurs d'objet.</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Aucune modification.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.spread")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a></li> - <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">Le billet de ES6 en détails sur la décomposition</a></li> - <li>{{jsxref("Function.prototype.apply()")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.md b/files/fr/web/javascript/reference/operators/spread_syntax/index.md new file mode 100644 index 0000000000..cfc56cf9a8 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.md @@ -0,0 +1,250 @@ +--- +title: Syntaxe de décomposition +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Reference + - Syntaxe +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition +--- +{{jsSidebar("Operators")}} + +La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets). + +{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}} + +## Syntaxe + +Pour l'utilisation de la décomposition dans les appels de fonction : + + f(...objetIterable); + +Pour les littéraux de tableaux : + + [...objetIterable, 4, 5, 6] + +Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) : + + let objClone = { ...obj }; + +## Exemples + +### Utiliser la décomposition dans les appels de fonction + +#### Améliorer la fonction `apply()` + +Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée : + +```js +function f(x, y, z) { } +var args = [0, 1, 2]; +f.apply(null, args); +``` + +avec la décomposition, on peut désormais écrire : + +```js +function f(x, y, z) { } +var args = [0, 1, 2]; +f(...args); +``` + +Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments. + +```js +function f(v, w, x, y, z) { } +var args = [0, 1]; +f(-1, ...args, 2, ...[3]); +``` + +#### Utiliser `apply()` avec l'opérateur `new` + +Avec ES5, il n'est pas possible d'utiliser `new` avec `apply` (selon ES5 `apply` effectue un appel `[[Call]]` et pas un appel `[[Construct]]`). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement : + +```js +var champsDate = lireChampsDate(maBaseDeDonnées); +var d = new Date(...champsDate); +``` + +Afin d'utiliser `new` avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle : + +```js +function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function monConstructeur () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var mesArguments = ["bi", "bop", "bup", null]; +var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments); + +console.log(new monConstructeurAvecArguments); +// (log fourni par monConstructeur): arguments.length: 4 +// (log fourni par monConstructeur): ["bi", "bop", "bup", null] +// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"} +``` + +### Utiliser la décomposition dans les littéraux de tableau + +#### Améliorer les littéraux de tableau + +À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct : + +```js +var articulations = ['épaules', 'genoux']; +var corps = ['têtes', ...articulations, 'bras', 'pieds']; +// ["têtes", "épaules", "genoux", "bras", "pieds"] +``` + +Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois. + +#### Copier un tableau + +```js +var arr = [1, 2, 3]; +var arr2 = [...arr]; +arr2.push(4); + +console.log(arr2); // [1, 2, 3, 4] +console.log(arr); // [1, 2, 3] (inchangé) +``` + +> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition). + +```js +var a = [[1], [2], [3]]; +var b = [...a]; // b vaut [[1], [2], [3]] + +b.shift().shift(); // *a* vaut désormais [[], [2], [3]]; +``` + +#### Une meilleure façon de concaténer des tableaux + +{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant : + +```js +var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// On ajoute les éléments de arr2 après ceux de arr1 +var nouveauTableau = arr1.concat(arr2); +``` + +Avec ES2015 et la décomposition, on peut écrire : + +```js +var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5] +``` + +{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire : + +```js +var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// On ajoute tous les éléments +// de arr2 au début de arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2] +``` + +Avec ES2015 et la décomposition, on peut écrire : + +```js +var arr1 = [4, 5, 6]; +var arr2 = [1, 2, 3]; +arr1 = [...arr2, ...arr1]; +// arr1 vaut désormais [1, 2, 3, 4, 5, 6] +``` + +> **Note :** Il y a une différence avec `unshift()` : ici, on crée un nouveau tableau qui est affecté à `arr1`, le tableau original de `arr1` n'est pas modifié "sur place". + +### Utiliser la décomposition avec les littéraux objet + +[La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)](https://github.com/tc39/proposal-object-rest-spread) vise à ajouter la décomposition des propriétés pour [les littéraux objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet). Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet. + +Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}. + +```js +var profil = { prenom: 'Sarah', profilComplet: false }; +var profilMisAJour = { nom: 'Dupont', profilComplet: true }; + +var clone = { ...profil }; +// Object { prenom: 'Sarah', profilComplet: false } + +var fusion = { ...profil, ...profilMisAJour }; +// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true }; +``` + +On notera que {{jsxref("Object.assign()")}} déclenche [les mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set), ce qui n'est pas le cas pour la syntaxe de décomposition. + +Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} : + +```js +var profil = { prenom: 'Sarah', profilComplet: false }; +var profilMisAJour = { nom: 'Dupont', profilComplet: true }; + +const fusionner = ( ...objets) => {...objets}; +var nouveauProfil = fusionner(profil, profilMisAJour); +// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } } + +var autreNouveauProfil = fusion({}, obj1, obj2); +// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } } +``` + +Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste. + +### La décomposition ne s'applique qu'aux itérables + +Pour rappel : la syntaxe de décomposition ne s'applique qu'[aux objets itérables](/fr/docs/Web/JavaScript/Guide/iterable) : + +```js +var obj = {"clé1" : "valeur1"}; +function maFonction(x) { + console.log(x); // undefined +} +maFonction(...obj); +var args = [...obj]; +console.log(args, args.length) //[] 0 +``` + +### Utiliser la décomposition avec de nombreuses valeurs + +Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}. + +## Les paramètres du reste + +La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste). + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('ES2015', '#sec-array-initializer')}} | {{Spec2('ES2015')}} | Définie dans plusieurs sections de la spécification : [initialisateur de tableau](http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer), [listes d'argument](http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists). | +| {{SpecName('ES2018', '#sec-object-initializer')}} | {{Spec2('ES2018')}} | Définie dans la section sur les [initialisateurs d'objet.](http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer) | +| {{SpecName('ESDraft', '#sec-array-initializer')}} | {{Spec2('ESDraft')}} | Aucune modification. | +| {{SpecName('ESDraft', '#sec-object-initializer')}} | {{Spec2('ESDraft')}} | Aucune modification. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.spread")}} + +## Voir aussi + +- [Paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) +- [Le billet de ES6 en détails sur la décomposition](https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition) +- {{jsxref("Function.prototype.apply()")}} diff --git a/files/fr/web/javascript/reference/operators/strict_equality/index.html b/files/fr/web/javascript/reference/operators/strict_equality/index.html deleted file mode 100644 index ba45dffaae..0000000000 --- a/files/fr/web/javascript/reference/operators/strict_equality/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Égalité stricte (===) -slug: Web/JavaScript/Reference/Operators/Strict_equality -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.strict_equality -translation-of: Web/JavaScript/Reference/Operators/Strict_equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'égalité stricte (<code>===</code>) vérifie si ses deux opérandes sont égaux et renvoie un booléen correspondant au résultat. À la différence de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a>, l'opérateur d'égalité stricte considère toujours des opérandes de types différents comme étant différents.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x === y -</pre> - -<h2 id="description">Description</h2> - -<p>Les opérateurs d'égalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a> pour comparer deux opérandes.</p> - -<ul> - <li>Si les opérandes sont de types différents, on renvoie <code>false</code>.</li> - <li>Si les deux opérandes sont des objets, on renvoie <code>true</code> uniquement s'ils réfèrent au même objet.</li> - <li>Si les deux opérandes valent <code>null</code> ou si les deux opérandes valent <code>undefined</code>, on renvoie <code>true</code>.</li> - <li>Si au moins l'un des opérandes vaut <code>NaN</code>, on renvoie <code>false</code>.</li> - <li>Sinon, on compare la valeur des deux opérandes : - <ul> - <li>Les nombres doivent avoir la même valeur. <code>+0</code> and <code>-0</code> sont considérés comme égaux.</li> - <li>Les chaînes de caractères doivent avoir les mêmes caractères, dans le même ordre.</li> - <li>Les booléens doivent avoir la même valeur (tous les deux <code>true</code> ou tous les deux <code>false</code>).</li> - </ul> - </li> -</ul> - -<p>La différence fondamentale avec <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a> (<code>==</code>) est que, lorsque les opérandes sont de types différents, <code>==</code> tentera une conversion vers un type commun avant la comparaison.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="comparing_operands_of_the_same_type">Comparaison d'opérandes de même type</h3> - -<pre class="brush: js"> -console.log("hello" === "hello"); // true -console.log("hello" === "hola"); // false - -console.log(3 === 3); // true -console.log(3 === 4); // false - -console.log(true === true); // true -console.log(true === false); // false - -console.log(null === null); // true -</pre> - -<h3 id="comparing_operands_of_different_types">Comparaison d'opérandes de types différents</h3> - -<pre class="brush: js"> -console.log("3" === 3); // false - -console.log(true === 1); // false - -console.log(null === undefined); // false -</pre> - -<h3 id="comparing_objects">Comparaison d'objets</h3> - -<pre class="brush: js"> -const objet1 = { - name: "coucou" -} - -const objet2 = { - name: "coucou" -} - -console.log(objet1 === objet2); // false -console.log(objet1 === objet1); // true -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/strict_equality/index.md b/files/fr/web/javascript/reference/operators/strict_equality/index.md new file mode 100644 index 0000000000..297f4f4f67 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/strict_equality/index.md @@ -0,0 +1,93 @@ +--- +title: Égalité stricte (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.strict_equality +--- +{{jsSidebar("Operators")}} + +L'opérateur d'égalité stricte (`===`) vérifie si ses deux opérandes sont égaux et renvoie un booléen correspondant au résultat. À la différence de [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality), l'opérateur d'égalité stricte considère toujours des opérandes de types différents comme étant différents. + +{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}} + +## Syntaxe + +```js +x === y +``` + +## Description + +Les opérateurs d'égalité stricte (`===` et `!==`) utilisent [l'algorithme de comparaison d'égalité stricte](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6) pour comparer deux opérandes. + +- Si les opérandes sont de types différents, on renvoie `false`. +- Si les deux opérandes sont des objets, on renvoie `true` uniquement s'ils réfèrent au même objet. +- Si les deux opérandes valent `null` ou si les deux opérandes valent `undefined`, on renvoie `true`. +- Si au moins l'un des opérandes vaut `NaN`, on renvoie `false`. +- Sinon, on compare la valeur des deux opérandes : + + - Les nombres doivent avoir la même valeur. `+0` and `-0` sont considérés comme égaux. + - Les chaînes de caractères doivent avoir les mêmes caractères, dans le même ordre. + - Les booléens doivent avoir la même valeur (tous les deux `true` ou tous les deux `false`). + +La différence fondamentale avec [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) (`==`) est que, lorsque les opérandes sont de types différents, `==` tentera une conversion vers un type commun avant la comparaison. + +## Exemples + +### Comparaison d'opérandes de même type + +```js +console.log("hello" === "hello"); // true +console.log("hello" === "hola"); // false + +console.log(3 === 3); // true +console.log(3 === 4); // false + +console.log(true === true); // true +console.log(true === false); // false + +console.log(null === null); // true +``` + +### Comparaison d'opérandes de types différents + +```js +console.log("3" === 3); // false + +console.log(true === 1); // false + +console.log(null === undefined); // false +``` + +### Comparaison d'objets + +```js +const objet1 = { + name: "coucou" +} + +const objet2 = { + name: "coucou" +} + +console.log(objet1 === objet2); // false +console.log(objet1 === objet1); // true +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality) +- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) +- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/fr/web/javascript/reference/operators/strict_inequality/index.html b/files/fr/web/javascript/reference/operators/strict_inequality/index.html deleted file mode 100644 index d436d5af46..0000000000 --- a/files/fr/web/javascript/reference/operators/strict_inequality/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Inégalité stricte (!==) -slug: Web/JavaScript/Reference/Operators/Strict_inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.strict_inequality -translation-of: Web/JavaScript/Reference/Operators/Strict_inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'inégalité stricte (<code>!==</code>) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">l'opérateur d'inégalité</a>, l'opérateur d'inégalité stricte considère toujours des opérandes de types différents comme étant différents.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -x !== y -</pre> - -<h2 id="description">Description</h2> - -<p>L'opérateur d'inégalité stricte vérifie que ses deux opérandes ne sont pas égaux. Il s'agit de la négation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">l'opérateur d'égalité stricte</a>. Les deux expressions suivantes fourniront toujours le même résultat :</p> - -<pre class="brush: js"> -x !== y -!(x === y) -</pre> - -<p>Pour plus de détails sur l'algorithme de comparaison utilisé, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">la page sur l'opérateur d'égalité stricte</a>.</p> - -<p>À l'instar de l'opérateur d'égalité stricte, l'opérateur d'inégalité stricte considèrera toujours des opérandes de types différents comme étant différents :</p> - -<pre class="brush: js"> -3 !== "3"; // true -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="comparing_operands_of_the_same_type">Comparaison d'opérandes de même type</h3> - -<pre class="brush: js"> -console.log("hello" !== "hello"); // false -console.log("hello" !== "hola"); // true - -console.log(3 !== 3); // false -console.log(3 !== 4); // true - -console.log(true !== true); // false -console.log(true !== false); // true - -console.log(null !== null); // false -</pre> - -<h3 id="comparing_operands_of_different_types">Comparaison d'opérandes de types différents</h3> - -<pre class="brush: js"> -console.log("3" !== 3); // true - -console.log(true !== 1); // true - -console.log(null !== undefined); // true -</pre> - -<h3 id="comparing_objects">Comparaison d'objets</h3> - -<pre class="brush: js"> -const objet1 = { - name: "coucou" -} - -const objet2 = { - name: "coucou" -} - -console.log(objet1 !== objet2); // true -console.log(objet1 !== objet1); // false -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/strict_inequality/index.md b/files/fr/web/javascript/reference/operators/strict_inequality/index.md new file mode 100644 index 0000000000..e76668d052 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/strict_inequality/index.md @@ -0,0 +1,94 @@ +--- +title: Inégalité stricte (!==) +slug: Web/JavaScript/Reference/Operators/Strict_inequality +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.strict_inequality +--- +{{jsSidebar("Operators")}} + +L'opérateur d'inégalité stricte (`!==`) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de [l'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality), l'opérateur d'inégalité stricte considère toujours des opérandes de types différents comme étant différents. + +{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}} + +## Syntaxe + +```js +x !== y +``` + +## Description + +L'opérateur d'inégalité stricte vérifie que ses deux opérandes ne sont pas égaux. Il s'agit de la négation de [l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality). Les deux expressions suivantes fourniront toujours le même résultat : + +```js +x !== y +!(x === y) +``` + +Pour plus de détails sur l'algorithme de comparaison utilisé, voir [la page sur l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality). + +À l'instar de l'opérateur d'égalité stricte, l'opérateur d'inégalité stricte considèrera toujours des opérandes de types différents comme étant différents : + +```js +3 !== "3"; // true +``` + +## Exemples + +### Comparaison d'opérandes de même type + +```js +console.log("hello" !== "hello"); // false +console.log("hello" !== "hola"); // true + +console.log(3 !== 3); // false +console.log(3 !== 4); // true + +console.log(true !== true); // false +console.log(true !== false); // true + +console.log(null !== null); // false +``` + +### Comparaison d'opérandes de types différents + +```js +console.log("3" !== 3); // true + +console.log(true !== 1); // true + +console.log(null !== undefined); // true +``` + +### Comparaison d'objets + +```js +const objet1 = { + name: "coucou" +} + +const objet2 = { + name: "coucou" +} + +console.log(objet1 !== objet2); // true +console.log(objet1 !== objet1); // false +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality) +- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) +- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) diff --git a/files/fr/web/javascript/reference/operators/subtraction/index.html b/files/fr/web/javascript/reference/operators/subtraction/index.html deleted file mode 100644 index cdada5f8cb..0000000000 --- a/files/fr/web/javascript/reference/operators/subtraction/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Soustraction (-) -slug: Web/JavaScript/Reference/Operators/Subtraction -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.subtraction -translation-of: Web/JavaScript/Reference/Operators/Subtraction ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de soustraction (<code>-</code>) effectue la soustraction entre les deux opérandes et fournit la différence obtenue.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> <var>x</var> - <var>y</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="subtraction_with_numbers">Avec des valeurs numériques</h3> - -<pre class="brush: js"> -5 - 3 // 2 -3 - 5 // -2 -</pre> - -<h3 id="subtraction_with_non-numbers">Avec des valeurs non-numériques</h3> - -<pre class="brush: js"> -'toto' - 3 // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/subtraction/index.md b/files/fr/web/javascript/reference/operators/subtraction/index.md new file mode 100644 index 0000000000..6aa275294c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/subtraction/index.md @@ -0,0 +1,56 @@ +--- +title: Soustraction (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.subtraction +--- +{{jsSidebar("Operators")}} + +L'opérateur de soustraction (`-`) effectue la soustraction entre les deux opérandes et fournit la différence obtenue. + +{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}} + +## Syntaxe + +```js +Opérateur : x - y +``` + +## Exemples + +### Avec des valeurs numériques + +```js +5 - 3 // 2 +3 - 5 // -2 +``` + +### Avec des valeurs non-numériques + +```js +'toto' - 3 // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html deleted file mode 100644 index ad67f469d6..0000000000 --- a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Affectation après soustraction (-=) -slug: Web/JavaScript/Reference/Operators/Subtraction_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.subtraction_assignment -translation-of: Web/JavaScript/Reference/Operators/Subtraction_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur d'affectation après soustraction (<code>-=</code>) calcule la soustraction de l'opérande gauche par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x -= y -<strong>Signification :</strong> x = x - y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_subtraction_assignment">Utiliser l'opérateur de soustraction et d'affectation</h3> - -<pre class="brush: js"> -let truc = 5; -truc -= 2; // 3 -truc -= 'toto'; // NaN -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">L'opérateur de soustraction</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md new file mode 100644 index 0000000000..dd658d604d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md @@ -0,0 +1,46 @@ +--- +title: Affectation après soustraction (-=) +slug: Web/JavaScript/Reference/Operators/Subtraction_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.subtraction_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur d'affectation après soustraction (`-=`) calcule la soustraction de l'opérande gauche par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}} + +## Syntaxe + +```js +Opérateur : x -= y +Signification : x = x - y +``` + +## Exemples + +### Utiliser l'opérateur de soustraction et d'affectation + +```js +let truc = 5; +truc -= 2; // 3 +truc -= 'toto'; // NaN +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) diff --git a/files/fr/web/javascript/reference/operators/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html deleted file mode 100644 index 372dfcd497..0000000000 --- a/files/fr/web/javascript/reference/operators/super/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Reference/Operators/super -tags: - - Classes - - ECMAScript 2015 - - JavaScript - - Language feature - - Left-hand-side expressions - - Operator -translation_of: Web/JavaScript/Reference/Operators/super -original_slug: Web/JavaScript/Reference/Opérateurs/super -browser-compat: javascript.operators.super ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Le mot-clé <code><strong>super</strong></code> est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.</p> - -<p>Les expressions de la forme <code>super.propriete</code> et <code>super[expr]</code> sont valides pour n'importe quelle <a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions">définition de méthode</a>, que ce soit au sein d'une <a href="/fr/docs/Web/JavaScript/Reference/Classes">classe</a> ou d'un <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">littéral objet</a>.</p> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js">super([arguments]); // Le constructeur parent est appelé -super.functionOnParent([arguments]); -</pre> - -<h2 id="description">Description</h2> - -<p>Lorsqu'il est utilisé dans un constructeur, le mot-clé <code>super</code> est utilisé seul et doit apparaître avant le mot-clé <code>this</code>. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_super_in_classes">Utiliser <code>super</code> avec les classes</h3> - -<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a>. Ici on utilise <code>super()</code> afin d'éviter la duplication des parties communes entre le constructeur de <code>Rectangle</code> et de <code>Carre</code>.</p> - -<pre class="brush: js">class Rectangle { - constructor(hauteur, largeur) { - this.name = 'Rectangle'; - this.hauteur = hauteur; - this.largeur = largeur; - } - coucou(){ - console.log('Coucou, je suis un ' + this.name + '.'); - } - get aire() { - return this.hauteur * this.largeur; - } - set aire(valeur) { - this.hauteur = Math.sqrt(valeur); - this.largeur = Math.sqrt(valeur); - } -} - -class Carre extends Rectangle { - constructor(longueur) { - - // Ici, on appelle le constructeur de Rectangle - // qui est l'objet « parent » de Carré - super(longueur, longueur); - - // Pour les classes dérivées, super() doit être appelé - // avant d'utiliser 'this' sinon cela entraînera une - // exception ReferenceError. - this.name = 'Carré'; - } -}</pre> - -<h3 id="super-calling_static_methods">Utiliser super pour appeler des méthodes statiques</h3> - -<p>Il est possible d'utiliser super pour invoquer des méthodes <a href="/fr/docs/Web/JavaScript/Reference/Classes/static">statiques</a> :</p> - -<pre class="brush: js">class Rectangle { - constructor() {} - static logNbCotes() { - return "J'ai 4 côtés"; - } -} - -class Carre extends Rectangle { - constructor(){} - static logDescription() { - return super.logNbCotes() + ' qui sont tous égaux'; - } -} -Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux" -</pre> - -<h3 id="deleting_super_properties_will_throw_an_error">Supprimer des propriétés parentes lèvera une exception</h3> - -<p>Il n'est pas possible d'utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> sur <code>super.prop</code> ou <code>super[expr]</code> pour supprimer une propriété de la classe parente, cela renverra une exception <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError"><code>ReferenceError</code></a> :</p> - -<pre class="brush: js">class Base { - toto() {} -} - -class Derivee extends Base { - delete() { - delete super.toto; // À ne pas faire - } -} - -new Derivee().delete(); -// ReferenceError : suppression invalide avec 'super'</pre> - -<h3 id="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> ne peut pas surcharger les propriétés non modifiables</h3> - -<p>Lorsque des propriétés sont définies sans accès en écriture (<em>non-writable</em>), par exemple avec <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>, <code>super</code> ne peut pas surcharger les valeurs de ces propriétés.</p> - -<pre class="brush: js">class X { - constructor() { - Object.defineProperty(this, "prop", { - configurable: true, - writable: false, - value: 1 - }); - } -} -class Y extends X { - constructor() { - super(); - } - toto(){ - super.prop = 2; // Impossible de surcharger - } -} -const y = new Y(); -y.toto(); // TypeError "prop" est en lecture seule -console.log(y.prop); // 1 -</pre> - -<h3 id="Utiliser_super.prop_sur_les_littéraux_objets">Utiliser <code>super.prop</code> sur les littéraux objets</h3> - -<p><code>super</code> peut également être utilisé avec <a - href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">la notation littérale</a>. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise <code>super</code> pour appeler la méthode du premier objet. Cela fonctionne grâce à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf"><code>Object.setPrototypeOf()</code></a> avec lequel on définit que le prototype de <code>obj2</code> est <code>obj1</code>. De cette façon, super peut parcourir la chaîne de prototypes et trouver <code>methode1</code> dans <code>obj1</code>.</p> - -<pre class="brush: js">const obj1 = { - methode1() { - console.log("méthode 1"); - } -} - -const obj2 = { - methode2() { - super.methode1(); - } -} - -Object.setPrototypeOf(obj2, obj1); -obj2.methode2(); // affiche "méthode 1" dans la console -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/super/index.md b/files/fr/web/javascript/reference/operators/super/index.md new file mode 100644 index 0000000000..98f1ced4b5 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/super/index.md @@ -0,0 +1,170 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Language feature + - Left-hand-side expressions + - Operator +translation_of: Web/JavaScript/Reference/Operators/super +original_slug: Web/JavaScript/Reference/Opérateurs/super +browser-compat: javascript.operators.super +--- +{{jsSidebar("Operators")}} + +Le mot-clé **`super`** est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent. + +Les expressions de la forme `super.propriete` et `super[expr]` sont valides pour n'importe quelle [définition de méthode](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions), que ce soit au sein d'une [classe](/fr/docs/Web/JavaScript/Reference/Classes) ou d'un [littéral objet](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). + +## Syntaxe + +```js +super([arguments]); // Le constructeur parent est appelé +super.functionOnParent([arguments]); +``` + +## Description + +Lorsqu'il est utilisé dans un constructeur, le mot-clé `super` est utilisé seul et doit apparaître avant le mot-clé `this`. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent. + +## Exemples + +### Utiliser `super` avec les classes + +Ce fragment de code est tiré de [cet exemple](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html). Ici on utilise `super()` afin d'éviter la duplication des parties communes entre le constructeur de `Rectangle` et de `Carre`. + +```js +class Rectangle { + constructor(hauteur, largeur) { + this.name = 'Rectangle'; + this.hauteur = hauteur; + this.largeur = largeur; + } + coucou(){ + console.log('Coucou, je suis un ' + this.name + '.'); + } + get aire() { + return this.hauteur * this.largeur; + } + set aire(valeur) { + this.hauteur = Math.sqrt(valeur); + this.largeur = Math.sqrt(valeur); + } +} + +class Carre extends Rectangle { + constructor(longueur) { + + // Ici, on appelle le constructeur de Rectangle + // qui est l'objet « parent » de Carré + super(longueur, longueur); + + // Pour les classes dérivées, super() doit être appelé + // avant d'utiliser 'this' sinon cela entraînera une + // exception ReferenceError. + this.name = 'Carré'; + } +} +``` + +### Utiliser super pour appeler des méthodes statiques + +Il est possible d'utiliser super pour invoquer des méthodes [statiques](/fr/docs/Web/JavaScript/Reference/Classes/static) : + +```js +class Rectangle { + constructor() {} + static logNbCotes() { + return "J'ai 4 côtés"; + } +} + +class Carre extends Rectangle { + constructor(){} + static logDescription() { + return super.logNbCotes() + ' qui sont tous égaux'; + } +} +Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux" +``` + +### Supprimer des propriétés parentes lèvera une exception + +Il n'est pas possible d'utiliser l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete) sur `super.prop` ou `super[expr]` pour supprimer une propriété de la classe parente, cela renverra une exception [`ReferenceError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) : + +```js +class Base { + toto() {} +} + +class Derivee extends Base { + delete() { + delete super.toto; // À ne pas faire + } +} + +new Derivee().delete(); +// ReferenceError : suppression invalide avec 'super' +``` + +### `super.prop` ne peut pas surcharger les propriétés non modifiables + +Lorsque des propriétés sont définies sans accès en écriture (_non-writable_), par exemple avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), `super` ne peut pas surcharger les valeurs de ces propriétés. + +```js +class X { + constructor() { + Object.defineProperty(this, "prop", { + configurable: true, + writable: false, + value: 1 + }); + } +} +class Y extends X { + constructor() { + super(); + } + toto(){ + super.prop = 2; // Impossible de surcharger + } +} +const y = new Y(); +y.toto(); // TypeError "prop" est en lecture seule +console.log(y.prop); // 1 +``` + +### Utiliser `super.prop` sur les littéraux objets + +`super` peut également être utilisé avec [la notation littérale](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise `super` pour appeler la méthode du premier objet. Cela fonctionne grâce à [`Object.setPrototypeOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) avec lequel on définit que le prototype de `obj2` est `obj1`. De cette façon, super peut parcourir la chaîne de prototypes et trouver `methode1` dans `obj1`. + +```js +const obj1 = { + methode1() { + console.log("méthode 1"); + } +} + +const obj2 = { + methode2() { + super.methode1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.methode2(); // affiche "méthode 1" dans la console +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes) diff --git a/files/fr/web/javascript/reference/operators/this/index.html b/files/fr/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 17677cc5a1..0000000000 --- a/files/fr/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: L'opérateur this -slug: Web/JavaScript/Reference/Operators/this -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/this -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>En JavaScript, <strong>le mot-clé <code>this</code></strong> se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> ou le mode non-strict.</p> - -<p>Dans la plupart des cas, la valeur de <code>this</code> sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour <a href="#bind">définir la valeur de <code>this</code> pour une fonction, indépendamment de la façon dont elle est appelée</a>. ECMAScript 2015 (ES6) a ajouté <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> dans lesquelles <code>this</code> correspond à la valeur du contexte englobant.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">this</pre> - -<h3 id="Valeur">Valeur</h3> - -<p>L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.</p> - -<h2 id="Dans_le_contexte_global">Dans le contexte global</h2> - -<p>Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), <code>this</code> fait référence à l'objet global (qu'on utilise ou non le mode strict).</p> - -<pre class="brush:js">// Si l'environnement de script est un navigateur, -// l'objet window sera l'objet global -console.log(this === window); // true - -this.a = 37; -console.log(window.a); // 37 - -this.b = "MDN"; -console.log(window.b); // "MDN" -console.log(b); // "MDN" -</pre> - -<div class="note"> -<p><strong>Note :</strong> Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.</p> -</div> - -<h2 id="Dans_le_contexte_dune_fonction">Dans le contexte d'une fonction</h2> - -<p>S'il est utilisé dans une fonction, la valeur de <code>this</code> dépendra de la façon dont la fonction a été appelée.</p> - -<h3 id="Avec_un_appel_simple">Avec un appel simple</h3> - -<pre class="brush:js">function f1(){ - return this; -} - -// Dans un navigateur -f1() === window; // true (objet global) - -// Côté serveur (ex. Node) -f1() === global; // true -</pre> - -<p>Dans cet exemple, la valeur de <code>this</code> n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, <code>this</code> doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).</p> - -<pre class="brush:js">function f2(){ - "use strict"; // on utilise le mode strict - return this; -} - -f2() === undefined; // true -</pre> - -<p>En mode strict, la valeur de <code>this</code> est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste <code>undefined</code>. Il pourrait être défini avec n'importe quelle autre valeur, telle que <code>null</code> ou <code>42</code> ou <code>"Je ne suis pas this"</code>.</p> - -<div class="note"><p><strong>Note :</strong> Dans ce deuxième exemple,<code>this</code> vaut {{jsxref("undefined")}} car <code>f2</code> a été appelé sans « base » (ex. : <code>window.f2()</code>). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet <code>window</code>.</p></div> - -<h3 id="call_et_apply"><code>call</code> et <code>apply</code></h3> - -<p>Pour passer <code>this</code> d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :</p> - -<pre class="brush: js">// Un objet peut être passé en premier argument -// de call ou de apply -var obj = { a: "Toto" }; - -// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci -var a = "Global"; - -function whatsThis(arg) { - // La valeur de this ici dépend de la façon - // dont la fonction est appelée - return this.a; -} - -whatsThis(); // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window -whatsThis.call(obj); // "Toto" -whatsThis.apply(obj); // "Toto" -</pre> - -<p>Lorsque le mot-clé <code>this</code> est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier <code>this</code> à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.</p> - -<pre class="brush:js">function ajout(c, d){ - return this.a + this.b + c + d; -} - -var o = {a:1, b:3}; - -// Le premier paramètre correspond à l'objet qu'on souhaite -// lier à 'this', les paramètres suivants sont les arguments -// à utiliser dans l'appel de la fonction -ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 - -// Le premier paramètre correspond à l'objet qu'on souhaite -// lier à 'this', le second paramètre est le tableau dont les -// les éléments sont les arguments à passer à la fonction -ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 -</pre> - -<p>Note : En mode non-strict, si la valeur à lier à <code>this</code>, passée à <code>call</code> ou <code>apply</code>, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne <code>ToObject</code>. Si la valeur est d'un type primitif autre qu'objet, <code>7</code> ou <code>'toto'</code> par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre <code>7</code> converti en un objet grâce à <code>new Number(7)</code> et la chaîne <code>'toto'</code> convertie en objet grâce à <code>new String('toto')</code>.</p> - -<pre class="brush:js">function truc() { - console.log(Object.prototype.toString.call(this)); -} - -truc.call(7); // [object Number] -truc.call('foo'); // [object String] -</pre> - -<h3 id="La_méthode_bind">La méthode <code>bind</code></h3> - -<p>Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle <code>f.bind(unObjet)</code>, on crée une nouvelle fonction qui possède le même corps et la même portée que <code>f</code>, mais où <code>this</code> sera lié, de façon permanente, au premier argument passé à <code>bind</code>, quelle que soit la façon dont la méthode est utilisée.</p> - -<pre class="brush:js">function f(){ - return this.a; -} - -var g = f.bind({a:"azerty"}); -console.log(g()); // azerty - -var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois -console.log(h()); // azerty - -var o = {a:37, f:f, g:g, h:h}; -console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty -</pre> - -<h3 id="Avec_les_fonctions_fléchées">Avec les fonctions fléchées</h3> - -<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, <code>this</code> correspond à la valeur de <code>this</code> utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, <code>this</code> sera l'objet global :</p> - -<pre class="brush: js">var objetGlobal = this; -var toto = (() => this); -console.log(toto() === objetGlobal); // true</pre> - -<p>Peu importe la façon dont <code>toto</code> sera appelée, <code>this</code> sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement <code>this</code> correspond à l'objet courant) ou lorsque <code>call</code>, <code>apply</code> ou <code>bind</code> sont utilisés :</p> - -<pre class="brush: js">// Appelé comme la méthode d'un objet -var obj = {toto: toto}; -console.log(obj.toto() === objetGlobal); // true - -// Ici on utilise call -console.log(toto.call(obj) === objetGlobal); // true -// Là on utilise bind -toto = toto.bind(obj); -console.log(toto() === objetGlobal); // true</pre> - -<p>Quelle que soit la méthode utilisée le <code>this</code> de <code>toto</code> sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : <code>this</code> prendra la valeur de <code>this</code> dans le contexte englobant.</p> - -<pre class="brush: js">// On crée un objet obj qui a une méthode truc -// qui renvoie une fonction qui renvoie la -// valeur de this. -// La fonction qui est renvoyée est créée sous -// la forme d'une fonction fléchée. this est -// donc fixé de façon permanente avec la valeur -// de this du contexte englobant. -var obj = { truc : function() { - var x = (() => this); - return x; - } - }; -// On appelle truc comme une méthode d'obj, this -// vaudra donc obj. On récupère la fonction -// renvoyée par truc et on en stocke une référence -// avec la variable fn -var fn = obj.truc(); - -// On appelle fn sans définir this, par défaut -// en mode strict cela correspondrait à l'objet -// global ou à undefined -console.log(fn() === obj); // true - -// Attention à ne pas référence la méthode d'obj -// sans l'appeler -var fn2 = obj.truc; -// Appeler le this de la fonction fléchée dans ce contexte -// renverra window car c'est le this associé à fn2 (qui -// correspond au contexte global) -console.log(fn2()() == window); // true</pre> - -<p>Dans l'exemple précédent, la fonction affectée à <code>obj.truc</code> renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, <code>this</code> vaut toujours <code>obj.truc</code> lorsque la fonction est appelée. Lorsque la fonction est renvoyée, <code>this</code> continue de correspondre à la valeur initiale. Dans ce code, <code>this</code> vaut <code>obj</code> et garde cette valeur, même lorsqu'il est appelé plus tard.</p> - -<h3 id="En_tant_que_méthode_dun_objet">En tant que méthode d'un objet</h3> - -<p>Lorsqu'une fonction est appelée comme méthode d'un objet, <code>this</code> correspondra à l'objet possédant la méthode qu'on appelle.</p> - -<p>Ainsi, dans l'exemple suivant, lorsqu'on appelle <code>o.f()</code>, le <code>this</code> contenu à l'intérieur de la fonction correspond à l'objet <code>o</code>.</p> - -<pre class="brush:js">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // 37 -</pre> - -<p>On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de <code>o</code> plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :</p> - -<pre class="brush:js">var o = {prop: 37}; - -function indépendante() { - return this.prop; -} - -o.f = indépendante; - -console.log(o.f()); // 37 -</pre> - -<p>On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de <code>o</code>.</p> - -<p>De la même façon, <code>this</code> n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction <code>o.b.g</code>, on appelle la méthode <code>g</code> de l'objet <code>o.b</code>. Ainsi, au moment de l'exécution, <code>this</code> fera référence à <code>o.b</code>. Le fait que cet objet soit une propriété de <code>o</code> n'a aucun impact : seule la référence objet la plus proche compte.</p> - -<pre class="brush:js">o.b = {g: indépendante, prop: 42}; -console.log(o.b.g()); // 42 -</pre> - -<h4 id="this_sur_la_chaîne_de_prototypes_de_lobjet"><code>this</code> sur la chaîne de prototypes de l'objet</h4> - -<p>Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, <code>this</code> fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).</p> - -<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>Dans cet exemple, l'objet qui est affecté à la variable <code>p</code> ne possède pas directement la propriété <code>f</code>, il en hérite de par son prototype. Cela n'impacte en rien la détermination de <code>this</code> car la recherche de la propriété <code>f</code> remonte le long de la chaîne de prototype et s'arrête à <code>o</code>. Au début de cette recherche, on a une référence à <code>p.f</code>, aussi <code>this</code> fera référence à l'objet représenté par <code>p</code>. Autrement dit <code>f</code> étant appelé comme une méthode de <code>p</code>, <code>this</code> fera ici référence à <code>p</code>. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.</p> - -<h4 id="this_dans_un_getter_ou_setter"><code>this</code> dans un <em>getter</em> ou <em>setter</em></h4> - -<p>Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (<em>getter</em>) ou d'un mutateur (<em>setter</em>). Une fonction utilisée comme accesseur ou mutateur verra son <code>this</code> lié à l'objet à partir duquel on souhaite accéder/changer la propriété.</p> - -<pre class="brush:js">function moduleRéel(){ - return Math.sqrt(this.re * this.re + this.im * this.im); -} - -var o = { - re: 1, - im: -1, - get phase(){ - return Math.atan2(this.im, this.re); - } -}; - -Object.defineProperty(o, 'moduleRéel', { - get: moduleRéel, enumerable:true, configurable:true}); - -console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142 -</pre> - -<h3 id="En_tant_que_constructeur">En tant que constructeur</h3> - -<p>Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le <code>this</code> correspondant sera lié au nouvel objet en train d'être construit.</p> - -<div class="note"> -<p><strong>Note :</strong> Par défaut, un constructeur renverra l'objet auquel <code>this</code> fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de <code>this</code>).</p> -</div> - -<pre class="brush:js">/* - * Les constructeurs fonctionnent de la façon suivante : - * - * function MonConstructeur(){ - * // le corps de la fonction - * // on crée des propriétés sur |this| - * // par exemple - * this.fum = "nom"; - * // etc. - * - * // Si la fonction utilise une instruction de - * // retour (return) et renvoie un objet - * // ce sera cet objet qui sera le résultat de - * // l'expression |new|. - * // Sinon, le résultat sera l'objet - * // lié à |this| - * // (ce second cas est celui qu'on rencontre - * // fréquemment). - * } - */ - -function C(){ - this.a = 37; -} - -var o = new C(); -console.log(o.a); // 37 - - -function C2(){ - this.a = 37; - return {a:38}; -} - -o = new C2(); -console.log(o.a); // 38 -</pre> - -<p>Dans le dernier exemple (<code>C2</code>), on renvoie un objet lors de la construction. L'objet qui était lié <code>this</code> est alors abandonné. (L'instruction "<code>this.a = 37;</code>" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)</p> - -<h3 id="En_tant_que_gestionnaire_dévénement_DOM">En tant que gestionnaire d'événement DOM</h3> - -<p>Lorsqu'une fonction est utilisée comme gestionnaire d'événement (<em>event handler</em>), le <code>this</code> correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p> - -<pre class="brush:js">// Lorsque cette fonction est appelée -// comme listener, l'élément associé -// sera coloré en bleu -function bluify(e){ - // Cette proposition est toujours vraie - console.log(this === e.currentTarget); - - // true lorsque currentTarget et target correspondent - // au même objet - console.log(this === e.target); - - this.style.backgroundColor = '#A5D9F3'; -} - -// On obtient une liste de tous les éléments -// contenus dans le document -var elements = document.getElementsByTagName('*'); - -// On ajout le listener bluify pour réagier au clic -// Quand on clique sur un élément, il deviendra bleu -for(var i=0 ; i<elements.length ; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="En_tant_que_gestionnaire_dévénements_in-line">En tant que gestionnaire d'événements <em>in-line</em></h3> - -<p>Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (<em>in-line</em>), la valeur de <code>this</code> correspondra à l'élément du DOM sur lequel on a placé le <em>listener</em>. Ainsi :</p> - -<pre class="brush:js"><button onclick="console.log(this.tagName.toLowerCase());"> - Afficher this -</button> -</pre> - -<p>montrera le texte <code>button</code> lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de <code>this</code> affectée de cette façon :</p> - -<pre class="brush:js"><button onclick="console.log((function(){return this})());"> - Afficher le this interne -</button> -</pre> - -<p>Ici, on utilise <code>this </code>à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet <code>window</code> pour un navigateur avec du code non-strict).</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.this")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">this & les prototypes objet</a> de Kyle Simpson sur GitHub (en anglais)</li> - <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Un article explicatif sur <code>this</code> (en anglais)</a></li> - <li>La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global <code>this</code></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/this/index.md b/files/fr/web/javascript/reference/operators/this/index.md new file mode 100644 index 0000000000..f1d09c2d32 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/this/index.md @@ -0,0 +1,407 @@ +--- +title: L'opérateur this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this +--- +{{jsSidebar("Operators")}} + +En JavaScript, **le mot-clé `this`** se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) ou le mode non-strict. + +Dans la plupart des cas, la valeur de `this` sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour [définir la valeur de `this` pour une fonction, indépendamment de la façon dont elle est appelée](#bind). ECMAScript 2015 (ES6) a ajouté [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) dans lesquelles `this` correspond à la valeur du contexte englobant. + +{{EmbedInteractiveExample("pages/js/expressions-this.html")}} + +## Syntaxe + + this + +### Valeur + +L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté. + +## Dans le contexte global + +Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), `this` fait référence à l'objet global (qu'on utilise ou non le mode strict). + +```js +// Si l'environnement de script est un navigateur, +// l'objet window sera l'objet global +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b); // "MDN" +console.log(b); // "MDN" +``` + +> **Note :** Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution. + +## Dans le contexte d'une fonction + +S'il est utilisé dans une fonction, la valeur de `this` dépendra de la façon dont la fonction a été appelée. + +### Avec un appel simple + +```js +function f1(){ + return this; +} + +// Dans un navigateur +f1() === window; // true (objet global) + +// Côté serveur (ex. Node) +f1() === global; // true +``` + +Dans cet exemple, la valeur de `this` n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, `this` doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur). + +```js +function f2(){ + "use strict"; // on utilise le mode strict + return this; +} + +f2() === undefined; // true +``` + +En mode strict, la valeur de `this` est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste `undefined`. Il pourrait être défini avec n'importe quelle autre valeur, telle que `null` ou `42` ou `"Je ne suis pas this"`. + +> **Note :** Dans ce deuxième exemple,`this` vaut {{jsxref("undefined")}} car `f2` a été appelé sans « base » (ex. : `window.f2()`). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet `window`. + +### `call` et `apply` + +Pour passer `this` d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} : + +```js +// Un objet peut être passé en premier argument +// de call ou de apply +var obj = { a: "Toto" }; + +// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci +var a = "Global"; + +function whatsThis(arg) { + // La valeur de this ici dépend de la façon + // dont la fonction est appelée + return this.a; +} + +whatsThis(); // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window +whatsThis.call(obj); // "Toto" +whatsThis.apply(obj); // "Toto" +``` + +Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}. + +```js +function ajout(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// Le premier paramètre correspond à l'objet qu'on souhaite +// lier à 'this', les paramètres suivants sont les arguments +// à utiliser dans l'appel de la fonction +ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// Le premier paramètre correspond à l'objet qu'on souhaite +// lier à 'this', le second paramètre est le tableau dont les +// les éléments sont les arguments à passer à la fonction +ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +``` + +Note : En mode non-strict, si la valeur à lier à `this`, passée à `call` ou `apply`, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne `ToObject`. Si la valeur est d'un type primitif autre qu'objet, `7` ou `'toto'` par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre `7` converti en un objet grâce à `new Number(7)` et la chaîne `'toto'` convertie en objet grâce à `new String('toto')`. + +```js +function truc() { + console.log(Object.prototype.toString.call(this)); +} + +truc.call(7); // [object Number] +truc.call('foo'); // [object String] +``` + +### La méthode `bind` + +Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle `f.bind(unObjet)`, on crée une nouvelle fonction qui possède le même corps et la même portée que `f`, mais où `this` sera lié, de façon permanente, au premier argument passé à `bind`, quelle que soit la façon dont la méthode est utilisée. + +```js +function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois +console.log(h()); // azerty + +var o = {a:37, f:f, g:g, h:h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty +``` + +### Avec les fonctions fléchées + +En utilisant [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), `this` correspond à la valeur de `this` utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, `this` sera l'objet global : + +```js +var objetGlobal = this; +var toto = (() => this); +console.log(toto() === objetGlobal); // true +``` + +Peu importe la façon dont `toto` sera appelée, `this` sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement `this` correspond à l'objet courant) ou lorsque `call`, `apply` ou `bind` sont utilisés : + +```js +// Appelé comme la méthode d'un objet +var obj = {toto: toto}; +console.log(obj.toto() === objetGlobal); // true + +// Ici on utilise call +console.log(toto.call(obj) === objetGlobal); // true +// Là on utilise bind +toto = toto.bind(obj); +console.log(toto() === objetGlobal); // true +``` + +Quelle que soit la méthode utilisée le `this` de `toto` sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : `this` prendra la valeur de `this` dans le contexte englobant. + +```js +// On crée un objet obj qui a une méthode truc +// qui renvoie une fonction qui renvoie la +// valeur de this. +// La fonction qui est renvoyée est créée sous +// la forme d'une fonction fléchée. this est +// donc fixé de façon permanente avec la valeur +// de this du contexte englobant. +var obj = { truc : function() { + var x = (() => this); + return x; + } + }; +// On appelle truc comme une méthode d'obj, this +// vaudra donc obj. On récupère la fonction +// renvoyée par truc et on en stocke une référence +// avec la variable fn +var fn = obj.truc(); + +// On appelle fn sans définir this, par défaut +// en mode strict cela correspondrait à l'objet +// global ou à undefined +console.log(fn() === obj); // true + +// Attention à ne pas référence la méthode d'obj +// sans l'appeler +var fn2 = obj.truc; +// Appeler le this de la fonction fléchée dans ce contexte +// renverra window car c'est le this associé à fn2 (qui +// correspond au contexte global) +console.log(fn2()() == window); // true +``` + +Dans l'exemple précédent, la fonction affectée à `obj.truc` renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, `this` vaut toujours `obj.truc` lorsque la fonction est appelée. Lorsque la fonction est renvoyée, `this` continue de correspondre à la valeur initiale. Dans ce code, `this` vaut `obj` et garde cette valeur, même lorsqu'il est appelé plus tard. + +### En tant que méthode d'un objet + +Lorsqu'une fonction est appelée comme méthode d'un objet, `this` correspondra à l'objet possédant la méthode qu'on appelle. + +Ainsi, dans l'exemple suivant, lorsqu'on appelle `o.f()`, le `this` contenu à l'intérieur de la fonction correspond à l'objet `o`. + +```js +var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +``` + +On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de `o` plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi : + +```js +var o = {prop: 37}; + +function indépendante() { + return this.prop; +} + +o.f = indépendante; + +console.log(o.f()); // 37 +``` + +On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de `o`. + +De la même façon, `this` n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction `o.b.g`, on appelle la méthode `g` de l'objet `o.b`. Ainsi, au moment de l'exécution, `this` fera référence à `o.b`. Le fait que cet objet soit une propriété de `o` n'a aucun impact : seule la référence objet la plus proche compte. + +```js +o.b = {g: indépendante, prop: 42}; +console.log(o.b.g()); // 42 +``` + +#### `this` sur la chaîne de prototypes de l'objet + +Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, `this` fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet). + +```js +var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +``` + +Dans cet exemple, l'objet qui est affecté à la variable `p` ne possède pas directement la propriété `f`, il en hérite de par son prototype. Cela n'impacte en rien la détermination de `this` car la recherche de la propriété `f` remonte le long de la chaîne de prototype et s'arrête à `o`. Au début de cette recherche, on a une référence à `p.f`, aussi `this` fera référence à l'objet représenté par `p`. Autrement dit `f` étant appelé comme une méthode de `p`, `this` fera ici référence à `p`. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript. + +#### `this` dans un _getter_ ou _setter_ + +Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (_getter_) ou d'un mutateur (_setter_). Une fonction utilisée comme accesseur ou mutateur verra son `this` lié à l'objet à partir duquel on souhaite accéder/changer la propriété. + +```js +function moduleRéel(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'moduleRéel', { + get: moduleRéel, enumerable:true, configurable:true}); + +console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142 +``` + +### En tant que constructeur + +Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le `this` correspondant sera lié au nouvel objet en train d'être construit. + +> **Note :** Par défaut, un constructeur renverra l'objet auquel `this` fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de `this`). + +```js +/* + * Les constructeurs fonctionnent de la façon suivante : + * + * function MonConstructeur(){ + * // le corps de la fonction + * // on crée des propriétés sur |this| + * // par exemple + * this.fum = "nom"; + * // etc. + * + * // Si la fonction utilise une instruction de + * // retour (return) et renvoie un objet + * // ce sera cet objet qui sera le résultat de + * // l'expression |new|. + * // Sinon, le résultat sera l'objet + * // lié à |this| + * // (ce second cas est celui qu'on rencontre + * // fréquemment). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // 38 +``` + +Dans le dernier exemple (`C2`), on renvoie un objet lors de la construction. L'objet qui était lié `this` est alors abandonné. (L'instruction "`this.a = 37;`" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.) + +### En tant que gestionnaire d'événement DOM + +Lorsqu'une fonction est utilisée comme gestionnaire d'événement (_event handler_), le `this` correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}). + +```js +// Lorsque cette fonction est appelée +// comme listener, l'élément associé +// sera coloré en bleu +function bluify(e){ + // Cette proposition est toujours vraie + console.log(this === e.currentTarget); + + // true lorsque currentTarget et target correspondent + // au même objet + console.log(this === e.target); + + this.style.backgroundColor = '#A5D9F3'; +} + +// On obtient une liste de tous les éléments +// contenus dans le document +var elements = document.getElementsByTagName('*'); + +// On ajout le listener bluify pour réagier au clic +// Quand on clique sur un élément, il deviendra bleu +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +} +``` + +### En tant que gestionnaire d'événements _in-line_ + +Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (_in-line_), la valeur de `this` correspondra à l'élément du DOM sur lequel on a placé le _listener_. Ainsi : + +```js +<button onclick="console.log(this.tagName.toLowerCase());"> + Afficher this +</button> +``` + +montrera le texte `button` lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de `this` affectée de cette façon : + +```js +<button onclick="console.log((function(){return this})());"> + Afficher le this interne +</button> +``` + +Ici, on utilise `this `à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet `window` pour un navigateur avec du code non-strict). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.this")}} + +## Voir aussi + +- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) +- [this & les prototypes objet](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) de Kyle Simpson sur GitHub (en anglais) +- [Un article explicatif sur `this` (en anglais)](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/) +- La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global `this` diff --git a/files/fr/web/javascript/reference/operators/typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html deleted file mode 100644 index 87cbf9acc3..0000000000 --- a/files/fr/web/javascript/reference/operators/typeof/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: L'opérateur typeof -slug: Web/JavaScript/Reference/Operators/typeof -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/typeof -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur <strong><code>typeof</code></strong> renvoie une chaîne qui indique le type de son opérande.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>L'opérateur <code>typeof</code> est suivi de son opérande :</p> - -<pre class="syntaxbox">typeof <em>operande</em></pre> - -<h3 id="Paramètre">Paramètre</h3> - -<p><code><em>operande</em></code> est une expression qui représente la valeur dont on souhaite obtenir le type.</p> - -<h2 id="Description">Description</h2> - -<p>Le tableau qui suit liste les résultats possibles de l'opérateur <code>typeof</code>. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types et structures de données JavaScript</a>.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Type</th> - <th scope="col">Résultat</th> - </tr> - </thead> - <tbody> - <tr> - <td>indéfini</td> - <td><code>"undefined"</code></td> - </tr> - <tr> - <td>nul</td> - <td><code>"object" </code>(voir ci-après)</td> - </tr> - <tr> - <td>booléen</td> - <td><code>"boolean"</code></td> - </tr> - <tr> - <td>nombre</td> - <td><code>"number"</code></td> - </tr> - <tr> - <td>grand entier</td> - <td><code>"bigint"</code></td> - </tr> - <tr> - <td>chaîne de caractère</td> - <td><code>"string"</code></td> - </tr> - <tr> - <td>symbole (nouveauté d'ECMAScript 6 / 2015)</td> - <td><code>"symbol"</code></td> - </tr> - <tr> - <td>objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)</td> - <td><em>Résultat différent selon l'implémentation</em></td> - </tr> - <tr> - <td>Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])</td> - <td><code>"function"</code></td> - </tr> - <tr> - <td>Tout autre objet</td> - <td><code>"object"</code></td> - </tr> - </tbody> -</table> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush:js">// Pour les nombres -typeof 37 === 'number'; -typeof 3.14 === 'number'; -typeof(42) === 'number'; -typeof Math.LN2 === 'number'; -typeof Infinity === 'number'; -typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"… -typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre - -// Grand entier -typeof 42n === 'bigint'; - -// Les chaînes de caractères -typeof "" === 'string'; -typeof "bla" === 'string'; -typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne -typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne -typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne - - -// Les booléens -typeof true === 'boolean'; -typeof false === 'boolean'; -typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique -typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean() - - -// Les symboles -typeof Symbol() === 'symbol' -typeof Symbol('foo') === 'symbol' -typeof Symbol.iterator === 'symbol' - - -// Indéfini -typeof undefined === 'undefined'; -typeof blabla === 'undefined'; // pour une variable indéfinie - - -// Les objets -typeof {a:1} === 'object'; - -// Utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/isArray">Array.isArray</a> ou Object.prototype.toString.call -// afin de différencier les objets des tableaux -typeof [1, 2, 4] === 'object'; - -typeof new Date() === 'object'; -typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles - -// Les expressions suivantes sont source de confusion -// à ne pas utiliser sous cette forme -typeof new Boolean(true) === 'object'; -typeof new Number(1) === 'object'; -typeof new String("abc") === 'object'; - - -// Les fonctions -typeof function(){} === 'function'; -typeof class C {} === 'function'; -typeof Math.sin === 'function'; -</pre> - -<h2 id="Informations_supplémentaires">Informations supplémentaires</h2> - -<h3 id="null"><code>null</code></h3> - -<pre class="brush:js">// Cela est valable depuis les commencements de JavaScript -typeof null === 'object'; -</pre> - -<p>Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. <code>null</code> était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de <code>null</code> valait 0, d'où le comportement de <code>typeof</code> (<a href="https://www.2ality.com/2013/10/typeof-null.html">source</a>).</p> - -<p>Un correctif fut proposé pour ECMAScript mais il fut <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">refusé</a>. Avec cette version, on aurait eu <code>typeof null === 'null'</code>.</p> - -<h3 id="Utiliser_l'opérateur_new">Utiliser l'opérateur <code>new</code></h3> - -<pre class="brush: js">// Tous les constructeurs doivent être employés -// avec le mot-clé "new" -var maChaine = new String("toto"); -var monNombre = new Number(100); - -typeof maChaine; // renverra "object" -typeof monNombre; // renverra "object" - -// En revanche avec le constructeur Function, -// on aura : -var maFonction = new Function(); -typeof maFonction; // renverra "function"</pre> - -<h3 id="Utilisation_des_parenthèses">Utilisation des parenthèses</h3> - -<pre class="brush: js">// Les parenthèses peuvent s'avérer utile pour -// déterminer le type de données d'une expression -// complète - -var maDonnee = 99; - -typeof maDonnee + 'Toto'; // renverra 'number Toto' -typeof (maDonnee + 'Toto'); // renverra 'string' -</pre> - -<h3 id="Expressions_rationnelles">Expressions rationnelles</h3> - -<p>Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.</p> - -<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1 -typeof /s/ === 'object'; // À partir de Firefox 5 : Conforme à ECMAScript 5.1 -</pre> - -<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)</h3> - -<p>Avant ECMAScript 2015 (ES6), <code>typeof</code> retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant <code>typeof</code>.</p> - -<p>Avec l'apparition des opérateurs <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, si on utilise <code>typeof</code> sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise <code>typeof</code> sur une variable déclarée avec <code>var</code> avant la déclaration, cela renverra <code>undefined</code>. Les variables déclarées avec <code>let</code> et <code>const</code> sont en fait placées dans une <em><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporaire </a></em>entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.</p> - -<pre class="brush: js">typeof variableGlobaleNonDeclaree === "undefined"; - -typeof variableLet; // ReferenceError -let variableLet; - -typeof constante; // ReferenceError -const constante = "coucou"; - -typeof maClasse; // ReferenceError -class maClasse{};</pre> - -<h3 id="Exceptions">Exceptions</h3> - -<p>Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est <code>"undefined"</code>.</p> - -<pre class="brush: js">typeof document.all === "undefined";</pre> - -<p>Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de <code>document.all</code> représente une violation « volontaire » du standard ECMAScript original.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}</td> - <td>{{Spec2('ES3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale, implémentée avec JavaScript 1.1.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.typeof")}}</p> - -<h2 id="Notes_spécifiques_à_IE">Notes spécifiques à IE</h2> - -<p>Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :</p> - -<pre class="brush: js">typeof alert === 'object'</pre> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}</li> - <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Discussion es-discuss sur l'évolution de <code>typeof</code> avec ECMAScript 2015 et <code>let</code></a></li> - <li><a href="https://github.com/tc39/ecma262/issues/668">À propos du non-respect volontaire du standard avec le type de <code>document.all</code></a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/typeof/index.md b/files/fr/web/javascript/reference/operators/typeof/index.md new file mode 100644 index 0000000000..d31c1d7b6b --- /dev/null +++ b/files/fr/web/javascript/reference/operators/typeof/index.md @@ -0,0 +1,215 @@ +--- +title: L'opérateur typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/typeof +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof +--- +{{jsSidebar("Operators")}} + +L'opérateur **`typeof`** renvoie une chaîne qui indique le type de son opérande. + +{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}} + +## Syntaxe + +L'opérateur `typeof` est suivi de son opérande : + + typeof operande + +### Paramètre + +`operande` est une expression qui représente la valeur dont on souhaite obtenir le type. + +## Description + +Le tableau qui suit liste les résultats possibles de l'opérateur `typeof`. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur [les types et structures de données JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives). + +| Type | Résultat | +| -------------------------------------------------------------------------------- | ------------------------------------------- | +| indéfini | `"undefined"` | +| nul | `"object" `(voir ci-après) | +| booléen | `"boolean"` | +| nombre | `"number"` | +| grand entier | `"bigint"` | +| chaîne de caractère | `"string"` | +| symbole (nouveauté d'ECMAScript 6 / 2015) | `"symbol"` | +| objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS) | _Résultat différent selon l'implémentation_ | +| Objet Function (au sens ECMA-262, un objet qui implémente [[Call]]) | `"function"` | +| Tout autre objet | `"object"` | + +## Exemples + +```js +// Pour les nombres +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"… +typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre + +// Grand entier +typeof 42n === 'bigint'; + +// Les chaînes de caractères +typeof "" === 'string'; +typeof "bla" === 'string'; +typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne +typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne +typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne + + +// Les booléens +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique +typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean() + + +// Les symboles +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Indéfini +typeof undefined === 'undefined'; +typeof blabla === 'undefined'; // pour une variable indéfinie + + +// Les objets +typeof {a:1} === 'object'; + +// Utiliser la méthode Array.isArray ou Object.prototype.toString.call +// afin de différencier les objets des tableaux +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; +typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles + +// Les expressions suivantes sont source de confusion +// à ne pas utiliser sous cette forme +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String("abc") === 'object'; + + +// Les fonctions +typeof function(){} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +``` + +## Informations supplémentaires + +### `null` + +```js +// Cela est valable depuis les commencements de JavaScript +typeof null === 'object'; +``` + +Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. `null` était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de `null` valait 0, d'où le comportement de `typeof` ([source](https://www.2ality.com/2013/10/typeof-null.html)). + +Un correctif fut proposé pour ECMAScript mais il fut [refusé](https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null). Avec cette version, on aurait eu `typeof null === 'null'`. + +### Utiliser l'opérateur `new` + +```js +// Tous les constructeurs doivent être employés +// avec le mot-clé "new" +var maChaine = new String("toto"); +var monNombre = new Number(100); + +typeof maChaine; // renverra "object" +typeof monNombre; // renverra "object" + +// En revanche avec le constructeur Function, +// on aura : +var maFonction = new Function(); +typeof maFonction; // renverra "function" +``` + +### Utilisation des parenthèses + +```js +// Les parenthèses peuvent s'avérer utile pour +// déterminer le type de données d'une expression +// complète + +var maDonnee = 99; + +typeof maDonnee + 'Toto'; // renverra 'number Toto' +typeof (maDonnee + 'Toto'); // renverra 'string' +``` + +### Expressions rationnelles + +Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs. + +```js +typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1 +typeof /s/ === 'object'; // À partir de Firefox 5 : Conforme à ECMAScript 5.1 +``` + +### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) + +Avant ECMAScript 2015 (ES6), `typeof` retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant `typeof`. + +Avec l'apparition des opérateurs [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const), si on utilise `typeof` sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise `typeof` sur une variable déclarée avec `var` avant la déclaration, cela renverra `undefined`. Les variables déclarées avec `let` et `const` sont en fait placées dans une *[zone morte temporaire ](</fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let>)*entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur. + +```js +typeof variableGlobaleNonDeclaree === "undefined"; + +typeof variableLet; // ReferenceError +let variableLet; + +typeof constante; // ReferenceError +const constante = "coucou"; + +typeof maClasse; // ReferenceError +class maClasse{}; +``` + +### Exceptions + +Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est `"undefined"`. + +```js +typeof document.all === "undefined"; +``` + +Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de `document.all` représente une violation « volontaire » du standard ECMAScript original. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.1. | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.typeof")}} + +## Notes spécifiques à IE + +Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura : + +```js +typeof alert === 'object' +``` + +## Voir aussi + +- L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}} +- [Discussion es-discuss sur l'évolution de `typeof` avec ECMAScript 2015 et `let`](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15) +- [À propos du non-respect volontaire du standard avec le type de `document.all`](https://github.com/tc39/ecma262/issues/668) diff --git a/files/fr/web/javascript/reference/operators/unary_negation/index.html b/files/fr/web/javascript/reference/operators/unary_negation/index.html deleted file mode 100644 index bbe81aaeb6..0000000000 --- a/files/fr/web/javascript/reference/operators/unary_negation/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Négation unaire (-) -slug: Web/JavaScript/Reference/Operators/Unary_negation -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.unary_negation -translation_of: Web/JavaScript/Reference/Operators/Unary_negation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de négation unaire (<code>-</code>) se place devant son opérande et le transforme en son opposé.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> -<var>x</var> -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="negating_numbers">Avec des nombres</h3> - -<pre class="brush: js">const x = 3; -const y = -x; - -// y = -3 -// x = 3 -</pre> - -<h3 id="negating_non-numbers">Avec des valeurs non-numériques</h3> - -<p>L'opérateur de négation unaire peut être utilisé pour convertir une valeur non-numérique en nombre.</p> - -<pre class="brush: js">const x = "4"; -const y = -x; - -// y = -4 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/unary_negation/index.md b/files/fr/web/javascript/reference/operators/unary_negation/index.md new file mode 100644 index 0000000000..fbf8caf6f0 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/unary_negation/index.md @@ -0,0 +1,65 @@ +--- +title: Négation unaire (-) +slug: Web/JavaScript/Reference/Operators/Unary_negation +tags: + - JavaScript + - Language feature + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Unary_negation +browser-compat: javascript.operators.unary_negation +--- +{{jsSidebar("Operators")}} + +L'opérateur de négation unaire (`-`) se place devant son opérande et le transforme en son opposé. + +{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}} + +## Syntaxe + +```js +Opérateur : -x +``` + +## Exemples + +### Avec des nombres + +```js +const x = 3; +const y = -x; + +// y = -3 +// x = 3 +``` + +### Avec des valeurs non-numériques + +L'opérateur de négation unaire peut être utilisé pour convertir une valeur non-numérique en nombre. + +```js +const x = "4"; +const y = -x; + +// y = -4 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/fr/web/javascript/reference/operators/unary_plus/index.html b/files/fr/web/javascript/reference/operators/unary_plus/index.html deleted file mode 100644 index 37e7148369..0000000000 --- a/files/fr/web/javascript/reference/operators/unary_plus/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Plus unaire (+) -slug: Web/JavaScript/Reference/Operators/Unary_plus -tags: - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.unary_plus -translation_of: Web/JavaScript/Reference/Operators/Unary_plus ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de plus unaire (<code>+</code>) précède son opérande et évalue son opérande en essayant de le convertir en nombre si ce n'est pas déjà une valeur numérique.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> +<var>x</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Bien que la négation unaire (<code>-</code>) puisse également être utilisée pour convertir des valeurs non-numérique, le plus unaire est plus rapide et plus conventionnel, car il n'effectue pas d'autres opérations que la conversion. Il peut être utilisé pour convertir les représentations textuelles d'entiers ou de flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les représentations entières au format décimal ou hexadécimal sont toutes les deux prises en charge. Les nombres négatifs sont pris en charge (hors représentation hexadécimale). L'utilisation de cet opérateur sur les valeurs de type <code>BigInt</code> déclenchera une exception <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>. Si l'analyse de valeur ne permet pas de déduire une valeur numérique, le résultat sera <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>.</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="usage_with_numbers">Avec des nombres</h3> - -<pre class="brush: js">const x = 1; -const y = -1; - -console.log(+x); -// 1 -console.log(+y); -// -1</pre> - -<h3 id="usage_with_non-numbers">Avec des valeurs non-numériques</h3> - -<pre class="brush: js">+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -+1n // throws TypeError: Cannot convert BigInt value to number -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/unary_plus/index.md b/files/fr/web/javascript/reference/operators/unary_plus/index.md new file mode 100644 index 0000000000..0d25476c2c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/unary_plus/index.md @@ -0,0 +1,70 @@ +--- +title: Plus unaire (+) +slug: Web/JavaScript/Reference/Operators/Unary_plus +tags: + - JavaScript + - Language feature + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/Unary_plus +browser-compat: javascript.operators.unary_plus +--- +{{jsSidebar("Operators")}} + +L'opérateur de plus unaire (`+`) précède son opérande et évalue son opérande en essayant de le convertir en nombre si ce n'est pas déjà une valeur numérique. + +{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}} + +## Syntaxe + +```js +Opérateur : +x +``` + +## Description + +Bien que la négation unaire (`-`) puisse également être utilisée pour convertir des valeurs non-numérique, le plus unaire est plus rapide et plus conventionnel, car il n'effectue pas d'autres opérations que la conversion. Il peut être utilisé pour convertir les représentations textuelles d'entiers ou de flottants ainsi que les valeurs `true`, `false`, et `null`. Les représentations entières au format décimal ou hexadécimal sont toutes les deux prises en charge. Les nombres négatifs sont pris en charge (hors représentation hexadécimale). L'utilisation de cet opérateur sur les valeurs de type `BigInt` déclenchera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError). Si l'analyse de valeur ne permet pas de déduire une valeur numérique, le résultat sera [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN). + +## Exemples + +### Avec des nombres + +```js +const x = 1; +const y = -1; + +console.log(+x); +// 1 +console.log(+y); +// -1 +``` + +### Avec des valeurs non-numériques + +```js ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN ++1n // throws TypeError: Cannot convert BigInt value to number +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition) +- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division) +- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder) +- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment) +- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement) +- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation) diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html deleted file mode 100644 index e3255ae767..0000000000 --- a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Décalage binaire à droite non-signé (>>>) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.unsigned_right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de <strong>décalage binaire à droite non-signé (<code>>>></code>)</strong> décale la séquence de bits formée par le premier opérande d'autant de bits vers la droite que la valeur indiquée par le second opérande. Les bits en excès à droite sont écartés et ce sont des zéros qui sont ajoutés à gauches. Le bit de signe devient alors nécessairement <code>0</code> et le résultat est donc positif. À la différence des autres opérateurs binaires, cet opérateur renvoie un entier non-signé sur 32 bits.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="brush: js"> -<var>a</var> >>> <var>b</var> -</pre> - -<h2 id="description">Description</h2> - -<p>Ce opérateur décale les bits du premier opérande vers la droite, selon la valeur du deuxième opérande. Les bits dépassant à droite sont éliminés tandis que des zéros sont ajoutés à gauche. Le bit de signe vaut alors <code>0</code> et en conséquence le résultat est positif. La valeur fournie par cet opérateur, à la différence des autres opérateurs binaires, est une valeur entière sur 32 bits non-signée.</p> - -<p>Pour les nombres positifts, le décalage binaire à droite et le décalage binaire à droite non-signés renverront le même résultat. Par exemple, <code>9 >>> 2</code> renvoie 2, également renvoyé par <code>9 >> 2</code>:</p> - -<pre class="brush: js"> - 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- - 9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Toutefois, ce n'est pas le cas pour les nombres négatifs : <code>-9 >>> 2</code> renverra 1073741821, qui est différent de <code>-9 >> 2</code> (qui renvoie <code>-3</code>) :</p> - -<pre class="brush: js"> - -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- - -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_unsigned_right_shift">Utiliser le décalage à droite non-signé</h3> - -<pre class="brush: js"> - 9 >>> 2; // 2 --9 >>> 2; // 1073741821 -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">L'opérateur de décalage binaire à droite non-signé et d'affectation</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md new file mode 100644 index 0000000000..a88a775af9 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md @@ -0,0 +1,64 @@ +--- +title: Décalage binaire à droite non-signé (>>>) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift +tags: + - Bitwise operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.unsigned_right_shift +--- +{{jsSidebar("Operators")}} + +L'opérateur de **décalage binaire à droite non-signé (`>>>`)** décale la séquence de bits formée par le premier opérande d'autant de bits vers la droite que la valeur indiquée par le second opérande. Les bits en excès à droite sont écartés et ce sont des zéros qui sont ajoutés à gauches. Le bit de signe devient alors nécessairement `0` et le résultat est donc positif. À la différence des autres opérateurs binaires, cet opérateur renvoie un entier non-signé sur 32 bits. + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}} + +## Syntaxe + +```js +a >>> b +``` + +## Description + +Ce opérateur décale les bits du premier opérande vers la droite, selon la valeur du deuxième opérande. Les bits dépassant à droite sont éliminés tandis que des zéros sont ajoutés à gauche. Le bit de signe vaut alors `0` et en conséquence le résultat est positif. La valeur fournie par cet opérateur, à la différence des autres opérateurs binaires, est une valeur entière sur 32 bits non-signée. + +Pour les nombres positifts, le décalage binaire à droite et le décalage binaire à droite non-signés renverront le même résultat. Par exemple, `9 >>> 2` renvoie 2, également renvoyé par `9 >> 2`: + +```js + 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- + 9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +``` + +Toutefois, ce n'est pas le cas pour les nombres négatifs : `-9 >>> 2` renverra 1073741821, qui est différent de `-9 >> 2` (qui renvoie `-3`) : + +```js + -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- + -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +``` + +## Exemples + +### Utiliser le décalage à droite non-signé + +```js + 9 >>> 2; // 2 +-9 >>> 2; // 1073741821 +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [L'opérateur de décalage binaire à droite non-signé et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html deleted file mode 100644 index 1196307586..0000000000 --- a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Affectation après décalage à droite non signé (>>>=) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -browser-compat: javascript.operators.unsigned_right_shift_assignment -translation-of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'opérateur de décalage à droite non signé et d'affectation (<em><code>>>>=</code></em>) décale la séquence de bits fournie par l'opérande gauche vers la droite, d'autant de bits qu'indiqués par l'opérande droit, puis affecte le résultat de l'opération à la variable indiquée par l'opérande gauche.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div> - -<h2 id="syntax">Syntax</h2> - -<pre class="brush: js"> -<strong>Opérateur :</strong> x >>>= y -<strong>Signification :</strong> x = x >>> y -</pre> - -<h2 id="examples">Exemples</h2> - -<h3 id="using_unsigned_right_shift_assignment">Utiliser l'opérateur de décalage à droite non signé et d'affectation</h3> - -<pre class="brush: js"> -let a = 5; // (00000000000000000000000000000101) -a >>>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>>= 2; // 1073741822 (00111111111111111111111111111110) -</pre> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">L'opérateur de décalage à droite</a></li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md new file mode 100644 index 0000000000..0aa12d952a --- /dev/null +++ b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: Affectation après décalage à droite non signé (>>>=) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.unsigned_right_shift_assignment +--- +{{jsSidebar("Operators")}} + +L'opérateur de décalage à droite non signé et d'affectation (_`>>>=`_) décale la séquence de bits fournie par l'opérande gauche vers la droite, d'autant de bits qu'indiqués par l'opérande droit, puis affecte le résultat de l'opération à la variable indiquée par l'opérande gauche. + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}} + +## Syntax + +```js +Opérateur : x >>>= y +Signification : x = x >>> y +``` + +## Exemples + +### Utiliser l'opérateur de décalage à droite non signé et d'affectation + +```js +let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>>= 2; // 1073741822 (00111111111111111111111111111110) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [L'opérateur de décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) diff --git a/files/fr/web/javascript/reference/operators/void/index.html b/files/fr/web/javascript/reference/operators/void/index.html deleted file mode 100644 index 19a2c21318..0000000000 --- a/files/fr/web/javascript/reference/operators/void/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'opérateur void -slug: Web/JavaScript/Reference/Operators/void -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/void -original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>L'<strong>opérateur <code>void</code></strong> permet d'évaluer une <em>expression</em> donnée et de renvoyer <code>undefined</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">void <em>expression</em></pre> - -<h2 id="Description">Description</h2> - -<p>Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.</p> - -<p>L'opérateur <code>void</code> est souvent utilisé pour obtenir la valeur <code>undefined</code>, généralement avec "<code>void(0)</code>" (qui est l'équivalent de "<code>void 0</code>"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.</p> - -<p>Attention à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a> et notamment de celle de <code>void</code>, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :</p> - -<pre class="brush: js">void 2 == '2'; // renvoie false -void (2 === '2'); // renvoie undefined</pre> - -<h2 id="Expressions_de_fonction_appelées_immédiatement">Expressions de fonction appelées immédiatement</h2> - -<p>Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, <code>void</code> peut être utilisé pour que le mot-clé <code>function</code> soit traité comme une expression plutôt que comme une déclaration.</p> - -<pre class="brush: js">void function iife() { - var toto = function () {}; - var machin = function () {}; - var truc = function () { - toto(); - machin(); - }; - var bidule = function () {}; - - truc(); - bidule(); -}(); -</pre> - -<h2 id="Les_URI_JavaScript">Les URI JavaScript</h2> - -<p>Lorsqu'un navigateur utilise une URI avec <code>javascript:</code>, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur <code>void</code> peut alors être utilisé pour renvoyer cette valeur. Par exemple :</p> - -<pre><a href="javascript:void(0);"> - Cliquer ici (sans effet) -</a> - -<a href="javascript:void(document.body.style.backgroundColor='green');"> - Cliquer ici pour rendre le fond vert -</a></pre> - -<p>Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole <code>javascript:</code>, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.</p> - -<h2 id="Fonctions_fléchées_sans_valeur_de_retour">Fonctions fléchées sans valeur de retour</h2> - -<p>Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.</p> - -<p>Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur <code>void</code> :</p> - -<pre class="brush: js">button.onclick = () => void faireQQc();</pre> - -<p>Ainsi, la valeur de retour de la fonction <code>faireQQc</code> sera bloquée par <code>void</code> et c'est <code>undefined</code> qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de <code>faireQQc</code> par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.void")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("undefined")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/void/index.md b/files/fr/web/javascript/reference/operators/void/index.md new file mode 100644 index 0000000000..3b87959b55 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/void/index.md @@ -0,0 +1,95 @@ +--- +title: L'opérateur void +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/void +original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void +--- +{{jsSidebar("Operators")}} + +L'**opérateur `void`** permet d'évaluer une _expression_ donnée et de renvoyer `undefined`. + +{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}} + +## Syntaxe + + void expression + +## Description + +Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}. + +L'opérateur `void` est souvent utilisé pour obtenir la valeur `undefined`, généralement avec "`void(0)`" (qui est l'équivalent de "`void 0`"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}. + +Attention à [la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs) et notamment de celle de `void`, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression : + +```js +void 2 == '2'; // renvoie false +void (2 === '2'); // renvoie undefined +``` + +## Expressions de fonction appelées immédiatement + +Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, `void` peut être utilisé pour que le mot-clé `function` soit traité comme une expression plutôt que comme une déclaration. + +```js +void function iife() { + var toto = function () {}; + var machin = function () {}; + var truc = function () { + toto(); + machin(); + }; + var bidule = function () {}; + + truc(); + bidule(); +}(); +``` + +## Les URI JavaScript + +Lorsqu'un navigateur utilise une URI avec `javascript:`, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur `void` peut alors être utilisé pour renvoyer cette valeur. Par exemple : + + <a href="javascript:void(0);"> + Cliquer ici (sans effet) + </a> + + <a href="javascript:void(document.body.style.backgroundColor='green');"> + Cliquer ici pour rendre le fond vert + </a> + +Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole `javascript:`, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements. + +## Fonctions fléchées sans valeur de retour + +Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste. + +Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur `void` : + +```js +button.onclick = () => void faireQQc(); +``` + +Ainsi, la valeur de retour de la fonction `faireQQc` sera bloquée par `void` et c'est `undefined` qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de `faireQQc` par exemple et qu'on souhaite éviter les effets de bord causés par cette modification. + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1 | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.void")}} + +## Voir aussi + +- {{jsxref("undefined")}} diff --git a/files/fr/web/javascript/reference/operators/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html deleted file mode 100644 index b3b31488d4..0000000000 --- a/files/fr/web/javascript/reference/operators/yield/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Reference/Operators/yield -tags: - - ECMAScript 2015 - - Générateurs - - Itérateur - - JavaScript - - Opérateur -translation_of: Web/JavaScript/Reference/Operators/yield -original_slug: Web/JavaScript/Reference/Opérateurs/yield ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Le mot-clé <code>yield</code> est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou <a href="/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">une fonction génératrice historique</a>).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>[[rv =]]</em> yield [[<em>expression</em>]];</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>Définit la valeur à retourner depuis la fonction génératrice via <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»">le protocole itérateur</a>. Si omise, <code>undefined</code> sera retournée à la place.</dd> - <dt><code>rv</code></dt> - <dd>Retourne la valeur optionnelle passée à la méthode <code>next()</code> pour reprendre son exécution.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>Le mot-clé <code>yield</code> suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé <code>yield</code> est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé <code>return</code>.</p> - -<p>Le mot-clé <code>yield</code> ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des <em>callbacks</em>.</p> - -<p>Le mot-clé <code>yield</code> retourne en fait un objet <code>IteratorResult</code> ayant deux propriétés, <code>value</code> et <code>done.</code> La propriété <code>value</code> est le résultat de l'évaluation de l'expression <code>yield</code>, et <code>done</code> est <code>false</code>, indiquant que la fonction génératrice n'est pas complètement terminée.</p> - -<p>Une fois suspendue sur une expression <code>yield</code>, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode <code>next()</code> du générateur soit appelée. Chaque fois que la méthode <code>next()</code> du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :</p> - -<ul> - <li> - <p>un <code>yield</code>, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que <code>next()</code> sera appelé, l'exécution reprendra à l'instruction immédiatement après le <code>yield</code> ;</p> - </li> - <li> - <p>{{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;</p> - </li> - <li> - <p>la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et <code>done</code> est <code>true</code> ;</p> - </li> - <li> - <p>une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant dans lequel la <code>value</code> est la valeur spécifiée par l'instruction <code>return</code> et <code>done</code> vaut <code>true</code>.</p> - </li> -</ul> - -<p>Si une valeur optionnelle est passée à la méthode <code>next()</code> du générateur, cette valeur devient la valeur retournée par l'opération <code>yield</code> en cours du générateur.</p> - -<p>Entre le chemin de code du générateur, ses opérateurs <code>yield</code>, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Le code suivant est la déclaration d'un exemple de fonction génératrice :</p> - -<pre><code>function* compteVentesPommes () { - var listeVentes = [3, 7, 5]; - for (var i = 0; i < listeVentes.length; i++) { - yield listeVentes[i]; - } -}</code></pre> - -<p>Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.</p> - -<pre><code>var magasinPommes = compteVentesPommes(); // Générateur { } -console.log(magasinPommes.next()); // { value: 3, done: false } -console.log(magasinPommes.next()); // { value: 7, done: false } -console.log(magasinPommes.next()); // { value: 5, done: false } -console.log(magasinPommes.next()); // { value: undefined, done: true }</code></pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.yield")}}</p> - -<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> - -<ul> - <li>À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet <code>IteratorResult</code> tel que <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> - <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): - <ul> - <li>L'expression après le mot-clé <code>yield</code> est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : <code>function* compteVentesPommes() { yield; }</code></li> - </ul> - </li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li> - <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/yield/index.md b/files/fr/web/javascript/reference/operators/yield/index.md new file mode 100644 index 0000000000..da998c2c0c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield/index.md @@ -0,0 +1,89 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - Générateurs + - Itérateur + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/yield +original_slug: Web/JavaScript/Reference/Opérateurs/yield +--- +{{jsSidebar("Operators")}} + +Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)). + +{{EmbedInteractiveExample("pages/js/expressions-yield.html")}} + +## Syntaxe + + [[rv =]] yield [[expression]]; + +- `expression` + - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place. +- `rv` + - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution. + +## Description + +Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`. + +Le mot-clé `yield` ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des _callbacks_. + +Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée. + +Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes : + +- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ; +- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ; +- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ; +- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`. + +Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur. + +Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle. + +## Exemples + +Le code suivant est la déclaration d'un exemple de fonction génératrice : + + function* compteVentesPommes () { + var listeVentes = [3, 7, 5]; + for (var i = 0; i < listeVentes.length; i++) { + yield listeVentes[i]; + } + } + +Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué. + + var magasinPommes = compteVentesPommes(); // Générateur { } + console.log(magasinPommes.next()); // { value: 3, done: false } + console.log(magasinPommes.next()); // { value: 7, done: false } + console.log(magasinPommes.next()); // { value: 5, done: false } + console.log(magasinPommes.next()); // { value: undefined, done: true } + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.yield")}} + +## Notes spécifiques à Firefox + +- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}). +- À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): + + - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }` + +## Voir aussi + +- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator) +- L'instruction {{jsxref("Instructions/function*", "function*")}} +- L'expression {{jsxref("Opérateurs/function*", "function*")}} +- L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}} diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html deleted file mode 100644 index 0ce1a73abd..0000000000 --- a/files/fr/web/javascript/reference/operators/yield_star_/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: yield* -slug: Web/JavaScript/Reference/Operators/yield* -tags: - - ECMAScript 2015 - - Generators - - Iterable - - Iterator - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/yield* -original_slug: Web/JavaScript/Reference/Opérateurs/yield* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Une <strong>expression <code>yield*</code></strong> est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"> yield* [[expression]];</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>L'expression qui renvoie un objet itérable.</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>L'expression <code>yield*</code> itère sur l'opérande et génère chaque valeur générée par l'opérande.</p> - -<p>La valeur de l'expression <code>yield*</code> est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété <code>done</code> vaut <code>true</code>).</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Délégation_de_la_génération">Délégation de la génération</h3> - -<p>Dans le code suivant, les valeurs générées par <code>g1()</code> sont renvoyées grâce aux appels à la fonction <code>next()</code>, comme pour celles renvoyées par <code>g2()</code>.</p> - -<pre class="brush: js">function* g1() { - yield 2; - yield 3; - yield 4; -} -function* g2() { - yield 1; - yield* g1(); - yield 5; -} - -var iterator = g2(); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: 3, done: false } -console.log(iterator.next()); // { value: 4, done: false } -console.log(iterator.next()); // { value: 5, done: false } -console.log(iterator.next()); // { value: undefined, done: true } -</pre> - -<h3 id="Les_autres_objets_itérables">Les autres objets itérables</h3> - -<p><code>yield*</code> peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :</p> - -<pre class="brush: js">function* g3() { - yield* [1, 2]; - yield* "34"; - yield* Array.from(arguments); -} - -var iterator = g3(5, 6); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: "3", done: false } -console.log(iterator.next()); // { value: "4", done: false } -console.log(iterator.next()); // { value: 5, done: false } -console.log(iterator.next()); // { value: 6, done: false } -console.log(iterator.next()); // { value: undefined, done: true }</pre> - -<h3 id="La_valeur_de_l'expression_yield*">La valeur de l'expression <code>yield*</code></h3> - -<p><code>yield*</code> est une expression et non une instruction, elle est donc évaluée et fournit une valeur :</p> - -<pre class="brush: js">function* g4() { - yield* [1, 2, 3]; - return "toto"; -} - -var résultat; - -function* g5() { - résultat = yield* g4(); -} - -var iterator = g5(); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: 3, done: false } -console.log(iterator.next()); // { value: undefined, done: true }, - // g4() renvoie{ value: "toto", done: true } at this point - -console.log(résultat); // "toto"</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.operators.yield_star")}}</p> - -<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2> - -<ul> - <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) : - - <ul> - <li>La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}: - <pre class="brush: js">function* toto() { - yield - *[]; -}</pre> - </li> - </ul> - </li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li> - <li>L'instruction {{jsxref("Instruction/function*", "function*")}}</li> - <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> - <li>{{jsxref("Opérateurs/yield", "yield")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.md b/files/fr/web/javascript/reference/operators/yield_star_/index.md new file mode 100644 index 0000000000..86ad5717d8 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.md @@ -0,0 +1,140 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +original_slug: Web/JavaScript/Reference/Opérateurs/yield* +--- +{{jsSidebar("Operators")}} + +Une **expression `yield*`** est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable. + +{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}} + +## Syntaxe + + yield* [[expression]]; + +- `expression` + - : L'expression qui renvoie un objet itérable. + +## Description + +L'expression `yield*` itère sur l'opérande et génère chaque valeur générée par l'opérande. + +La valeur de l'expression `yield*` est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété `done` vaut `true`). + +## Exemples + +### Délégation de la génération + +Dans le code suivant, les valeurs générées par `g1()` sont renvoyées grâce aux appels à la fonction `next()`, comme pour celles renvoyées par `g2()`. + +```js +function* g1() { + yield 2; + yield 3; + yield 4; +} +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: 4, done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +``` + +### Les autres objets itérables + +`yield*` peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) : + +```js +function* g3() { + yield* [1, 2]; + yield* "34"; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: "3", done: false } +console.log(iterator.next()); // { value: "4", done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: 6, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +``` + +### La valeur de l'expression `yield*` + +`yield*` est une expression et non une instruction, elle est donc évaluée et fournit une valeur : + +```js +function* g4() { + yield* [1, 2, 3]; + return "toto"; +} + +var résultat; + +function* g5() { + résultat = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: undefined, done: true }, + // g4() renvoie{ value: "toto", done: true } at this point + +console.log(résultat); // "toto" +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ES2015')}} | Définition initiale | +| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.operators.yield_star")}} + +## Notes relatives à Firefox + +- À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) : + + - La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "\*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}: + + ```js + function* toto() { + yield + *[]; + } + ``` + +## Voir aussi + +- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator) +- L'instruction {{jsxref("Instruction/function*", "function*")}} +- L'expression {{jsxref("Opérateurs/function*", "function*")}} +- {{jsxref("Opérateurs/yield", "yield")}} |