From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../reference/operators/addition/index.html | 83 ++++ .../operators/addition_assignment/index.html | 58 +++ .../reference/operators/assignment/index.html | 65 ++++ .../reference/operators/async_function/index.html | 116 ++++++ .../reference/operators/await/index.html | 132 +++++++ .../reference/operators/class/index.html | 111 ++++++ .../reference/operators/comma_operator/index.html | 107 ++++++ .../operators/conditional_operator/index.html | 152 ++++++++ .../reference/operators/delete/index.html | 305 +++++++++++++++ .../operators/destructuring_assignment/index.html | 424 +++++++++++++++++++++ .../reference/operators/function/index.html | 163 ++++++++ .../reference/operators/function_star_/index.html | 91 +++++ .../reference/operators/grouping/index.html | 91 +++++ .../javascript/reference/operators/in/index.html | 145 +++++++ .../web/javascript/reference/operators/index.html | 302 +++++++++++++++ .../reference/operators/instanceof/index.html | 173 +++++++++ .../reference/operators/new.target/index.html | 110 ++++++ .../javascript/reference/operators/new/index.html | 200 ++++++++++ .../nullish_coalescing_operator/index.html | 151 ++++++++ .../operators/object_initializer/index.html | 305 +++++++++++++++ .../operators/operator_precedence/index.html | 359 +++++++++++++++++ .../operators/optional_chaining/index.html | 196 ++++++++++ .../operators/pipeline_operator/index.html | 72 ++++ .../operators/property_accessors/index.html | 154 ++++++++ .../reference/operators/spread_syntax/index.html | 262 +++++++++++++ .../reference/operators/super/index.html | 184 +++++++++ .../javascript/reference/operators/this/index.html | 420 ++++++++++++++++++++ .../reference/operators/typeof/index.html | 273 +++++++++++++ .../javascript/reference/operators/void/index.html | 122 ++++++ .../reference/operators/yield/index.html | 127 ++++++ .../reference/operators/yield_star_/index.html | 162 ++++++++ 31 files changed, 5615 insertions(+) create mode 100644 files/fr/web/javascript/reference/operators/addition/index.html create mode 100644 files/fr/web/javascript/reference/operators/addition_assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/async_function/index.html create mode 100644 files/fr/web/javascript/reference/operators/await/index.html create mode 100644 files/fr/web/javascript/reference/operators/class/index.html create mode 100644 files/fr/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/delete/index.html create mode 100644 files/fr/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/function/index.html create mode 100644 files/fr/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/fr/web/javascript/reference/operators/grouping/index.html create mode 100644 files/fr/web/javascript/reference/operators/in/index.html create mode 100644 files/fr/web/javascript/reference/operators/index.html create mode 100644 files/fr/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/fr/web/javascript/reference/operators/new.target/index.html create mode 100644 files/fr/web/javascript/reference/operators/new/index.html create mode 100644 files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/fr/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/fr/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/fr/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/fr/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/fr/web/javascript/reference/operators/super/index.html create mode 100644 files/fr/web/javascript/reference/operators/this/index.html create mode 100644 files/fr/web/javascript/reference/operators/typeof/index.html create mode 100644 files/fr/web/javascript/reference/operators/void/index.html create mode 100644 files/fr/web/javascript/reference/operators/yield/index.html create mode 100644 files/fr/web/javascript/reference/operators/yield_star_/index.html (limited to 'files/fr/web/javascript/reference/operators') diff --git a/files/fr/web/javascript/reference/operators/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..39f76c434d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,83 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Opérateurs/Addition +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +
{{jsSidebar("Operators")}}
+ +
L'opérateur d'addition (+) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de caractères.
+ + + +
{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
+ +
+ + + +

Syntaxe

+ +
Opérateur: x + y
+
+ +

Exemples

+ +

Addition numérique

+ +
// Nombre + Nombre -> addition
+1 + 2 // 3
+
+// Booléen + Nombre -> addition
+true + 1 // 2
+
+// Booléen + Booléen -> addition
+false + false // 0
+
+ +

Concaténation de chaînes

+ +
// String + String -> concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -> concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -> concatenation
+'foo' + false // "foofalse"
+ +

Spécifications

+ + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.operators.addition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html new file mode 100644 index 0000000000..5377d00b35 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.html @@ -0,0 +1,58 @@ +--- +title: Addition avec assignement (+=) +slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement +tags: + - Fonctionnalité du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +

{{jsSidebar("Operators")}}

+ +

L'opérateur d'addition avec assignement (+=) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.

+ +
{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}
+ +
+ + + +

Syntaxe

+ +
Opérateur : x += y
+Signifie :  x = x + y
+ +

Examples

+ +

Utilisation de l'opérateur

+ +
// On considère les variables suivantes :
+var chaine = "Hello";
+var nombre = 5;
+var booleen = true;
+
+// Nombre + Nombre
+nombre += 2;
+// 7
+
+// Booléen + Nombre
+booleen += 1;
+// 2
+
+// Booléen + Booléen
+booleen += false;
+// 1
+
+// Nombre + Chaîne
+nombre += "World";
+// "5World"
+
+// Chaîne + Booléen
+chaine += false;
+// "Hellofalse"
+
+// Chaîne + Chaîne
+chaine += "World"
+// "HelloWorld"
diff --git a/files/fr/web/javascript/reference/operators/assignment/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..5011c20000 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,65 @@ +--- +title: Assignement (=) +slug: Web/JavaScript/Reference/Opérateurs/Assignement +tags: + - Fonctionnalités du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +
{{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

+ +
// 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

+ + diff --git a/files/fr/web/javascript/reference/operators/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..0dd3cf0def --- /dev/null +++ b/files/fr/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,116 @@ +--- +title: Expression async function +slug: Web/JavaScript/Reference/Opérateurs/async_function +tags: + - Function + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +
{{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.

+
+ +

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 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 pour plus d'informations.

+ +

Exemples

+ +

Exemple simple

+ +
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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..87423b32a0 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/await/index.html @@ -0,0 +1,132 @@ +--- +title: await +slug: Web/JavaScript/Reference/Opérateurs/await +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/await +--- +
{{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.

+ +
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 :

+ +
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 :

+ +
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.

+ +
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()")}} :

+ +
var response = await maFonctionPromesse().catch(
+  (err) => {
+    console.log(err);
+  }
+);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..b41f9fc832 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/class/index.html @@ -0,0 +1,111 @@ +--- +title: class +slug: Web/JavaScript/Reference/Opérateurs/class +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +
{{JSSidebar("Operators")}}
+ +

Une expression de classe est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux expressions de fonctions, 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. 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 (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.

+ +
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.

+ +
// 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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..d3ccf9c8f4 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,107 @@ +--- +title: L'opérateur virgule +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{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 :

+ +
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.

+ +
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 :

+ +
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 :

+ +
function maFonction () {
+  var x = 0;
+
+  return (x += 1, x); // ce qui revient à renvoyer ++x
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..c2357f8e93 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,152 @@ +--- +title: L'opérateur conditionnel +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel +tags: + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{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 :

+ +
"Le prix est : " + (estMembre ? "15 €" : "30 €")
+
+ +

On peut également affecter des variables dont la valeur dépendra du test :

+ +
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) :

+ +
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 :

+ +
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é).

+ +
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.

+ +
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 :

+ +
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écificationStatutCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..19a48f8649 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,305 @@ +--- +title: L'opérateur delete +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/delete +--- +
{{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 non-configurable auquel cas false est renvoyé en mode non-strict.

+ +

Exceptions

+ +

Cet opérateur lève une exception {{jsxref("TypeError")}} en mode strict 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.

+ +

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 :

+ + + +

Voici un fragment de code qui illustre certains cas :

+ +
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.

+ +
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 :

+ +
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.

+ +
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.

+ +
"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

+ +
// 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 :

+ +
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.

+ +
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 :

+ +
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] :

+ +
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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..cdce16f559 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,424 @@ +--- +title: Affecter par décomposition +slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{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

+ +
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 ou les 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.

+ +
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

+ +
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 :

+ +
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 :

+ +
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).

+ +
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é.

+ +
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].

+ +
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 :

+ +
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 :

+ +
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 :

+ +
[,,] = f();
+
+ +

Exploiter les résultats d'une expression rationnelle

+ +

Lorsque la méthode 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 :

+ +
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 :

+ +
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 :

+ +
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

+ +
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 :

+ +
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é) :

+ +
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.

+ +
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.

+ +
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

+ +
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

+ +
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

+ +
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

+ +
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

+ +
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, avec la décomposition.

+ +
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 ajoute la syntaxe 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 :

+ +
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 :

+ +
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:

+ +
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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/function/index.html b/files/fr/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..bff2848ad7 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function/index.html @@ -0,0 +1,163 @@ +--- +title: L'opérateur function +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function +tags: + - Function + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{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 et aux déclarations de fonction.

+
+ +
{{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.

+
+ +

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 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 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).

+ +

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 :

+ +
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 :

+ +
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.

+ +
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 :

+ +
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 :

+ +
var a = "coucou";
+var b = "monde";
+
+// IIFE
+(function(x, y) {
+  console.log(x + " " + y);
+})(a, b);
+// coucou monde
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..8fa8fa1a4e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,91 @@ +--- +title: Expression function* +slug: Web/JavaScript/Reference/Opérateurs/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function* +--- +
{{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 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 :

+ +
var x = function*(y) {
+   yield y * y;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/grouping/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..07292088cd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,91 @@ +--- +title: Opérateur de groupement +slug: Web/JavaScript/Reference/Opérateurs/Groupement +tags: + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
{{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 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.

+ +
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écificationStatutCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/in/index.html b/files/fr/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..53c02fb41c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/in/index.html @@ -0,0 +1,145 @@ +--- +title: L'opérateur in +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/in +--- +
{{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.

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

+ +
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, l'opérateur in renvoie false pour cette propriété.

+ +
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é.

+ +
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()")}}.

+ +
"toString" in {}; // renvoie true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/index.html b/files/fr/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..531baa29cc --- /dev/null +++ b/files/fr/web/javascript/reference/operators/index.html @@ -0,0 +1,302 @@ +--- +title: Opérateurs +slug: Web/JavaScript/Reference/Opérateurs +tags: + - JavaScript + - Opérateurs + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.

+ +

Expressions et opérateurs, par catégorie

+ +

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

+ +

Expressions primaires

+ +

Les mots-clés basiques et les expressions générales en JavaScript.

+ +
+
{{jsxref("Opérateurs/L_opérateur_this", "this")}}
+
Le mot-clé this fait référence à une propriété spéciale du contexte d'exécution de la fonction.
+
{{jsxref("Opérateurs/L_opérateur_function", "function")}}
+
Le mot-clé function définit une expression de fonction.
+
{{jsxref("Opérateurs/class", "class")}}
+
Le mot-clé class définit une expression de classe.
+
 {{jsxref("Opérateurs/function*", "function*")}}
+
Le mot-clé function* définit une expression pour une fonction génératrice.
+
{{jsxref("Opérateurs/yield", "yield")}}
+
Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.
+
{{jsxref("Opérateurs/yield*", "yield*")}}
+
Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.
+
{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}
+
L'opérateur async function définit une expression de fonction asynchrone.
+
{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}
+
Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.
+
{{jsxref("Objets_globaux/Array", "[]")}}
+
Littéral initialisateur de tableau.
+
{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}
+
Littéral initialisateur d'objet.
+
{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}
+
Littéral d'expression rationnelle.
+
{{jsxref("Opérateurs/Groupement", "( )")}}
+
Opérateur de groupement.
+
+ +

Expressions « vers la gauche »

+ +

On affectera des valeurs aux variables à gauche de l'expression.

+ +
+
{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}
+
Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (objet.propriété et object["propriété"]).
+
{{jsxref("Opérateurs/L_opérateur_new", "new")}}
+
L'opérateur new permet de créer une instance d'un constructeur.
+
new.target
+
Dans les constructeurs, new.target fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.
+
{{jsxref("Opérateurs/super", "super")}}
+
Le mot-clé super permet d'appeler le constructeur parent.
+
{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}
+
L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).
+
+ +

Incrémentation et décrémentation

+ +

Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :

+ +
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}
+
Opérateur d'incrémentation suffixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}
+
Opérateur de décrémentation suffixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}
+
Opérateur d'incrémentation préfixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}
+
Opérateur de décrémentation préfixe.
+
+ +

Opérateurs unaires

+ +

Une opération unaire est une opération qui ne possède qu'un opérande.

+ +
+
{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+
L'opérateur delete permet de supprimer une propriété d'un objet.
+
{{jsxref("Opérateurs/L_opérateur_void", "void")}}
+
L'opérateur void écarte la valeur de retour d'une expression.
+
{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
+
L'opérateur typeof permet de déterminer le type d'un objet donné.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}
+
Le plus unaire permet de convertir son opérande en une valeur du type Number.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}
+
La négation unaire permet de convertir son opérande en une valeur du type Number puis d'en prendre l'opposé.
+
{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}
+
L'opérateur binaire NON (NOT).
+
{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}
+
L'opérateur du NON logique.
+
+ +

Opérateurs arithmétiques

+ +

Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.

+ +
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}
+
L'opérateur d'addition.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}
+
L'opérateur de soustraction.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}
+
L'opérateur de division.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}
+
L'opérateur de multiplication.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}
+
L'opérateur du reste.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}
+
Opérateur de puissance (exponentiation).
+
+ +

Opérateurs relationnels

+ +

Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.

+ +
+
{{jsxref("Opérateurs/L_opérateur_in", "in")}}
+
L'opérateur in permet de déterminer si un objet possède une propriété donnée.
+
{{jsxref("Opérateurs/instanceof", "instanceof")}}
+
L'opérateur instanceof permet de déterminer si un objet est une instance d'un autre objet.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(<)")}}
+
Opérateur inférieur strict.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(>)")}}
+
Opérateur supérieur strict.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)")}}
+
Opérateur inférieur ou égal.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)")}}
+
Opérateur supérieur ou égal.
+
+ +
+

Note : => n'est pas un opérateur. Il s'agit de la notation utilisée pour les fonctions fléchées.

+
+ +

Opérateurs d'égalité

+ +

Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.

+ +
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}
+
Opérateur d'égalité faible.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}
+
Opérateur d'inégalité faible.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}
+
Opérateur d'égalité stricte.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}
+
Opérateur d'inégalité stricte.
+
+ +

Opérateurs de décalage binaires

+ +

Ces opérations permettent de décaler les bits contenus dans l'opérande.

+ +
+
{{jsxref("Opérateurs/Opérateurs_binaires", "<<", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}
+
Opérateur binaire de décalage à gauche.
+
{{jsxref("Opérateurs/Opérateurs_binaires", ">>", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}
+
Opérateur binaire de décalage à droite.
+
{{jsxref("Opérateurs/Opérateurs_binaires", ">>>", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}
+
Opérateur binaire de décalage à droite non-signé.
+
+ +

Opérateurs binaires logiques

+ +

Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.

+ +
+
{{jsxref("Opérateurs/Opérateurs_binaires", "&", "#&_.28ET_binaire.29")}}
+
ET binaire (AND).
+
{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}
+
OU binaire (OR).
+
{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}
+
OU exclusif binaire (XOR).
+
+ +

Opérateurs logiques

+ +

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.

+ +
+
{{jsxref("Opérateurs/Opérateurs_logiques", "&&", "#ET_logique_.28&&.29")}}
+
ET logique (AND).
+
{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}
+
OU logique (OR).
+
+ +

Opérateur conditionnel ternaire

+ +
+
{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}
+
+

Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.

+
+
+ +

Opérateurs d'affectation

+ +

Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.

+ +
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}
+
Opérateur d'affectation.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}
+
Affectation après multiplication.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}
+
Affectation après division.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}
+
Affectation du reste.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}
+
Affectation après addition.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}
+
Affectation après soustraction.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "<<=", "#Left_shift_assignment")}}
+
Affectation après décalage à gauche.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>=", "#Right_shift_assignment")}}
+
Affectation après décalage à droite.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Affectation après décalage à droite non-signé.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "&=", "#Bitwise_AND_assignment")}}
+
Affectation après ET binaire.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}
+
Affectation après OU exclusif binaire.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}
+
Affectation après OU binaire.
+
{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}
+
+

L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.

+
+
+ +

Opérateur virgule

+ +
+
{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}
+
L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.
+
+ +

Fonctionnalités non-standards{{non-standard_inline}}

+ +
+
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}
+
La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.
+
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}
+
Le mot-clé function peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.
+
{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}
+
Compréhensions de tableau.
+
{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}
+
Compréhensions de générateurs.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1','#sec-11','Expressions')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé super .
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.operators")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..1db76a5bbd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,173 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Opérateurs/instanceof +tags: + - JavaScript + - Operator + - Prototype + - Reference + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +
{{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.

+ +
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 est bien un objet de type SVGElement dans un autre contexte, on pourra utiliser monNœud instanceof monNœud.documentMaitre.vue.SVGElement.

+ +
Note aux développeurs Mozilla :
+Dans un code utilisant XPCOM, instanceof a un comportement particulier : obj instanceof xpcomInterface (ex : Components.interfaces.nsIFile) appelle obj.QueryInterface(xpcomInterface) et retourne true si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de xpcomInterface sur obj après un test réussi d'instanceof. Contrairement au JavaScript classique, obj instanceof xpcomInterface fonctionnera comme prévu même si obj appartient à un autre niveau d'organisation (fenêtre, frame, etc.).
+ +

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.

+ +
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.

+ +
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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..63be303c4c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,110 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Opérateurs/new.target +tags: + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +
{{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. 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, 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 :

+ +
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 :

+ +
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ÉtatCommentaire
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/new/index.html b/files/fr/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..b82a898dc9 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new/index.html @@ -0,0 +1,200 @@ +--- +title: L'opérateur new +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/new +--- +
{{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. +
  2. Il lie cet objet à un autre objet en le définissant comme son prototype.
    3. +
  3. Le nouvel objet, créé à l'étape 1, est passé comme valeur this à la fonction
    4. +
  4. Si la fonction ne renvoie pas d'objet, c'est la valeur this qui est renvoyée.
    5. +
+ +
{{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. +
  2. Création d'une instance de l'objet avec new.
    3. +
+ +

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. +
  2. La fonction constructrice Toto est appelée avec les arguments fournis, this étant lié au nouvel objet créé. new Toto sera équivalent à new Toto() (i.e. un appel sans argument).
    3. +
  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).
    4. +
+ +

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

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
voiture2.propriétaire.nom
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..06de88d2b1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,151 @@ +--- +title: Opérateur de coalescence des nuls (Nullish coalescing operator) +slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator +tags: + - Coalescence + - JavaScript + - Opérateur + - Reference + - falsy + - nullish +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{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 (||), l'opérande de gauche sera renvoyé s'il s'agit d'une valeur équivalente à false 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.

+ +
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 (||) :

+ +
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.

+ +
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) :

+ +
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.

+ +
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.

+ +
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 :

+ +
(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 (?.) 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.

+ +
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")}}

+ +

Progression de l'implantation

+ +

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

+ +

{{EmbedTest262ReportResultsTable("coalesce-expression")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..6aa4d3121f --- /dev/null +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,305 @@ +--- +title: Initialisateur d'objet +slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

Il est possible d'initialiser un objet en utilisant les notations new 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

+ +
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.

+ +
// 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 ou à partir d'autres objets.

+ +

Créer des objets

+ +

On peut créer un objet sans aucune propriété grâce à l'expression suivante :

+ +
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.

+ +
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 pour plus d'information.

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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.

+ +
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, un accesseur ou un mutateur :

+ +
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".

+ +
// Raccourci pour les noms de méthodes (ES2015)
+var o = {
+  property(paramètres) {},
+  *generator() {}
+};
+ +

Ou encore :

+ +
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) :

+ +
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.

+ +

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 :

+ +
// 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()")}}.

+ +
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, 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, 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é.)

+ +
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.

+ +
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 JavaScript Object Notation (JSON). Bien que ces notations se ressemblent, il existe certaines différences :

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Ajout des getter et setter (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

+ + diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..1aac441b77 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,359 @@ +--- +title: Précédence des opérateurs +slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs +tags: + - JavaScript + - Opérateur + - Reference + - precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +
{{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 :

+ +
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

+ +
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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrécédenceType d'opérateurAssociativitéOpérateurs individuels
0GroupementNon applicable( … )
1Accès à un membreGauche à droite… . …
Accès à un membre calculéGauche à droite… [ … ]
new (avec une liste d'arguments)Non applicablenew … ( … )
Appel de fonctionGauche à droite… ( … )
Chaînage optionnelGauche à droite?.
2new (sans liste d'arguments)Droite à gauchenew …
3Incrémentation suffixeNon applicable… ++
Décrémentation suffixeNon applicable… --
4NON logiqueDroite à gauche! …
NON binaireDroite à gauche~ …
Plus unaireDroite à gauche+ …
Négation unaireDroite à gauche- …
Incrémentation préfixeDroite à gauche++ …
Décrémentation préfixeDroite à gauche-- …
typeofDroite à gauchetypeof …
voidDroite à gauchevoid …
deleteDroite à gauchedelete …
awaitDroite à gaucheawait …
5ExponentiationDroite à gauche… ** …
MultiplicationGauche à droite… * …
DivisionGauche à droite… / …
ResteGauche à droite… % …
6AdditionGauche à droite… + …
SoustractionGauche à droite… - …
7Décalage binaire à gaucheGauche à droite… << …
Décalage binaire à droiteGauche à droite… >> …
Décalage binaire à droite non-signéGauche à droite… >>> …
8Inférieur strictGauche à droite… < …
Inférieur ou égalGauche à droite… <= …
Supérieur strictGauche à droite… > …
Supérieur ou égalGauche à droite… >= …
inGauche à droite… in …
instanceofGauche à droite… instanceof …
9Égalité faibleGauche à droite… == …
Inégalité faibleGauche à droite… != …
Égalité stricteGauche à droite… === …
Inégalité stricteGauche à droite… !== …
10ET binaireGauche à droite… & …
11OU exclusif (XOR) binaireGauche à droite… ^ …
12OU binaireGauche à droite… | …
13ET logiqueGauche à droite… && …
14OU logiqueGauche à droite… || …
15Opérateur conditionnel ternaireDroite à gauche… ? … : …
16AffectationDroite à gauche… = …
… += …
… -= …
… *= …
… /= …
… **= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
17yieldDroite à gaucheyield …
yield*Droite à gaucheyield* …
18DécompositionNon applicable... …
19VirguleGauche à droite… , …
diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..9885b6d8ca --- /dev/null +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,196 @@ +--- +title: Chaînage optionnel (optional chaining) +slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining +tags: + - Chaînage + - Chaînage optionnel + - Coalescence + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{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 :

+ +
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 :

+ +
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 à : 

+ +
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 :

+ +
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, 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 :

+ +
// 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);
+    }
+  }
+}
+
+ +
// 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 :

+ +
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.

+ +
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 :

+ +
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 :

+ +
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")}}

+ +

Progression de l'implantation

+ +

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

+ +

{{EmbedTest262ReportResultsTable("optional-chaining")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/pipeline_operator/index.html b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..2763987971 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,72 @@ +--- +title: Tube +slug: Web/JavaScript/Reference/Opérateurs/Tube +tags: + - Experimental + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +
{{jsSidebar("Operators")}} {{SeeCompatTable}}
+ +

L'opérateur expérimental tube (ou pipeline en anglais) |> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :

+ +
let url = "%21%" |> decodeURI;
+ +

qui correspond exactement à :

+ +
let url = decodeURI("%21%");
+ +

Syntaxe

+ +
expression |> function
+ +

La valeur de expression est passé à function comme unique paramètre.

+ +

Exemples

+ +

Enchaîner des appels de fonction

+ +

L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.

+ +
const doubler = (n) => n * 2;
+const incrementer = (n) => n + 1;
+
+// Sans l'opérateur tube
+doubler(incrementer(doubler(10))); // 42
+
+// Avec l'opérateur tube
+10 |> doubler |> incrementer |> doubler; // 42
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon de spécification pour la proposition de l'opérateur tubeNiveau 1Ne fait actuellement pas partie de la spécification ECMAScript.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.operators.pipeline")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..e78aae110d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,154 @@ +--- +title: Accesseurs de propriétés +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +
{{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

+ +
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.

+ +
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 :

+ +
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

+ +
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

+ +
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.

+ +

Exemples

+ +
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".

+ +
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, 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.

+ +

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.

+ +
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 :

+ +
x = document.formulaire[controle].value;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..75f97a972f --- /dev/null +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,262 @@ +--- +title: Syntaxe de décomposition +slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Reference + - Syntaxe +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{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 :

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);
+ +

avec la décomposition, on peut désormais écrire :

+ +
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.

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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

+ +
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).

+
+ +
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 :

+ +
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 :

+ +
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 :

+ +
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 :

+ +
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) vise à ajouter la décomposition des propriétés pour les littéraux objets. 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()")}}.

+ +
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, 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()")}} :

+ +
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 :

+ +
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.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Définie dans plusieurs sections de la spécification : initialisateur de tableau, listes d'argument.
{{SpecName('ES2018', '#sec-object-initializer')}}{{Spec2('ES2018')}}Définie dans la section sur les initialisateurs d'objet.
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..05a40df1fc --- /dev/null +++ b/files/fr/web/javascript/reference/operators/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Opérateurs/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{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.propriété et super[expr] sont valides pour n'importe quelle définition de méthode, que ce soit au sein d'une classe ou d'un littéral objet.

+ +

Syntaxe

+ +
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 :

+ +
class Rectangle {
+  constructor(hauteur, largeur) {
+    this.name = 'Rectangle';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+  coucou(){
+    console.log('Coucou, je suis un ' + this.name + '.');
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set aire(valeur) {
+    this.hauteur = Math.sqrt(valeur);
+    this.largeur = Math.sqrt(valeur);
+  }
+}
+
+class Carré extends Rectangle {
+  constructor(longueur) {
+
+    // Ici, on appelle le constructeur de Rectangle
+    // qui est l'objet « parent » de Carré
+    super(longueur, longueur);
+
+    // Pour les classes dérivées, super() doit être appelé
+    // avant d'utiliser 'this' sinon cela entraînera une
+    // exception ReferenceError.
+    this.name = 'Carré';
+  }
+}
+ +

Utiliser super pour appeler des méthodes statiques

+ +

Il est possible d'utiliser super pour invoquer des méthodes statiques :

+ +
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 sur super.prop ou super[expr] pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :

+ +
class Base {
+  constructor() {}
+  toto() {}
+}
+
+class Dérivée extends Base {
+  constructor() {}
+  delete() {
+    delete super.toto;
+  }
+}
+
+new Dérivée().delete();
+// ReferenceError : suppression invalide avec 'super'
+ +

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 {{jsxref("Object.defineProperty")}}, super ne peut pas surcharger les valeurs de ces propriétés.

+ +
class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+class Y extends X {
+  constructor() {
+    super();
+  }
+  toto(){
+    super.prop = 2; // Impossible de surcharger
+  }
+}
+var y = new Y();
+y.toto(); // TypeError "prop" is read-only
+console.log(y.prop); // 1
+
+ +

Utiliser super.prop sur les littéraux objets

+ +

super peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise super pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("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 méthode1 dans obj1.

+ +
var obj1 = {
+  méthode1() {
+    console.log("méthode 1");
+  }
+}
+
+var obj2 = {
+  méthode2() {
+    super.méthode1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.méthode2(); // affiche "méthode 1" dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.operators.super")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/this/index.html b/files/fr/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..a5b23ca81d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/this/index.html @@ -0,0 +1,420 @@ +--- +title: L'opérateur this +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +--- +
{{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 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. ECMAScript 2015 (ES6) a ajouté les fonctions fléchées 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).

+ +
// 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

+ +
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).

+ +
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()")}} :

+ +
// 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")}}.

+ +
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').

+ +
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.

+ +
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, 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 :

+ +
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 :

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

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

+ +
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 :

+ +
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.

+ +
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).

+ +
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é.

+ +
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).

+
+ +
/*
+ * 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()")}}).

+ +
// 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 :

+ +
<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 :

+ +
<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ÉtatCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..e65d9a6db2 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,273 @@ +--- +title: L'opérateur typeof +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeRé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

+ +
// 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

+ +
// 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).

+ +

Un correctif fut proposé pour ECMAScript mais il fut refusé. Avec cette version, on aurait eu typeof null === 'null'.

+ +

Utiliser l'opérateur new

+ +
// 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

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

+ +
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 et 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 entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.

+ +
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".

+ +
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ÉtatCommentaires
{{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 :

+ +
typeof alert === 'object'
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/void/index.html b/files/fr/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..e15eb1ed76 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/void/index.html @@ -0,0 +1,122 @@ +--- +title: L'opérateur void +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{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 et notamment de celle de void, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :

+ +
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.

+ +
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 :

+ +
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écificationStatutCommentaires
{{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

+ + diff --git a/files/fr/web/javascript/reference/operators/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..f6a5de53e6 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,127 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Opérateurs/yield +tags: + - ECMAScript 2015 + - Générateurs + - Itérateur + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{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).

+ +
{{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. 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 :

+ + + +

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écificationStatutCommentaires
{{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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..3235d87dc1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,162 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Opérateurs/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +
{{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().

+ +
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) :

+ +
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 :

+ +
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ÉtatCommentaires
{{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

+ + + +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf